1.库和框架的区别：
1.1 库
jquery是库，库就是一堆方法的集合，按需调用即可。
1.2 vue 是框架
框架是某类业务提供的整套的解决方案，并且定义好了一整套的方案，开发者必须按照规范去使用。
1.3 vue是MVVM的框架
M => Model (数据模型)
V => View (视图模型， 负责将数据模型转化为UI展现出来，就是那些DOM结构)
VM => ViewModel (一个同步View 和Model的对象)
1.4 vue 版的Hello world 体会MVVM
1.5 MVC 和 MVVM 的区别
1.6 插值表达式的使用
1 <html lang="en"> 2 <head> 3 <title></title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <script src="./lib/vue-2.4.0.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 {{ name }} 11 {{ age }} 12 <!-- 插值表达式的合法用法有： 表达式/三元运算符 --> 13 <h1>表达式</h1> 14 <p>{{ age + 1}}</p> <!-- 输出 19 --> 15 <p>{{ name.split('').reverse().join('')}}</p> 16 <!-- split() 是转换成数组 reverse() 是倒序 join() 是转换成字符串 最后输出：kcaJ--> 17 18 <h1>三元运算符</h1> 19 <p>{{age >= 18 ? '已成年' : '未成年'}}</p> <!-- 输出 已成年 --> 20 </div> 21 <script> 22 var vm = new Vue({ 23 el: '#app', 24 data: { 25 name: 'Jack', 26 age: 18 27 } 28 }) 29 </script> 30 </body> 31 </html>
2. vue指令
2.1 v-text 和 v-html 指令
指令： 凡是以 v- 开头的就是指令，指令的功能就是增强 html 标签的功能
v-text的使用：
1 <html lang="en"> 2 <head> 3 <title>v-text</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <script src="./lib/vue-2.4.0.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <!-- 除了插值表达式之外，v-text指令也可以用来渲染文本。 11 使用： 在标签的属性位置写上 v-text= “属性名” --> 12 13 <div>{{ name }}</div> <!-- 插值表达式 --> 14 <div v-text="name"></div> <!-- v-text --> 15 </div> 16 <script> 17 var vm = new Vue({ 18 el: '#app', 19 data: { 20 name: 'Jack', 21 } 22 }) 23 </script> 24 </body> 25 </html>
和插值表达式的使用不区别：
插值表达式写在innerHtml 的位置，而v-text 写在标签属性的位置，实际中推荐使用插值表达式 {{ }}
v-html 的使用： 可以解析带标签的文本
当文内容里面包含有 标签的 时候，v-text 就不能识别标签，惹事将标签一起解析出来，这时我们就需要使用 v-html 属性来解析
案例如下：
1 <html lang="en"> 2 <head> 3 <title>v-text</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <script src="./lib/vue-2.4.0.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <div v-text="name"></div> <!-- v-text --> 11 <div v-text="age"></div> <!-- v-text不能解析标签 --> 12 <div v-html="age"></div> <!-- 使用v-html解析 --> 13 </div> 14 <script> 15 var vm = new Vue({ 16 el: '#app', 17 data: { 18 name: 'Jack', 19 age: '<p>18</p>' 20 } 21 }) 22 </script> 23 </body> 24 </html>
页面展示：
注： 在网站上动态渲染任意的 HTML 是非常危险的，因为会导致XSS的攻击，只在可信内容上使用 v-html， 永不用在用户提交的内容上！
2.2 v-bind 指令的使用
v-bind 可以动态绑定属性名。 使用方式：v-bind:属性名=“data里面的属性”。v-bind 的简写方式 :属性名=“data里面的属性”。
v-bind动态绑定案例代码如下：
1 <html lang="en"> 2 <head> 3 <title>v-bind指令</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <script src="./lib/vue-2.4.0.js"></script> 7 <style> 8 .color { 9 color: red; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="app"> 15 <div>{{ name }}</div> <!-- 插值表达式引入name --> 16 17 <!-- v-bind 可以动态绑定属性名。 使用方式：v-bind:属性名=“data里面的属性” --> 18 <img v-bind:src="pir" style="width: 500px" alt=""> 19 <!-- v-bind 的简写方式 :属性名=“data里面的属性” --> 20 <img :src="pir" style="width: 500px" alt=""> 21 22 <!-- 案例2 v-bind 动态绑定 --> 23 <a :href="'del.php?id='+id">删除</a> 24 25 <!-- 案例3 v-bind可以想绑定什么属性 就绑定什么属性 这在后面的组件发开很常用 例如给 P 标签绑定name属性--> 26 <p :name="name">测试属性绑定</p> <!-- 页面显示 <p name="Jack">测试属性绑定</p> --> 27 28 <!-- 案例4 v-bind 动态绑定属性类 :class="{'类名'：布尔值}" 布尔值部分也可以是值为布尔的表达式，如：70 == '70' ,当布尔值为 false 时，绑定的类名不起作用--> 29 <p :class="{'color': true}">测试绑定类名 红色字体</p> 30 </div> 31 <script> 32 var vm = new Vue({ 33 el: '#app', 34 data: { 35 name: 'Jack', 36 pir: './plane.jpg', 37 id: 11 38 } 39 }) 40 </script> 41 </body> 42 </html>
页面显示效果：
2.3 v-for 指令
如果 data 中的某个属性有多个值，例如 name 属性中有多个人名，那么这些人名将保存在数组中，则可以通过 v-for 来渲染， v-for 可以渲染数组 和 对象
v-for遍历数组： 有两种方法
1. 在标签属性的位置写 v-for="item in arr", item 是数组中的每一项，名字可以随便取，arr 是要遍历的数组
2. 在标签属性的位置写 v-for="(item, index) in arr", index 是表示数组中每一项的索引
v-for遍历对象： 有两种方法
1. 在标签属性的位置上写 v-for="value in obj", value是对象中键的值，名字可以随便取，obj是要遍历的对象
2. 在标签属性的位置上写 v-for="（value, key, index） in obj" ,value是对象中键的值, key是对象中的键，index表示对象中的每个键值对的索引
案例代码：
1 <html lang="en"> 2 <head> 3 <title>v-for指令</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <script src="../lib/vue-2.4.0.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <!-- v-for可以遍历数组，有两种方法 --> 11 <!-- 12 1. 在标签的属性位置写上 v-for="item in arr", item 表示数组中的每一项,名字可以随便取名，每一项的值通过点的方式获取（item.属性名），
arr 是表示要遍历的数组 13 2. 在标签属性的位置写 v-for="(item, index) in arr" index表示数组中每一项的索引 14 --> 15 <h3> v-for="item in arr"</h3> 16 <p v-for="item in user">{{item.name}} : {{item.age}}</p> 17 18 <h3> v-for="(item, index) in arr"</h3> 19 <p v-for="(item, index) in user">{{item.name}} : {{item.age}} 索引：{{index}}</p> 20 21 <!-- v-for不但可以遍历数组，还可以遍历对象 也有两种方法--> 22 <!-- 23 1. 在标签的属性的位置上写 v-for="value in obj", value 表示对象键的值，这个名可以随便取，obj 表示要遍历的对象 24 2. 在标签的属性的位置上写 v-for="(value, key, index) in obj", key 表示对象的键，value 表示对象键的值，index 表示每一键值对的索引 25 --> 26 <h3> v-for="value in obj"</h3> 27 <p v-for="value in boss">{{value}}</p> 28 29 <h3>v-for="(value, key, index) in obj"</h3> 30 <p v-for="(value, key, index) in boss">{{key}} : {{value}} 索引：{{index}}</p> 31 </div> 32 <script> 33 var vm = new Vue({ 34 el: '#app', 35 data: { 36 user: [ 37 {name: 'Rose', age: 18}, 38 {name: 'Jack', age: 16} 39 ], 40 boss: { 41 name: 'JackMa', 42 age: 30, 43 sex:' male' 44 } 45 } 46 }) 47 </script> 48 </body> 49 </html>
页面展示效果：
注意：
v-for 能够根据 data 中的数据变化自动刷新视图（页面）
实例如下：
通过vue插件，展示v-for 可实现根据data中数据变化，自动更新页面
以下两种情况，不会触发视图自动更新：
1. 当时用数组的 length 属性去改变数组的时候，不会触发视图更新
2. 使用数组下标的方法去改变数组的时候，也不会触发视图更新
案例1： 当时用length属性改变数组的时候，虽然数组length为0，vue插件中也显示数组中为0项，但是页面仍然没有更新，还显示原有数据
案例2： 当我们通过下标的方法更改数组里面的数据时，控制台和 vue插件中都显示已经更改，但是页面仍然显示原有数据，没有自动更新
解决方法：
1. 使用 Vue.set(arr, index, newVal) arr是需要改变的数组， index是数组里面的项， newVal是改变后的值
实例：
2. 使用 数组方法 Array.prototype.splice(要删除的索引，删除个数) 删除数组
实例：
使用 Array.prototype.splice(要删除的索引，删除个数) 之前 
使用 Array.prototype.splice(要删除的索引，删除个数) 之后：
注意： v-for 必须结合 key 属性来使用，他会唯一标识数组中的每一项，未来当数组中的某一项改变的时候，它只会更改那一项，不用全部刷新整个页面，好处就是提升性能，但是需要注意 key 值是唯一的，不能重复。绑定 key 属性 ：key
2.4 v-model 指令
v-model 指令 用来双向数据绑定，就是 model（数据模型） 和 view （视图层）的值同步变化
注意： v-model 指令只能在 input/ textarea/ select 中使用
案例：
1 <html lang="en"> 2 <head> 3 <title>v-model</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <script src="../lib/vue-2.4.0.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <!-- v-model 指令的使用 实现双向数据绑定--> 11 <input type="text" v-model="name"> 12 </div> 13 <script> 14 var vm = new Vue({ 15 el: '#app', 16 data: { 17 name: 'Jack' 18 } 19 }) 20 </script> 21 </body> 22 </html>
页面展示：
当在控制台将name改为rose时：
当在文本框中将Jack 改为 zhangdan 时，控制台即model层也更新为zhangdan
2.5 v-on 指令
1 <html lang="en"> 2 <head> 3 <title>v-on</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <script src="../lib/vue-2.4.0.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <h1>{{ name }}</h1> 11 <!-- v-on 是用来监听 Dom 事件 --> 12 <!-- 13 使用方法： 14 1. 在标签的属性位置上写 v-on:任意的事件类型="要执行的函数" 简写： @任意的事件类型="要执行的函数" 15 --> 16 <button v-on:click="changeMsg">v-on监听</button> 17 <button @click="changeMsg">v-on监听简写</button> 18 <hr> 19 <!-- 20 2. 通过执行函数传参，案例1中 name 值是固定不变的，当参数是需要改变的，就需要传参 21 --> 22 <button v-on:click="changeMsgByArg('zhangsan')">传参</button> 23 <span>通过执行函数传参</span> 24 <hr> 25 <!-- 26 3.通过执行函数中添加 $event 参数传递事件对象，注意，只能是 $event,并且不能加引号。 然后通过console.log(e) 查看传递的对象e 所包含的对象。 27 --> 28 <button v-on:click="getEvent($event)">传递事件对象</button> 29 <hr> 30 <!-- 31 4. 事件修饰符,vue.js 给v-on 提供了事件修饰符。修饰符就是由点开头的指令后缀表示，可以给事件添加特殊功能
常用的.stop (阻止冒泡) .prevent （阻止默认事件）详情了解 https://cn.vuejs.org/v2/api/#v-on 32 --> 33 <a href="https://www.baidu.com" @click.prevent="changeMsg">事件修饰符-跳转</a> 34 <!-- 阻止了 a 标签跳转到百度页面，转而执行 changeMsg 函数 --> 35 <hr> 36 <!-- 5. 按键修饰符 在监听键盘事件时 vue 允许 v-on 在监听键盘事件时，添加按键修饰符，常用的有.enter --> 37 name： <input type="text" v-on:keyup.13="submit"> <!-- enter键的 keycode 是13 --> 38 name： <input type="text" v-on:keyup.enter="submit"> <!-- 由于keycode难以记住，vue为常用键提供了别名 --> 39 </div> 40 <script> 41 var vm = new Vue({ 42 el: '#app', 43 data: { 44 name: 'Jack' 45 }, 46 // 在 methods 属性中定义函数 47 methods: { 48 changeMsg(){ //在 methods 中想要获取 data 中的属性，需要在属性前面加上this，this 表示 vue 实例 49 this.name = 'Rose' 50 }, 51 changeMsgByArg(arg){ 52 this.name = arg 53 }, 54 getEvent(e){ 55 console.log(e); 56 }, 57 submit(){ 58 alert('你按了enter键') 59 } 60 } 61 }) 62 </script> 63 </body> 64 </html>
页面效果如下：
点击v-on或者v-on监听简写如下 ： 点击传参按钮如下：
点击传递事件按钮效果如下：
点击事件修饰符-跳转 效果如下：
文本框中输完按回车后效果如下： （使用了 v-on:keyup.enter="执行函数" 的按键修饰符）
2.6 v-if 和 v-show 指令
1 <html lang="en"> 2 <head> 3 <title>v-if和v-show</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <script src="../lib/vue-2.4.0.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <!-- v-if 和 v-show 可以用来控制元素的显示和隐藏 用法：v-if="布尔值" v-show="布尔值" 布尔值为true时，元素显示，布尔值为false 时，元素隐藏--> 11 <h1>v-if</h1> 12 <p v-if="isVisible">这是v-if</p> 13 <h1>v-show</h1> 14 <p v-show="isVisible">这是v-show</p> 15 <!-- 16 v-if 和 v-show 的区别： 17 v-if 是通过控制元素的 Dom 来实现的元素的显示和隐藏的 18 v-show 是通过控制样式 display：none; 来控制元素的显示于隐藏 19 使用场景： 20 涉及到大量的dom 操作的时候，我们使用 v-show 21 涉及到异步数据渲染的时候 我们使用 v-if 22 --> 23 </div> 24 <script> 25 var vm = new Vue({ 26 el: '#app', 27 data: { 28 isVisible: true 29 } 30 }) 31 </script> 32 </body> 33 </html>
当 布尔值 为 true 时，v-if 和 v-show 显示没什么区别，如图：
当 布尔值 为 false 时，v-if 和 v-show 区别如图：
v-else-if 的用法
1 <html lang="en"> 2 <head> 3 <title>v-else-if</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <script src="../lib/vue-2.4.0.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <!-- 使用v-else-if，前一兄弟元素必须有 v-if 或 v-else-if --> 11 <div v-if="type === 'A'"> 12 A 13 </div> 14 <div v-else-if="type === 'B'"> 15 B 16 </div> 17 <div v-else-if="type === 'C'"> 18 C 19 </div> 20 <div v-else> 21 Not A/B/C 22 </div> 23 </div> 24 <script> 25 var vm = new Vue({ 26 el: '#app', 27 data: { 28 type: 'A' 29 } 30 }) 31 </script> 32 </body> 33 </html>
页面结果 显示 A
2.6 v-cloak指令
1 <html lang="en"> 2 <head> 3 <title>v-cloak</title> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <script src="../lib/vue-2.4.0.js"></script> 7 <style> 8 [v-cloak] { <！-- 2. 写样式文件 --> 9 display: none; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="app"> 15 <!-- 1.给闪烁的元素加 v-cloak， 防止元素闪烁 --> 16 <!-- 当vue 文件结束编译后，（文件加载完成之后） v-cloak 会被删除--> 17 <p v-cloak>{{msg}}</p> 18 </div> 19 <script> 20 var vm = new Vue({ 21 el: '#app', 22 data: { 23 msg: 'hello' 24 } 25 }) 26 </script> 27 </body> 28 </html>
页面显示效果： p 标签中并没有 [v-cloak] 属性，因为在页面在加载完成后，其已经删除
