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在业务中也很少使用，当你需要进一步优化性能时，可能会用到。