vue指令之v-cloak

v-cloak指令的作用是vue实例渲染后关联结束；

双大括号插值语法在遇到网络延迟的时候会显示编译之前的文本。

    <div id="app">
        {{a}}
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                a:'123456789'
            }
        })
    </script>

此时我们将网速调到最慢，此时我们可以看到

我们可以使用v-cloak结合CSS解决双大括号渲染的难题

<style>
//有v-cloak准则器的元素进行隐藏
        [v-clock]{
            display: none;
        }
    </style>

 <div id="app" v-clock>  {{a}}  </div> 

[v-cloak]css选择器选择的是html结构中有v-cloak的属性，有这个属性的元素设置display为none，又由于v-cloak这个属性在vue的实例加载完之后关联结束，所以就需要了这个元素的隐藏状态，元素就会显示，这样造成的结果就是要么空白，要么显示编译后的文本。