Vue v-cloak指令

Vue v-cloak教程

当我们的网络受阻时,或者页面加载完毕而没有初始化得到 Vue 实例时,DOM 中的 {{}} 则会展示出来,此时就会出现页面闪烁的问题。

为了防止此现象,我们可以使用 CSS 配合 Vue v-cloak 指令实现获取 Vue 实例前的隐藏。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

Vue v-cloak详解

语法

[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>

说明

以上代码,当 <div> 未编译结束时,<div> 标签不会显示,只有 <div> 编译完成时,<div> 标签才会被正常显示出来。

案例

Vue v-cloak指令

<!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>

我们将该代码放在服务器上,并且将浏览器的网络环境设置为离线状态,此时打开此页面,发现浏览器没有任何的输出,浏览器运行效果,如下图所示:

05 vue vcloak.png

我们再次将浏览器的网络环境设置为在线状态,此时打开此页面,发现浏览器输出了 Hello HaiCoder,浏览器运行效果,如下图所示:

06 vue vcloak.png

Vue v-cloak指令总结

Vue v-cloak 指令是为了解决在弱网络环境下, Mustache 标签的闪烁问题。

Vue v-cloak 指令可以和 CSS 配合实现隐藏未编译的 Mustache 标签直到实例准备完毕,具体写法为 [v-cloak] { display: none }