Vue简介
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，其核心库只关注视图层。可以根据开发需求，来决定Vue框架控制项目的具体方位：可以是一个标签，也可以是一个页面，甚至可以是整个项目。
vue框架是一种前台框架，且参考了其他框架，具有轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用等优点。
MVC和MVVM的区别
基本代码MVVM模式
注意：
1.Vue实例不能控制body，及div中的那个id=‘app’不能写到body上。
2.通过Vue提供的指令，可方便的就能把数据渲染到页面上，不需要再手动的操作DOM元素。
3.methods里的方法要使用到data中的数据，那么就要使用this。
一个Vue实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue导入</title> 6 <script src="js/vue.js"></script> 7 </head> 8 9 <body> 10 <!-- 将来 new 的Vue实例，会控制这个元素中的所有内容 --> 11 <div id="app"> 12 <p v-text='number'><p> //插值表达式 13 <p v-html='content' @click='handleClick'><p> //v-html会转义 14 <p>{{ msg }}</p> 15 </div> 16 </body> 17 18 <script> 19 new Vue({ 20 el: '#app', // el表示挂载点 21 template:"<p>hello{{msg}}<p>" 22 23 // 这里的 data 专门用来保存每个页面的数据 24 data: { // data 属性中，存放的是 el 中要用到的数据 25 msg: "hello world", // 通过 Vue 提供的指令，就能把数据渲染到页面上 26 number:123, 27 }, 28 // vue实例的方法 29 methods:{ 30 handleClick:function(){ 31 // 方便之处就是不用管Dom 32 this.content = 'world'; 33 } 34 } 35 }) 36 </script> 37 </html>
挂载点
el就是挂载点，它就是告诉实例要找页面上节点id为app的元素来插入替换；
模板
template 为模板，可以理解为插入到页面的内容，或者是准备好的页面内容，一般在工作中template是不写在实例里面，页面上id为app的div包含的内容默认就是template;
实例
new Vue() 创建出来一个实例，就是一个vue的组件，我们可以看到挂载点，模板是写在实例里面，是实例的属性。data表示实例上的一些数据，methods表示实例上的方法，改变data里的数据项this.xxx。
实例相关成员介绍
挂载点
1.Vue渐进式框架：控制页面及项目的范围
2.Vue的环境导入：本地、cdn
3.Vue框架的优点：轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件式开发、单页面应用
4.Vue如何与HTML页面结构建立关联：挂载点
注意：
1. html与body不能作为挂载点
2.一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识
数据
1.用data来为Vue环境提供数据，数据采用字典{ }形式
2.在插值表达式{{ }}中，直接书写数据的key来访问数据。
3.在外部通过接受实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据app.$data.info
4.在外部也可以通过实例变量app直接访问数据app.info
5.在Vue实例内部的方法methods中，使用变量，this.info(this在这等价于app)
<div id="app"> <!-- {{}}是插值表达式，中间出现的info是vue变量 --> <p>{{ info }}</p> <p>{{ info }}</p> <p>{{ num }}</p> <p>{{ arr }}</p> <p>{{ dic }}</p> </div> <script src="js/vue.js"></script> <script> let app = new Vue({ // 让app来接收实例 el: '#app', data: { // 采用data来定义变量，data后接字典。 info: 'message', num: 100, result: true, // 布尔le arr: [1, 2, 3, 4, 5], dic: { name: 'Owen', age: 17.5 } } }) </script> <script> console.log(app); console.log(app.$data.info); console.log(app.info); </script>
过滤器
1..过滤器本身就是数据处理函数，可以将插值表达式中的数据作为参数进行处理，得到的函数返回值就是处理后的结果。
2.过滤器的使用语法{{ ...变量 | 过滤器(...变量) }}
3.过滤器在实例中由filters成员提供
1 <div id="app"> 2 <!--1）插值表达式可以直接做简单运算--> 3 <p>{{ num + 3.5 }}</p> 4 <p>{{ msg.split('')[4] }}</p> // split拆分，[4]表示要取到的位数 5 <p>{{ num | f1 }}</p> 6 <p>{{ 10, 20, 30, 40 | f2 }}</p> 7 <p>{{ 10, 20 | f2(50, 80) }}</p> // 可以对前面的四个结果统一过滤，也可以对部分结果进行部分过滤， 8 余下的参数用括号传进去 9 <p>{{ 120 | f2 }}</p> // 可以多传 ，但不能少传，少传的参数用NaN代替 10 </div> 11 <script src="js/vue.js"></script> 12 <script> 13 new Vue({ 14 el: '#app', 15 data: { 16 num: 100, 17 msg: 'message' 18 }, 19 filters: { // 表示过滤器，可以写多个 20 // 总结：{{ num | f1 }} 21 f1: function (num) { 22 return num * 2 // 过滤后的结果 23 }, 24 // 总结：{{ a,b,c,d | f2 }} {{ a,b,c | f2(d) }} { a,b| f2(c,d) }} { a| f2(b,c,d) }} 25 f2: function (a, b, c, d) { 26 console.log(a, b, c, d); 27 return a + b + c + d 28 } 29 } 30 }) 31 </script>
文本指令
1.插值表达式，同v-text指令一样，渲染普通文本
2.v-html指令可以渲染有html语法的文本，能解析html语法
3.文本指令中可以渲染变量，也可以渲染常量
1 <div id="app"> 2 <p>{{ info }}</p> 3 4 <!--1）v-指令名="变量"，变量是需要data提供数据值的 --> 5 <p v-text="info"></p> 6 <!--2）v-指令名="常量"，常量采用常量基本的语法，数字与布尔类型等可以直接书写的直接书写，字符串等需要特殊符号的需要添加符号--> 7 <p v-text="123"></p> 8 <p v-text="true"></p> 9 <p v-text="'abc' + info"></p> 10 <p v-text="[1, 2, 3]"></p> 11 12 <!--3）v-html可以解析html语法--> 13 <p v-html="`<b style='color:red'>好的</b>`"></p> 14 <p v-text="'<b>好的</b>'"></p> 15 </div> 16 <script src="js/vue.js"></script> 17 <script> 18 new Vue({ 19 el: '#app', 20 data: { 21 info: 'data提供的数据', 22 } 23 }) 24 </script>
反引号补充
1.js多行字符串，反引号` `
2.反引号字符串中可以直接填充变量，语法为`$(变量名)`
let s1 = ` 第一行 // let表示声明一个变量
第二行
结束行`；
console.log(s1)；
事件指令 (v-on简写为@)
1.语法：v-on:事件名="函数名(参数名)"
2.简写：@事件名="函数名(参数名)"
3.用methods实例成员提供 事件函数 的实现
4.事件传参：函数名 | 函数名() | 函数名(自定义参数) | 函数名($event, 自定义参数)
用法：
1）.可作为绑定事件监控器。事件类型是由参数指定，表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
2）.用在普通元素上时，只能监控原生DOM事件；用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body { 8 /*页面文本不允许选择*/ 9 user-select: none; 10 } 11 .low-num { 12 cursor: pointer; 13 } 14 .low-num:hover { 15 color: red; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="app"> 21 <!-- 事件指令：v-on:事件名="事件函数名" --> 22 <p class="low-num" v-on:click="lowNum"> 23 <span>点击减一：</span> 24 <span>{{ num }}</span> 25 </p> 26 27 <p v-on:dblclick="dblAction">双击</p> 28 29 <!-- v-on:事件名="事件函数" 可以简写为 @事件名="事件函数" --> 30 <p @mouseover="overAction()">悬浮</p> 31 <p @mouseover="overAction(10)">悬浮1</p> 32 <p @mouseover="overAction(10, 20)">悬浮2</p> 33 <p @mouseover="overAction(10, 20, $event)">悬浮3</p> 34 35 <!-- 事件传参： 36 @事件='方法' 默认传入事件对象 $event 37 @事件='方法()' 不传递任何参数 38 @事件='方法(参数...)' 只传递自定义参数 39 @事件='方法($event, 参数...)' 自定义传参时传递事件对象 40 --> 41 </div> 42 </body> 43 <script src="js/vue.js"></script> 44 <script> 45 let app = new Vue({ 46 el: '#app', 47 data: { 48 num: 99 49 }, 50 methods: { 51 lowNum: function () { 52 // 在vue实例内部的方法中，使用变量 53 // alert(this.num) 54 this.num -= 1; 55 }, 56 dblAction (ev) { 57 // alert('双击事件'); 58 console.log(ev) 59 }, 60 overAction(a, b, c) { 61 console.log(a, b, c) 62 } 63 } 64 }) 65 </script> 66 </html>
属性指令
1.语法：v-bind:属性名="变量"
2.v-bind：属性名="变量" 可简写为 :属性名="变量"
3.单值属性绑定： :title="变量" | :id="变量" | :自定义属性="变量"
4.style属性绑定： :style="字典变量" | :style="{css属性1：变量1，...，css属性n:变量n}"
5.class属性绑定： :class='变量' | :class="[变量1，...，变量n]" | :class="{}类名：布尔变量}"
用法：
1）.动态绑定一个或多个特性，或一个组件prop到表达式。
2）.在绑定class或style特性时，支持其他类型的值，如数组或对象。
3）.没有参数时，可以绑定到一个包含键值对的对象。此时class和style绑定不支持数组和对象。
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>属性指令</title> 6 <style> 7 [index] { 8 color: orange; 9 } 10 11 .ccc { 12 background-color: yellowgreen; 13 color: greenyellow; 14 border-radius: 50%; 15 } 16 .ccc1 { 17 background-color: yellowgreen; 18 } 19 .ccc2 { 20 color: greenyellow; 21 } 22 .ccc3 { 23 border-radius: 50%; 24 } 25 26 .ttt { 27 background-color: gold; 28 color: orange; 29 } 30 </style> 31 </head> 32 <body> 33 <div id="app"> 34 <!--1) 语法：v-bind:属性名="变量" --> 35 <p id="p1" class="p1" style="" title="" index="">属性指令1</p> 36 <p id="p2" v-bind:class="p1" style="" title="" index="">属性指令2</p> 37 38 <p v-bind:index="p1">自定义属性也可以被vue绑定1</p> 39 <!--2) v-bind:属性名="变量" 简写 :属性名="变量" --> 40 <p :index="p1">自定义属性也可以被vue绑定2</p> 41 <p :title="'文本提示'">悬浮文本提示</p> 42 43 <!--3) style样式属性绑定 --> 44 <p :style="myStyle">样式绑定1</p> 45 <p :style="{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2</p> 46 47 <!--4) class类属性绑定 --> 48 <p :class="myc1">样式绑定3</p> 49 <p :class="[myc2,myc3,myc4,'bbb']">样式绑定4</p> 50 <!--xxx是类名，是否起作用有布尔类型变量yyy值决定 --> 51 <p :class="{xxx:yyy}">样式绑定5</p> 52 53 54 <!--案例：点击切换类名是否起作用--> 55 <p @click="clickAction" :class="{ttt:yyy}">点击切换类</p> 56 </div> 57 </body> 58 <script src="js/vue.js"></script> 59 <script> 60 new Vue({ 61 el: '#app', 62 data: { 63 p1: 'q1', 64 myStyle: { 65 backgroundColor: 'pink', 66 color: 'deeppink', 67 'border-radius': '50%' 68 }, 69 c1: 'cyan', 70 c2: 'tan', 71 myc1: 'ccc ddd eee', 72 myc2: 'ccc1', 73 myc3: 'ccc2', 74 myc4: 'ccc3', 75 yyy: true, // false 76 }, 77 methods: { 78 clickAction() { 79 this.yyy = !this.yyy; 80 } 81 } 82 }) 83 </script> 84 </html>
表单指令
1. 语法：v-model="控制vaule值的变量"
2. :value="变量" 直接绑定数据不会时时更新(修改表单标签值，值不会时时映射给绑定的变量)
3.v-model="变量" 绑定数据会时时更新(修改表单标签值，值会时时映射给绑定的变量)