Vue（二）vue 指令及用法举例
目录
8. 防止用户短暂看到{{ }} v-cloak v-text
一、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)
文章来源: majinjian.blog.csdn.net，作者：Developer 小马，版权归原作者所有，如需转载，请联系作者。
原文链接：majinjian.blog.csdn.net/article/details/120321216
- 点赞
- 收藏
- 关注作者
评论（0）