vue在html中出現{{}}緣由及解決辦法

在剛開始接觸vue的時候，咱們都是直接用<script>引入vue.js使用。沒有藉助vue-cli腳手架來構建項目。

對於一個初學者來講，跟着文檔慢慢搬磚，使用vue進行數據綁定。

記得在最開始使用vue寫公司項目的時候，在頁面初始化化是，THML會閃現出{{}}，當時測試問我有沒有解決辦法，我義正詞嚴的說這是vue的特性，沒有辦法解決這個問！想一想當時也是傻，其實官方文檔又給出解決辦法，只是當時學習的時候，蜻蜓點水，沒有仔細的閱讀文檔和demo例子。

後面同事說有解決辦法，能夠用v-text，v-html  來綁定事件，確實能夠，我也這麼作了，可是就沒有去想一想爲何。再後來在面試過程當中，被問到了這個問題，由於本身確實遇到過，並且還解決了，就很自信的說出來解決辦法。覺得本身很屌的樣子，因此面試的結果可想而知。

其實做爲一個程序猿，做爲一個合格的程序猿，要學會思考問題，多想一想爲何，不要覺得知道怎麼解決問題就ok，還要知道爲何才行，這樣才能真正的提高本身。

進入正題，簡單說說本身對html中出現{{}}的緣由及解決辦法：

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

緣由：html的加載順序；

　　解析html結構 -> 加載外部腳本和樣式表文件 -> 解析並執行腳本代碼 -> 構造html dom模型 -> 加載圖片等外部文件 -> 頁面加載完畢。

　　因此，當html加載的時候，就會把{{}} 當成文本加載出來，當vue初始化完成後，纔會把{{}}解析成vue的語法。

　　若是把引入vue.js的script放到head裏面，那頁面不會出現{{}}，由於在body以前就把vue引入進來了，vue加載完成了。

解決辦法：

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

　　這個指令保持在元素上知道關聯實例結束編譯 https://cn.vuejs.org/v2/api/#v-cloak；

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

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

四、使用template標籤將須要渲染的 html 包起來

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