vue中的v-cloak指令

v-cloak指令保持在元素上直到关联实例结束编译。

和CSS规则如[v-cloak]{display: none}一起用时，这个指令可以隐藏未编译的mustache标签直到实例准备完毕。

 

 

 

 

v-cloak不需要表达式，它会在vue实例结束编译时从绑定的html元素上移除，经常和display:none;配合使用：

<div id="app" v-cloak>
    <div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
    {{message}}
</div>

new Vue({
    el:'#app',
    data:{
        color:'red',
        fontSize:'14',
        message:'文本'
    },
})

注意：

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

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。可以使用 v-cloak 指令来解决这一问题。

<style type="text/css">
    [v-cloak] {
        display: none
    }
</style>

当我们使用webpack和vue-router时，项目中只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不需要v-cloak。

<div id="app" v-cloak><div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>{{message}}</div>
new Vue({el:'#app',data:{color:'red',fontSize:'14',message:'文本'},})