Vue基本指令v-cloak的使用

v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和 { 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。

参考书籍：Vue.js实战
提取码：m9nb
或者扫描二维码提取：