1. 程式人生 > 其它 >Vue頁面載入前顯示{{程式碼}}解決辦法

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 包起來

才疏學淺,相關文件等僅供自我總結,如有相關問題可留言交流謝謝。