2.5　v-cloak指令

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

下面我们演示v-cloak指令在Vue中的使用，示例代码如下：

<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来解决这个问题。代码如下：

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

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