当我们的网络受阻时,或者页面加载完毕而没有初始化得到 Vue 实例时,DOM 中的 {{}}
则会展示出来,此时就会出现页面闪烁的问题。
为了防止此现象,我们可以使用 CSS 配合 Vue v-cloak 指令实现获取 Vue 实例前的隐藏。和 CSS 规则如 [v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
以上代码,当 <div>
未编译结束时,<div>
标签不会显示,只有 <div>
编译完成时,<div>
标签才会被正常显示出来。
<!DOCTYPE html>
<html>
<head>
<title>Vue v-cloak指令</title>
<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app">
<p v-cloak>{{ msg }}</p>
<p>嗨客网(www.haicoder.net)</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el :'#app',
data:{
msg:'Hello HaiCoder'
}
})
</script>
</html>
我们将该代码放在服务器上,并且将浏览器的网络环境设置为离线状态,此时打开此页面,发现浏览器没有任何的输出,浏览器运行效果,如下图所示:
我们再次将浏览器的网络环境设置为在线状态,此时打开此页面,发现浏览器输出了 Hello HaiCoder
,浏览器运行效果,如下图所示:
Vue v-cloak 指令是为了解决在弱网络环境下, Mustache 标签的闪烁问题。
Vue v-cloak 指令可以和 CSS 配合实现隐藏未编译的 Mustache 标签直到实例准备完毕,具体写法为 [v-cloak] { display: none }
。