v-clock解决页面加载的闪烁

发表于

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none
一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  • 在html挂载点加上 v-cloak，就可以解决页面加载时的闪烁(编译完成时再进行页面渲染)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div id="app" v-cloak>
        {{msg}}
    </div>

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

    v-cloak失效的问题：

如果把[v-cloak]样式写在@import加载的文件里很有可能失效，光是加载这个文件就需要时间，解决方法最好是 写成内联style或者link引入。