欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vuejs在解析時(shí)出現(xiàn)閃爍的原因及防止閃爍的方法

 更新時(shí)間：2016年09月19日 13:37:06   作者：slly  
這篇文章主要介紹了vuejs在解析時(shí)出現(xiàn)閃爍的原因及防止閃爍的方法,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧

原因：

在使用vuejs、angularjs開(kāi)發(fā)時(shí)，經(jīng)常會(huì)遇見(jiàn)在如Chrome這類(lèi)能夠快速解析的瀏覽器上出現(xiàn)表達(dá)式({{ express }} ),或者是模塊(div)的閃爍。對(duì)于這個(gè)問(wèn)題由于JavaScript去操作DOM，都會(huì)等待DOM加載完成（DOM ready）。對(duì)于vuejs、angularjs這些會(huì)在DOM ready完會(huì)才回去解析html view Template，所以對(duì)于Chrome這類(lèi)快速的瀏覽器你會(huì)看見(jiàn)有閃爍的情況出現(xiàn)。而對(duì)于IE7，8這類(lèi)解析稍慢的瀏覽器大部分情況下是不會(huì)出現(xiàn)這個(gè)問(wèn)題的。

解決方法：

在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}}之前，用戶(hù)是可以看到"{{price}}"這個(gè)字符串的。而例子2和例子3不會(huì)有這種閃爍的情況。

以上所述是小編給大家介紹的vuejs在解析時(shí)出現(xiàn)閃爍的原因及防止閃爍的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論