vue刷新后瞬間閃爍,無(wú)法解析的問(wèn)題
vue刷新瞬間閃爍,無(wú)法解析問(wèn)題
在使用vue的時(shí)候?qū)懥艘欢未a
每次刷新的瞬間會(huì)無(wú)法解析，也只是一閃而已，但是體驗(yàn)非常不好，查閱了資料后發(fā)現(xiàn)是由于vue編譯的時(shí)候是先渲染然后再根據(jù)v-show來(lái)?xiàng)l件隱藏，那樣就會(huì)出現(xiàn)看得見(jiàn)的一瞬間，并且顯示還在編譯之前，這就導(dǎo)致本來(lái)刷新的時(shí)候要隱藏的元素有一瞬間的顯示，而且還是未被編譯的狀態(tài)。
解決這個(gè)問(wèn)題很簡(jiǎn)單
在內(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)文章
Print.js一個(gè)小的javascript庫(kù),可幫助您從網(wǎng)絡(luò)上打印,這篇文章主要給大家介紹了關(guān)于printJS打印問(wèn)題匯總以及解決辦法的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
vue element-ui 綁定@keyup事件無(wú)效的解決方法
遇到vue element-ui 綁定@keyup事件無(wú)效的問(wèn)題怎么解決？下面小編就為大家分享一篇vue element-ui 綁定@keyup事件無(wú)效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue+Element實(shí)現(xiàn)表格單元格編輯
這篇文章主要為大家詳細(xì)介紹了Vue+Element實(shí)現(xiàn)表格單元格編輯，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了如何使用vue3實(shí)現(xiàn)一個(gè)高德地圖天氣小組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
Vue 2.0+Vue-router構(gòu)建一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用（附源碼）
這篇文章主要給大家介紹了基于Vue 2.0+Vue-router構(gòu)建了一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用，文中通過(guò)實(shí)例介紹的非常詳細(xì)，并在文末給出了源碼下載，需要的朋友可以下載學(xué)習(xí)參考，下面來(lái)一起看看吧。2017-03-03
Vue2為何能通過(guò)this訪問(wèn)到data與methods的屬性
這篇文章主要介紹了Vue2為何能通過(guò)this訪問(wèn)到data與methods的屬性，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
vue+elementUI實(shí)現(xiàn)表格的增刪改過(guò)程
文章介紹了一個(gè)使用Vue和Element UI僅在前端實(shí)現(xiàn)增刪改功能的示例,未涉及后端知識(shí),主要分為編輯、新增和刪除方法,并提供了全部代碼2026-03-03
VUE前端實(shí)現(xiàn)token的無(wú)感刷新方式
這篇文章主要介紹了VUE前端實(shí)現(xiàn)token的無(wú)感刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue2.x中keep-alive源碼解析(實(shí)例代碼)
Keep-Alive模式避免頻繁創(chuàng)建、銷毀鏈接，允許多個(gè)請(qǐng)求和響應(yīng)使用同一個(gè)HTTP鏈接，這篇文章主要介紹了vue2.x中keep-alive源碼解析,需要的朋友可以參考下2023-02-02
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，本文講給大家詳細(xì)分析Vue路由Hash模式，文中有相關(guān)的代碼示例供大家參考，感興趣的同學(xué)可以借鑒一下2023-06-06