使用v-cloak
指令,v-cloak
不需要表达式,它会在Vue
实例结束编译时从绑定的HTML元素上移除,经常和CSS的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
是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用。