DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> vuejs在解析時出現閃爍的原因及防止閃爍的方法
vuejs在解析時出現閃爍的原因及防止閃爍的方法
編輯:關於JavaScript     

原因:

在使用vuejs、angularjs開發時,經常會遇見在如Chrome這類能夠快速解析的浏覽器上出現表達式({{ express }} ),或者是模塊(div)的閃爍。對於這個問題由於JavaScript去操作DOM,都會等待DOM加載完成(DOM ready)。對於vuejs、angularjs這些會在DOM ready完會才回去解析html view Template,所以對於Chrome這類快速的浏覽器你會看見有閃爍的情況出現。而對於IE7,8這類解析稍慢的浏覽器大部分情況下是不會出現這個問題的。

解決方法:

在vuejs、angularjs中為我們提供了v-cloak、ng-cloak來實現防止閃爍的方案,同時對於bing文字({{ express }} )我們也可以改為v-bind、ng-bind來實現避免。

下面以vuejs為例:

#v-cloak

用法:

這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時,這個指令可以隱藏未編譯的 Mustache 標簽直到實例准備完畢。

示例:

[v-cloak] {
display: none;
} 
<div v-cloak>
{{ message }}
</div> 

<div> 不會顯示,直到編譯結束。

原理:

帶有v-clock的的元素設置為display:none,隱藏掉,在等到vue解析到帶有v-clock的節點時候,會把attribute和class同時remove掉,這樣就可以實現防止節點的閃爍。

實例:

//example1:
<span>{{price}}</span>
//example2: 
<span v-bind="price"></span>
//example3: 
<span v-cloak>{{price}}</span> 

上例子2和例子3實現的效果是一樣的,而例子1在vuejs解析{{price}}之前,用戶是可以看到"{{price}}"這個字符串的。而例子2和例子3不會有這種閃爍的情況。

以上所述是小編給大家介紹的vuejs在解析時出現閃爍的原因及防止閃爍的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved