一、Vue 指令
5. v-for
专门在网页中根据一个数组或对象的成员，连续生成多个结构相同，内容不同的一组 html 元素的特殊指令，只要连续生成一组结构相同，但是内容不同的 HTML 元素时，都用 v-for 批量生成。
<要反复生成的元素 v-for="(元素值, 下标) of 数组"> <要反复生成的元素 v-for="(属性值, 属性名) of 对象"> //注意： //v-for只需一个元素当模板 //v-for统一了js中的for in和for of的功能 //vue中的v-for既可以遍历索引数组，又可以遍历对象
原理：每当 new Vue() 扫描到 v-for 时，先遍历数组或对象中每个成员；每遍历一个成员，取出当前成员的属性名和属性值，将属性值交给 of 前的 () 中第一个变量，将属性名/下标交给 of 前的 () 中第二个变量；同时会自动创建当前 v-for 所在元素的一个新副本，数组或对象包含几个成员 v-for 就会反复创建几个 HTML 元素副本。
of 前的两个变量，虽然没有在 new Vue() 的 data 中的定义，但可以在 v-for 所在元素及其子元素范围内用于绑定语法和指令。
举例：根据数组或对象的内容反复生成多个元素；
<body> <div id="app"> <h3>遍历数组中每个元素</h3> <ul> <li v-for="(a,i) of arr">{{i+1}} : {{a}}</li> </ul> <h3>遍历对象中每个属性</h3> <ul> <li v-for="(value,key) of lilei">{{key}} : {{value}}</li> </ul> </div> <script> var vm = new Vue({ el: "#app", data: { arr: ["张三", "李四", "王五"], lilei: { sname: "Li Lei", sage: 11, class: "初一2班" } } }) </script> </body>
结果如下：
v-for 本身也存在一些问题， 即使只修改了数组或对象中一个成员的值，v-for 默认也会删除所有元素副本，重新遍历和创建创建 HTML 元素副本，这样效率极低。
这是因为 v-for 生成的多个 HTML 元素副本，除了内容不同之外，元素本身没有任何差别，所以 v-for 每次只能删除所有 HTML 副本，再重建整个列表。
解决：只要使用 v-for 都必须同时绑定一个专门的属性： :key="不重复的值"
<li v-for="(元素值, i) of arr" :key="i">
拥有 key 值之后，v-for 就可以通过 key 属性值来鉴别每个 HTML 元素副本不同，修改时只要修改某一个 key 的元素即可，不用重建整个列表。
v-for 为什么必须加:key（高频笔试面试）：
a. 为每个元素添加唯一标识；
b. 避免重建整个列表；
c. 提高修改的效率。
v-for 还有反复生成指定数量的相同结构元素副本的功能，v-for 默认从1开始数数，数到 n 结束。每数一个数，就自动创建当前元素的一个副本。
<元素 v-for="i of n" :key="i">
举例：根据页数生成分页按钮；
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> <style> ul { list-style: none; } ul>li { float: left; width: 40px; height: 40px; text-align: center; line-height: 40px; border: 1px solid #555; border-radius: 5px; margin-left: 5px; } ul>li:hover { cursor: pointer; background-color: lightskyblue; color: #fff; border: 0; } </style> </head> <body> <div id="app"> <ul> <li v-for="i of pageCount" :key="i">{{i}}</li> </ul> </div> <script> var vm = new Vue({ el: "#app", data: { pageCount: 10 //共10页 } }) </script> </body>
效果如下：
补充拓展
vue2 中访问器属性存在两个问题，首先在 vue2 中使用下标修改数组中的元素值，无法自动更新页面，如下：
解决此问题需要用到数组当中的 API 代替下标来修改元素：
其次，第二个问题时只有开局就有的成员才受监控，后来新加入的成员不受监控，new VUE()只有在首次加载对象时，才给对象中每个属性自动创建访问器属性，后来强行添加的新成员，就无法获得访问器属性了。
6. v-on
专门为元素绑定事件的指令，只要在 vue 中要给元素绑定事件处理函数，都用 v-on。
<元素 v-on:事件名="事件处理函数(实参值,...)" //简写: //所有v-on，都可简写@: <元素 @事件名="事件处理函数(实参值,...)" //如果事件处理函数不需要传实参值，则可以省略() <元素 @事件名="事件处理函数" //传参: vue中事件处理函数，可以传实参值: <元素 @事件名="事件处理函数(实参值1, 实参值2,...)" methods:{ 事件处理函数(形参1, 形参2, ...){ } }
在 vue 中获得事件对象 e：
<元素 @事件名="事件处理函数" //一定不要加() methods:{ 事件处理函数(e){ } //e指代event } 如果既想穿实参值，又想获得事件对象，就要借助于 vue 中的一个关键字 $event ，专门在vue中提前获得事件对象。 <元素 @事件名="事件处理函数($event, 其它实参, ...)" methods:{ 事件处理函数(e, 形参,...){ e->event //结果是一样的 } }
在事件发生时，$event 关键字会提前获得事件对象 event，再由 vue 框架代为转交给事件处理函数对应的形参变量；只要使用 $event 关键字获得事件对象，则参数顺序无所谓，只要形参和实参可以对应即可。
举例：
<body> <!--点哪儿，喊哪儿疼!--> <div id="app"> <img src="img/1.jpg" @click="say($event,'张三')"> <img src="img/2.jpg" @click="say($event,'李四')"> </div> <script> new Vue({ el: "#app", methods: { say(e, sname) { if (e.offsetY < 100) { console.log(`${sname}头疼`); } else if (e.offsetY < 200) { console.log(`${sname}胸疼`); } else { console.log(`${sname}肚子疼`); } } } }) </script> </body>
7. v-html
专门绑定一段 HTML 代码片段到页面上的特殊指令，如果要绑定的内容是一段包含 HTML 内容的代码片段时，都用用 v-html。
直接使用 {undefined{ }} 绑定 HTML 代码片段，{undefined{ }} 不会将代码片段交给浏览器解析，而是原样显示到页面；这样就可用 v-html 代替 {undefined{ }}，v-html 指令底层相当于 DOM 中的 innerHTML，会先将 HTML 片段交给浏览器解析，将解析后文本显示到页面。
<元素 v-html="变量或表达式"></元素>
还要注意：v-html 不能将写死的部分字符串和变化的变量轻易拼接，波许使用 js 中的模板字符串才能拼接。
举例：绑定 HTML 片段到页面中显示；
<body> <div id="app"> <h3>来源: {{msg}}</h3> <h3 v-html="`来源：${msg}`"></h3> </div> <script> new Vue({ el: "#app", data: { msg: `来自<a href="#"><<新华社>></a>的消息` } }) </script> </body>
效果如下：
8. 防止用户短暂看到{undefined{ }} v-cloak v-text
当网速慢时，new Vue() 有可能延迟加载，用户就有可能短暂看到页面上的 {undefined{ }} 语法。这个时候就可以用到 v-cloak 和 v-text：
（1）v-cloak
专门在 new Vue() 加载之前，暂时隐藏部分元素的特殊指令，如果希望在 new Vue() 加载完之前，暂时隐藏部分元素，避免用户短暂看到 {{ }}，都可以用 v-cloak。
//1. //在css中用属性选择器，选择所有带有v-cloak属性的元素，使用display:none，手工隐藏这些元素 //2. <要暂时隐藏的元素 v-cloak>
原理：在 new Vue() 加载完之前，v-cloak 和 css 中的属性选择器 [v-cloak] 联合发挥作用，隐藏部分元素，当 new Vue() 加载完之后，会自动查找页面中所有 v-cloak 的元素，自动删除所有 v-cloak 属性。
（2）v-text
专门代替 {undefined{ }} 绑定元素内容的特殊指令，只要不想让用户短暂看到 {{ }}，都可用 v-text 代替 {undefined{ }}。
<要隐藏的元素 v-text="变量或表达式"></要隐藏的元素>
注意如果 v-text 的内容由需要部分写死的文本和变化的内容拼接而成，必须用模板字符串 。
举例：使用 v-cloak 或 v-text 防止用户短暂看到 {undefined{ }}；
<style> /*css中属性选择器: 选择所有带有v-cloak属性的元素*/ [v-cloak] { display: none; } </style> <body> <div id="app"> <h3 v-cloak>Welcome {{uname}}</h3> </div> <script> new Vue({ el: "#app", data: { uname: "dingding" } }) </script> </body>
<body> <div id="app"> <h3 v-text="`Welcome${uname}`"></h3> </div> <script> setTimeout(function () { new Vue({ el: "#app", data: { uname: "dingding" } }) }, 2000) </script> </body>
对比 v-cloak 和 v-text：
只需在父元素上添加 v-cloak，就可以批量隐藏元素，而使用 v-text 时如果需要隐藏的元素过多则需重复使用；所以推荐使用 v-cloak。
9. v-once
专门控制一个元素只在首次加载时绑定一次，之后即使变量值改变，也不会自动更新页面；如果一个元素的内容，只会在首次加载时绑定一次，之后几乎不会改变时，都用 v-once 标记。
<元素 v-once>{{...}}</元素>
原理：凡是标有 v-once 的元素，new Vue() 只在首次记载时，动态更新元素的内容，但不会将 v-once 的元素加入到虚拟 DOM 树中，所以将来就算变量值发生变化，也无法通知到这个元素。
凡是标有 v-once 的元素，都不会加入虚拟 DOM 树中，所以减少了虚拟 DOM 树中的元素的个数，虚拟 DOM 树遍历更快，效率更高。
举例：使用 v-once 标记元素只在首次绑定时更新一次，之后不再反复更新；
<body> <div id="app"> <h3 v-once>上线时间: {{time}}</h3> <h3>当前系统时间: {{time}}</h3> </div> <script> var vm = new Vue({ el: "#app", data: { time: new Date().toLocaleString() } }); //每隔一秒修改一次vm中time变量的值为新的时间点 setInterval(function () { vm.time = new Date().toLocaleString(); }) </script> </body>
效果如下：
10. v-pre
专门阻止 vue 编译内容中的 {undefined{ }} 的特殊指令，在极少数情况下，正文中包含了不希望被 vue 编译的 {{ }} 时，采用 v-pre 保护。
<元素 v-pre>xxx{{xxx}}xx</元素>
举例：使用 v-pre 防止 vue 编译内容中的 {undefined{ }}；
<body> <div id="app"> <h1>vue框架采用{{自定义变量名}}方式标记页面中可能发生变化的位置</h1> <h1 v-pre>vue框架采用{{自定义变量名}}方式标记页面中可能发生变化的位置</h1> </div> <script> new Vue({ el: "#app" }) </script> </body>
效果如下：
总结：绑定语法+13种指令
(1). 如果元素的内容需要随变量自动变化: {undefined{ }}
(2). 如果元素的属性值需要随变量自动变化: :
(3). 控制一个元素显示隐藏: v-show //使用display:none隐藏元素
(4). 控制两个元素二选一显示: v-if v-else //使用删除元素方式隐藏元素
(5). 控制多个元素多选一显示隐藏: v-if v-else-if v-else
(6). 反复生成多个相同结构不同内容的元素时: v-for :key
(7). 事件绑定: @ $event
(8). 只要绑定的内容中包含HTML片段: v-html
(9). 防止用户短暂看到{undefined{ }}: v-cloak 或 v-text
(10). 限制元素只在首次加载时绑定一次，之后不再变化: v-once
(11). 阻止vue编译内容中的{undefined{ }}: v-pre
(12). 只要想自动获得页面上用户输入或选择的新值: v-model(几乎只要表单元素，都用v-model)
