v cloak解決Vue雙大括號閃爍問題

2022-04-07 01:25:05 字數 1038 閱讀 4319

相信不少人和我一樣,初次檢視乙個技術的文件的時候,知識吸收的很慢,因為對這個技術的不熟悉導致不清楚各種操作的應用場景,當我意識到這件事之後,我決定換種學習思路,即以實戰為主,卡殼就查文件,會對這個技術理解得更加深刻

最近在練習vue的使用的時候發現用雙大括號(即「mustache」語法)的時候,每次重新整理頁面都是先顯示雙大括號的語法內容(即 } ),再顯示實際內容 ( 即 12345678977 ),這就導致了類似閃爍的現象,不僅很不美觀,更是逼死強迫症...

因為它會出現vue特有的雙大括號,所以可以確定是vue的問題,所以現在就去查文件

翻看vue官方api文件的時候,先ctrl+f網頁搜尋"雙大括號"

發現搜尋不到,再搜尋"mustache"

nice,有結果,乙個乙個看,發現有乙個挺像會導致閃爍的情況(要是實在看不懂的話,搜尋結果也就三個,乙個乙個試都可以)

根據文件,先在雙大括號的位置加上指令

然後再css裡面加上

再來看效果

Vue常見指令 v cloak

將資料編寫完成,通過插值表示式輸出到檢視,在重新整理的時候出現很短的源 如圖 指令v cloak的作用就是用來解決瀏覽器在載入頁面時因存在事件差而產生的閃動問題,她的原理是先隱藏檔案掛載位置,處理渲染好後在顯示最終結果。這個指令需要與css規則一起使用才可以 如果是在真實專案中,可以將v clock...

Vue 中的 v cloak 解讀

用法 這個指令保持在元素上直到關聯例項結束編譯。和 css 規則如 v cloak 一起用時,這個指令可以隱藏未編譯的 mustache 標籤直到例項準備完畢。官方api div html 繫結 vue例項,在頁面載入時會閃爍 然後才會出現載入完成字樣,為了效果更明顯,我們可以延後載入 vue 例項...

Vue 中的 v cloak 解讀

用法 這個指令保持在元素上直到關聯例項結束編譯。和 css 規則如 v cloak 一起用時,這個指令可以隱藏未編譯的 mustache 標籤直到例項準備完畢。官方api html 繫結 vue例項,在頁面載入時會閃爍 然後才會出現載入完成字樣,為了效果更明顯,我們可以延後載入 vue 例項 set...