vue加载显示{{xxx}}的解决方法

一般vue.js文件放在最后，由于浏览器是从头到尾的渲染机制，在没有读取到识别符对应的js控制语句就会直接显示{{xxx}}

这个问题可以用vue的一个特点解决，就是Vue会自动屏蔽掉自定义属性

我们可以为对应的dom节点添加一个自定义属性，比如 dom-hidden（官方：v-cloak）

然后css定义 ：    [dom-hidden]{ display:none;}

这个属性在vue加载完成后被忽略，于是就解决了加载慢的问题。

v-cloak

v-cloak：保持和元素实例的关联，直到结束编译后自动消失。

v-cloak指令和CSS 规则一起用的时候，能够解决差值表达式闪烁的问题（即：可以隐藏未编译的标签直到实例准备完毕）。

解决办法是：通过v-cloak隐藏{{name}}这个内容，当加载完毕后，再显示出来。

• 用法：

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

• 示例：

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

不会显示，直到编译结束。