在剛開始接觸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載入完成了。 解決辦法： 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 包起來 　　HTML <template> 元素 是一種用於儲存客戶端內容的機制，該內容在頁面載入時不被渲染，但可以在執行時使用JavaScript進行例項化。