Vue 解决因网络延时 页面中的{{XXX}}模板直接展示在用户面前,配合v-cloak指令
v-cloak指令:
1、本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉 v-cloak属性
2、使用 CSS配合v-cloak可以解决网速慢时,页面展示出{{XXX}}模板的问题
案例:
1、可能会出问题的写法:
html:
<h2 > {{name}} </h2>
调用网络上的Vue.js,网速慢时,会出现如下效果:
2、正确写法:
html:
<h2 v-clock> {{name}} </h2>
css:
[v-cloak]{
display:none
}
加入v-cloak 配合 css 后,网速慢会先不显示,等加载了vue后,直接显示渲染后的内容
学习链接:https://www.bilibili.com/video/BV1Zy4y1K7SH?p=42&vd_source=60a28e8364654bee938864b1d19905ec
42