Vue.js 内置指令

        Vue.js 的指令是带有特殊前缀 “v-“ 的 HTML 特性。它绑定一个表达式，并将一些特性应用到 DOM 上。

一、基本指令

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 是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，比如在项目的 HTML 机构只有一个空的 div 元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要 v-cloak 。

1.2 v-once

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

<div id="app">
    <span v-once>{{ message }}</span>
    <div v-once>
        <span>{{ message }}</span>
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: '这是一段文本'
        }
    })
</script>

        v-once 在业务中很少使用，但当需要进一步优化性能时，可能会用到。

二、条件渲染指令

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
        }
    })
</script>

        v-else-if 要紧跟 v-if，v-else 要紧跟 v-else-if 或 v-if ，表达式的值为真时，当前元素/组件及所有子节点将被渲染，为假时被移除。如果一次判断的是多个元素，可以在 Vue.js 内置的<template>元素上使用条件指令，最终渲染的结果不会包含该元素，例如：

<div id="app">
    <template v-if="status ==== 1">
        <p>这是一段文本</p>
        <p>这是一段文本</p>
        <p>这是一段文本</p>
    </template>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            status: 1
        }
    })
</script>