Vue.j--内置指令（v-cloak、v-once、v-show）

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: 'hello world'
        }
    });
</script>

这时虽然已经加了指令v-cloak，但其实并没有起到任何作用，当网速较慢、Vue.js文件还没有加载完成时，在页面上会显示{{message}}的字样，直到Vue创建实例、编译模板时，DOM才会被替换，所以这个过程屏幕是由闪动的。只要加一加CSS就可以解决这个问题：

[v-cloak] {
	display: none;
}

**在一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，**对于简单的项目很实用，但是在具有工程化的项目里不再使用。

v-once：

v-once也是一个不需要表达式的指令，作用是定义它的元素或组件只能渲染一次，包括元素或组件的所有子节点。首次渲染后不再随数据的变化重新渲染将被视为静态内容，例如：

<div id="myapp">
    <span v-once>{{str}}</span>
    <div v-once>
        <span>{{str}}</span>
    </div>
</div>
<script>
    var myApp = new Vue({
        el: '#myapp',
        data: {
            str: '测试文本'
        }
    });
</script>

v-show:

v-show的用法与v-if基本一致，不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时，元素会隐藏，查看DOM结果会看到元素上加载了内联样式display:none;

<div id="myApp">
    <p v-show="status === 1">当status为1时显示该行</p>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            status: 2
        }
    });
</script>

v-if与v-show的区别

v-if与v-show具有类似的功能，不过v-if才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false，则一开始元组/组件并不会渲染，只有当条件第一次变为真时才开始编译。

而v-show只是简单的将CSS切换，无论条件真与否，都会被编译相比之下，v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show适用于频繁切换的条件。