vue 中v-cloak指令

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiongdaandxiaomi/article/details/89139436

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

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

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