关于v-cloak

v-clock 用法总结

先看以下这段代码

<ul v-for="item in items">

    <li>{{ item.name }}</li>

</ul>

那么，当我们使用vue从后台读取的数据时或者是刷新页面的时候因为响应问题可能会闪现一下{{item.name}} 这个vue.js模板变量，这样给用户带来了不好的体验，这时候v-cloak 就要派上用场了

v-cloak： 防止页面加载时出现 vuejs 的变量名。

方法：在 html 中的加载点加上 v-cloak

<ul v-cloak v-for="item in items">

     <li>{{ item.name }}</li>

</ul>

然后在css中添加

[v-cloak] {

     display: none;

}

解释：包含 v-cloak 属性的 html 标签在页面初始化时会被隐藏。

在 vuejs instance ready 之后，v-cloak 属性会被自动去除，也就是对应的标签会变为可见。

那么问题又来了：在实际项目中，我们一般都是通过 @import 来加载 css 文件

@import "style.css"

在页面 DOM 完全载入后才会进行加载，如果我们将 [v-cloak] 写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。

解决办法：将 [v-cloak] 写在 link 引入的 css 中，或者写一个内联 css 样式。

ok!