開始使用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 包起來
才疏學淺,相關文檔等僅供自我總結,如有相關問題可留言交流謝謝。