vuejs在解析時出現(xiàn)閃爍的原因及防止閃爍的方法
原因：
在使用vuejs、angularjs開發(fā)時，經(jīng)常會遇見在如Chrome這類能夠快速解析的瀏覽器上出現(xiàn)表達式({{ express }} ),或者是模塊(div)的閃爍。對于這個問題由于JavaScript去操作DOM，都會等待DOM加載完成（DOM ready）。對于vuejs、angularjs這些會在DOM ready完會才回去解析html view Template，所以對于Chrome這類快速的瀏覽器你會看見有閃爍的情況出現(xiàn)。而對于IE7，8這類解析稍慢的瀏覽器大部分情況下是不會出現(xiàn)這個問題的。
解決方法：
在vuejs、angularjs中為我們提供了v-cloak、ng-cloak來實現(xiàn)防止閃爍的方案，同時對于bing文字({{ express }} )我們也可以改為v-bind、ng-bind來實現(xiàn)避免。
下面以vuejs為例：
#v-cloak
用法：
這個指令保持在元素上直到關聯(lián)實例結束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。
示例：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
<div> 不會顯示，直到編譯結束。
原理：
帶有v-clock的的元素設置為display:none，隱藏掉，在等到vue解析到帶有v-clock的節(jié)點時候，會把attribute和class同時remove掉，這樣就可以實現(xiàn)防止節(jié)點的閃爍。
實例：
//example1:
<span>{{price}}</span>
//example2:
<span v-bind="price"></span>
//example3:
<span v-cloak>{{price}}</span>
上例子2和例子3實現(xiàn)的效果是一樣的，而例子1在vuejs解析{{price}}之前，用戶是可以看到"{{price}}"這個字符串的。而例子2和例子3不會有這種閃爍的情況。
以上所述是小編給大家介紹的vuejs在解析時出現(xiàn)閃爍的原因及防止閃爍的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- vue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法
- vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問題（顯示變量）
- vue渲染時閃爍{{}}的問題及解決方法
- 詳解vue數(shù)據(jù)渲染出現(xiàn)閃爍問題
- vue 插值 v-once,v-text, v-html詳解
- vue學習筆記之指令v-text && v-html && v-bind詳解
- 用v-html解決Vue.js渲染中html標簽不被解析的問題
- vue.js使用v-pre與v-html輸出HTML操作示例
- 詳解三種方式解決vue中v-html元素中標簽樣式
- Vue中的v-cloak使用解讀
- vue防止花括號{{}}閃爍v-text和v-html、v-cloak用法示例
相關文章
這篇文章主要介紹了element-ui?table表格底部合計自定義配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了webpack搭建vue 項目的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue實現(xiàn)自定義字段導出EXCEL的示例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
Lottie 是一個流行的動畫庫,它允許我們使用 JSON 文件來渲染高質量的動畫,本文將介紹一下如何在Vue3中集成 Lottie 動畫實現(xiàn)一個加載動畫效果,需要的可以了解下2025-02-02
vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案
這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
淺析Vue中Virtual?DOM和Diff原理及實現(xiàn)
這篇文章主要為大家詳細介紹了Vue中Virtual?DOM和Diff原理及實現(xiàn)的相關知識，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-03-03
Vue發(fā)送Formdata數(shù)據(jù)及NodeJS接收方式
這篇文章主要介紹了Vue發(fā)送Formdata數(shù)據(jù)及NodeJS接收方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue組件通信的方式，這是在面試中一個非常高頻的問題。其實Vue組件的通信方式除了props和?$emit還有很多，本文將對vue組件通信方式進行一下總結，感興趣的可以學習一下2021-12-12
這篇文章主要介紹了vue-cli項目中遇到的eslint的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇vue 解決移動端彈出鍵盤導致頁面fixed布局錯亂的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11