第5章 内置指令
回顾一下第2.2节，我们已经介绍过指令（Directive）的概念了，Vue.js的指令是带有特殊前缀“v-”的HTML特性，它绑定一个表达式，并将一些特性应用到DOM上。其实我们已经用到过很多 Vue内置的指令，比如v-html、v-pre，还有上一章的v-bind。本章将继续介绍 Vue.js中更多常用的内置指令。
5.1 基本指令
5.1.1 v-cloak
v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display: none; 配合使用：
<div id="app" v-cloak>
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '这是一段文本'
}
})
</script>
这时虽然已经加了指令v-cloak，但其实并没有起到任何作用，当网速较慢、Vue.js文件还没加载完时，在页面上会显示{{ message }}的字样，直到Vue创建实例、编译模板时，DOM才会被替换，所以这个过程屏幕是有闪动的。只要加一句 CSS就可以解决这个问题了：
[v-cloak] {
display: none;
}
在一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，比如后面进阶篇将介绍 webpack和vue-router时，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。
5.1.2 v-once
v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容，例如：
<div id="app">
<span v-once>{{ message }}</div>
<div v-once>
<span>{{ message }}</span>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '这是一段文本'
}
})
</script>
v-once在业务中也很少使用，当你需要进一步优化性能时，可能会用到。
5.2 条件渲染指令
5.2.1 v-if、v-else-if、v-else
与JavaScript的条件语句if、else、else if类似，Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，例如：
<div id="app">
<p v-if="status === 1">当status为1时显示该行</p>
<p v-else-if="status === 2">当status为2时显示该行</p>
<p v-else>否则显示该行</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
status: 1
}
展开
