Vue页面加载前显示{{代码}}解决办法

开始使用vue写公司项目的时候，在页面加载初始化时，THML会闪现出现{{}}，影响体验。

具体原因：html的加载顺序；

解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕。
　　所以，当html加载的时候，就会把{{}} 当成文本加载出来，当vue初始化完成后，才会把{{}}解析成vue的语法。
　　如果把引入vue.js的script放到head里面，那页面不会出现{{}}，因为在body之前就把vue引入进来了，vue加载完成了。

解决办法：

1、使用 v-cloak指令<div v-cloak>{{msg}}</div>

　　这个指令保持在元素上直到关联实例结束编译

2、使用 v-html指令 <div v-html='msg'></div>

3、使用 v-text指令 <div v-text='msg'></div>

4、使用template标签将需要渲染的 html 包起来

 

才疏学浅，相关文档等仅供自我总结，如有相关问题可留言交流谢谢。