10. v-cloak
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
代码演示：
网速慢的时候：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-clock</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{name}}</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name:"Dapan"
},
});
</script>
</body>
</html>
这个时候因为网速过慢，导致vue.js并没有加载出来，所以页面渲染如下：
使用v-cloak之后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>v-cloak</title>
<script src="../js/vue.min.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="root">
<h1 v-cloak>{{name}}</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name:"Dapan"
},
});
</script>
</body>
</html>
设置了所有包含v-cloak属性的页面的display为none：
打开Live Server为空白，但是当vue.js加载好之后会删掉v-cloak属性，进而display值也就不再是none
11. v-once
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1 v-once>初始化时候的n是:{{n}}</h1>
<h1>现在的n是:{{n}}</h1>
<button @click="n++">点我n加1</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
n: 1,
},
});
</script>
</body>
</html>
点击两次按钮之后：
注意： v-cloak和v-once都没有值（后面都没有等号）。
12. v-pre
1.跳过Vue在有
v-pre属性的所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译速度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1 v-pre>没有使用指令语法和插值语法</h1>
<h1 v-pre>{{name}}</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name: 'dapan',
},
});
</script>
</body>
</html>
一句话总结这12个常用指令：
- v-on : 绑定事件监听, 可简写为@
- v-bind : 单向绑定解析表达式, 可简写为 :xxx
- v-model : 双向数据绑定
- v-for : 遍历数组/对象/字符串
- v-show : 条件渲染 (动态控制节点是否展示)
- v-if : 条件渲染（动态控制节点是否存存在）
- v-else : 条件渲染（动态控制节点是否存存在）
- v-text：将数据填充到标签中（不会解析填充内容中的HTML标签）
- v-html：将数据填充到标签中（会解析填充内容中的HTML标签）
- v-cloak：一个特殊属性，Vue接管标签后会删掉这个属性（没有值）
- v-once：只渲染一次，之后Vue就不再渲染这个标签了（视为静态内容了）
- v-pre：Vue不接管这个属性所在的标签（可用于加快编译速度，用于没有使用指令语法、没有使用插值语法的节点上）
