Vue中v-cloak指令

v-cloak指令的作用

可以设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML 元素上移除。

应用场景

网页加载vue,js时网络较慢，vue来不急渲染，页面就会显示vue还没处理好的源代码。
例如：

解决方法：

css部分:

[v-cloak] {
            display: none;
        }

html部分:

<div id='app' v-cloak>{{content}}</div>

总结：在简单的项目中，使用v-cloak指令是解决屏幕闪动的好方法，但在大型、工程化的项目中（webpack、vue-ruoter）只有一个空的div元素，元素中的内容是通过路由挂载来实现的，这时就不需要用到v-cloak指令

注：以下情况v-cloak无效

在实际项目中，我们通常使用@import来加载css文件，而@import是在页面DOM完全载入后才会进行加载。
解决办法：将v-cloak写在link引入的css中，或者写一个内联css样式