vuejs在解析時(shí)出現(xiàn)閃爍的原因及防止閃爍的方法
原因：
在使用vuejs、angularjs開發(fā)時(shí)，經(jīng)常會(huì)遇見在如Chrome這類能夠快速解析的瀏覽器上出現(xiàn)表達(dá)式({{ express }} ),或者是模塊(div)的閃爍。對(duì)于這個(gè)問題由于JavaScript去操作DOM，都會(huì)等待DOM加載完成（DOM ready）。對(duì)于vuejs、angularjs這些會(huì)在DOM ready完會(huì)才回去解析html view Template，所以對(duì)于Chrome這類快速的瀏覽器你會(huì)看見有閃爍的情況出現(xiàn)。而對(duì)于IE7，8這類解析稍慢的瀏覽器大部分情況下是不會(huì)出現(xiàn)這個(gè)問題的。
解決方法：
在vuejs、angularjs中為我們提供了v-cloak、ng-cloak來(lái)實(shí)現(xiàn)防止閃爍的方案，同時(shí)對(duì)于bing文字({{ express }} )我們也可以改為v-bind、ng-bind來(lái)實(shí)現(xiàn)避免。
下面以vuejs為例：
#v-cloak
用法：
這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。
示例：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
<div> 不會(huì)顯示，直到編譯結(jié)束。
原理：
帶有v-clock的的元素設(shè)置為display:none，隱藏掉，在等到vue解析到帶有v-clock的節(jié)點(diǎn)時(shí)候，會(huì)把a(bǔ)ttribute和class同時(shí)remove掉，這樣就可以實(shí)現(xiàn)防止節(jié)點(diǎn)的閃爍。
實(shí)例：
//example1:
<span>{{price}}</span>
//example2:
<span v-bind="price"></span>
//example3:
<span v-cloak>{{price}}</span>
上例子2和例子3實(shí)現(xiàn)的效果是一樣的，而例子1在vuejs解析{{price}}之前，用戶是可以看到"{{price}}"這個(gè)字符串的。而例子2和例子3不會(huì)有這種閃爍的情況。
以上所述是小編給大家介紹的vuejs在解析時(shí)出現(xiàn)閃爍的原因及防止閃爍的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- vue使用v-if v-show頁(yè)面閃爍,div閃現(xiàn)的解決方法
- vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問題（顯示變量）
- vue渲染時(shí)閃爍{{}}的問題及解決方法
- 詳解vue數(shù)據(jù)渲染出現(xiàn)閃爍問題
- vue 插值 v-once,v-text, v-html詳解
- vue學(xué)習(xí)筆記之指令v-text && v-html && v-bind詳解
- 用v-html解決Vue.js渲染中html標(biāo)簽不被解析的問題
- vue.js使用v-pre與v-html輸出HTML操作示例
- 詳解三種方式解決vue中v-html元素中標(biāo)簽樣式
- Vue中的v-cloak使用解讀
- vue防止花括號(hào){{}}閃爍v-text和v-html、v-cloak用法示例
相關(guān)文章
這篇文章主要介紹了vue3實(shí)現(xiàn)v-model原理詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
本篇文章主要介紹了vue語(yǔ)法之拼接字符串的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
使用watch監(jiān)聽路由變化和watch監(jiān)聽對(duì)象的實(shí)例
下面小編就為大家分享一篇使用watch監(jiān)聽路由變化和watch監(jiān)聽對(duì)象的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue解析帶html標(biāo)簽的字符串為dom的實(shí)例
今天小編就為大家分享一篇Vue解析帶html標(biāo)簽的字符串為dom的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
在Vue+Ts+Vite項(xiàng)目中配置別名指向不同的目錄并引用的案例詳解
這篇文章主要介紹了在Vue+Ts+Vite項(xiàng)目中配置別名指向不同的目錄并引用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程
這篇文章主要介紹了Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程,文中通過(guò)示例介紹了vue3拖拽組件vuedraggable的使用demo，需要的朋友可以參考下2023-06-06
如何解決vue項(xiàng)目打包后文件過(guò)大問題
這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過(guò)大問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板的兩種方法
這篇文章主要介紹了VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能，本文通過(guò)兩種方法，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
Vue簡(jiǎn)易版無(wú)限加載組件實(shí)現(xiàn)原理與示例代碼
這篇文章主要給大家介紹了關(guān)于Vue簡(jiǎn)易版無(wú)限加載組件實(shí)現(xiàn)原理與示例代碼的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-07-07
vue中transition組件在項(xiàng)目中運(yùn)用小結(jié)
這篇文章主要介紹了vue中transition組件在項(xiàng)目中運(yùn)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12