vue.js数据加载完成前显示原代码{{代码}}的解决方法

一、分析原因：

首先了解HTML的加载顺序：

解析html结构 → 加载外部脚本和样式表文件 → 解析并执行脚本代码 → 构造html dom模型 → 加载图片等外部文件 → 页面加载完毕

得出结论：

通过以上分析可知，当html加载的时候，就会把{ {代码}} 当成文本加载出来，当vue初始化完成后，才会把{ {代码}}解析成vue的语法。如果把引入vue.js的script放到head里面，那页面不会出现{ {代码}}，因为在body之前就把vue引入进来了，vue加载完成了。

二、解决方法： 

1、方式一：使用 v-cloak指令

{
    {msg}}

2、方式二：使用 v-html指令

3、方式三：使用 v-text指令

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

HTML的