vue刷新后瞬間閃爍,無法解析的問題
vue刷新瞬間閃爍,無法解析問題
在使用vue的時(shí)候?qū)懥艘欢未a
每次刷新的瞬間會(huì)無法解析，也只是一閃而已，但是體驗(yàn)非常不好，查閱了資料后發(fā)現(xiàn)是由于vue編譯的時(shí)候是先渲染然后再根據(jù)v-show來?xiàng)l件隱藏，那樣就會(huì)出現(xiàn)看得見的一瞬間，并且顯示還在編譯之前，這就導(dǎo)致本來刷新的時(shí)候要隱藏的元素有一瞬間的顯示，而且還是未被編譯的狀態(tài)。
解決這個(gè)問題很簡單
在內(nèi)容標(biāo)簽上添加v-cloak屬性，并配合css中[c-cload]{display: none;}使用即可。
這樣就解決啦！當(dāng)然其它出現(xiàn)閃爍未編譯的情況處理方法類似。
官方給出的該屬性的解釋是：
這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。
和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue組件開發(fā)之LeanCloud帶圖形校驗(yàn)碼的短信發(fā)送功能
Vue是目前使用較廣泛的三大前端框架之一，其數(shù)據(jù)驅(qū)動(dòng)及組件化的特性使得前端開發(fā)更為快捷便利。本文在LeanCloud 短信轟炸與圖形校驗(yàn)碼官方文檔 基礎(chǔ)上，從封裝需要出發(fā)開發(fā)一個(gè)簡單的短信圖形驗(yàn)證Vue組件,具體內(nèi)容詳情大家參考下本文2017-11-11
vue實(shí)現(xiàn)在v-html的html字符串中綁定事件
今天小編就為大家分享一篇vue實(shí)現(xiàn)在v-html的html字符串中綁定事件，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue 組件基礎(chǔ)知識的相關(guān)資料，幫助大家更好的理解和使用vue的組件，感興趣的朋友可以了解下2021-01-01
Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))
本文主要介紹了Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue跳轉(zhuǎn)頁面的幾種常用方法實(shí)例總結(jié)
Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界面,在Vue中,頁面跳轉(zhuǎn)通常使用路由(Router)來實(shí)現(xiàn),除此之外還有很多方法,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁面的幾種常用方法,需要的朋友可以參考下2024-05-05
el-table?動(dòng)態(tài)合并不定項(xiàng)多級表頭的方法
本文主要介紹了el-table?動(dòng)態(tài)合并不定項(xiàng)多級表頭的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要給大家介紹了關(guān)于如何利用vue實(shí)現(xiàn)波譜擬合的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了vue中 v-for循環(huán)的用法詳解,本文通過實(shí)例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
本文主要介紹了element表單校驗(yàn)提示定位到元素位置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue中監(jiān)視屬性和計(jì)算屬性區(qū)別解析
這篇文章主要介紹了Vue中監(jiān)視屬性和計(jì)算屬性區(qū)別,通過本文學(xué)習(xí)大家知道computed與watch配置項(xiàng)問題，computed能完成的功能，watch都可以完成，本文通過實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10