15.内置指令
v-text
v-text的作用和插值语法很像，但是插值语法更加灵活，可以替换掉标签内部分内容；v-text只能替换标签内的整个内容。
<body>
<div id="root">
<!-- 插值语法替换掉name -->
<h2>你好，{{name}}</h2>
<!-- v-text替换掉整个标签内容 -->
<h2 v-text="str"></h2>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
name:"世界",
str:"hello, world"
}
})
</script>
显示结果：
v-html
v-html的作用和v-text的作用很像，但是v-html可以解析内容中的html语法，但是这种解析会带来安全隐患。在网站上动态渲染任何html是非常危险的，容易导致XSS攻击，一定要在可信的内容上使用v-html，不要用在用户提交的内容上。
<body>
<div id="root">
<!-- v-html可以解析html, v-text不可以解析-->
<h2 v-html="html"></h2>
<h2 v-text="html"></h2>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:"#root",
data:{
html:"<h1> 我是h1 <h1>"
}
})
</script>
显示结果：
v-cloak
v-cloak是一个特殊指令，没有值，也没有实际意义。通常用来配合css来实现解决网速慢的时候vue.js文件还没获取到时展示{{}}的问题，在Vue创建实例并接管容器后，会删掉v-cloak属性。
<style>
/* 有v-cloak时不显示 */
[v-cloak]{
display:none;
}
</style>
<body>
<div id="root">
<!-- v-cloak标签无实际意义，在VUE接管后，会去掉该属性 -->
<h2 v-cloak>{{name}}</h2>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:"#root",
data:{
name:"世界",
}
})
</script>
v-once
v-once所在的节点在初次动态选然后，就视为静态内容，以后数据的改变不会引起v-once所在结构的更新，用于优化性能。
<body>
<div id="root">
<!-- v-once -->
<h2 v-once>{{n}} </h2>
<h2>{{n}} </h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:"#root",
data:{
n:1
}
})
</script>
显示效果：
v-pre
跳过比所在节点的编译过程，在没有使用指令语法，插值语法的节点中，跳过节点编译，可以加快节点编译。
<body>
<div id="root">
<!-- v-pre -->
<h2>{{name}}</h2>
<!-- v-pre跳过了编译，因此显示{{name}} -->
<h2 v-pre>{{name}}</h2>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:"#root",
data:{
name:"世界"
}
})
</script>
显示效果：
总结
常用的内置指令
| v-on | 绑定事件监听，一般可以写成@ |
|---|---|
| v-bind | 绑定解析表达式 |
| v-model | 双向数据绑定 |
| v-if | 如果为true，当前标签才会输出到页面 |
| v-else | 如果为false，当前标签才会输出到页面 |
| v-show | 通过控制display样式来控制显示/隐藏 |
| v-for | 遍历数组/对象 |
| v-text | 更新元素的textContent |
| v-html | 更新元素的innerHTML |
| v-cloak | 配合css防止{{}}在VUE还没有加载的时候出现 |
