vue頁面加載前顯示{{代碼}}的原因及解決辦法

進入正題，簡單說說自己對html中出現{{}}的原因及解決辦法：

 

 

這樣寫的話，就會出現{{}}一閃的情況；

原因：html的加載順序；

解析html結構 -> 加載外部腳本和樣式表文件 -> 解析並執行腳本代碼 -> 構造html dom模型 -> 加載圖片等外部文件 -> 頁面加載完畢。
　　所以，當html加載的時候，就會把{{}} 當成文本加載出來，當vue初始化完成后，才會把{{}}解析成vue的語法。
　　如果把引入vue.js的script放到head里面，那頁面不會出現{{}}，因為在body之前就把vue引入進來了，vue加載完成了。
解決辦法：

1、使用 v-cloak指令<div v-cloak>{{msg}}</div>
　　這個指令保持在元素上知道關聯實例結束編譯 https://cn.vuejs.org/v2/api/#v-cloak；
2、使用 v-html指令 <div v-html='msg'></div>
3、使用 v-text指令 <div v-text='msg'></div>
4、使用template標簽將需要渲染的 html 包起來

TML 元素 是一種用於保存客戶端內容的機制，該內容在頁面加載時不被渲染，但可以在運行時使用JavaScript進行實例化。

Ps：個人推薦用方法4，簡單快捷