v cloak遇到的問題及解決方法

2021-08-28 23:50:38 字數 1049 閱讀 4813

在使用vue時,html 繫結 vue例項,在頁面載入時會閃爍類似}這樣的資訊。可能會導致使用者體驗不好。

v-cloak就能解決這個問題。

(1)用法

這個指令保持在元素上直到關聯例項結束編譯。和 css 規則如[v-cloak]一起用時,這個指令可以隱藏未編譯的 mustache 標籤直到例項準備完畢。

官方api

我們可以在 css 中加上:

[v-cloak]

然後在 html 中的載入點加上v-cloak,就可以解決這一問題:

v-cloak>

}

(2)vue1.x 與 vue2 中 v-cloak 的不同

vue1 中,允許將 vue 例項掛載在 body 上,而 vue2 是不允許的,想對整個頁面例項化,需要另外用乙個 div 來容納整個頁面內容,對其進行例項化。

這樣在使用v-cloak時,同樣需要用到這種方法。

(3)為什麼我用的 v-cloak 無效?

在實際專案中,我們常通過@import來載入 css 檔案

@import"style.css?1.1.11"

@import"index.css?1.1.11"

@import是在頁面 dom 完全載入後才會進行載入,如果我們將[v-cloak]寫在@import載入的 css 檔案中,就會導致頁面仍舊閃爍。

為了避免這種情況,我們可以將[v-cloak]寫在 link 引入的 css 中,或者寫乙個內聯 css 樣式,這樣就得到了解決。

安裝VueThink中遇到的問題及解決方法

1.配置好host後啟動後台管理,會出現資料庫連線錯誤 解決 需要將內建的php install.sql進行資料的匯入,修改config database.php使用者名稱和密碼即可 2.啟動vue時遇到error cannot find module semver 解決 需要先進入frontend...

關於解除安裝Hyper v 時遇到的問題及解決方案

曾經使用過vs2015編寫過幾個簡單的uwp程式,由於使用的時候在虛擬機器上進行的除錯,所以沒有注意啟動了hyper v的虛擬化。最近想要使用安卓模擬器,安裝過程中提示hyper v未關閉,於是出現了這個問題。安卓虛擬機器無法使用,強行啟動造成系統崩潰。通過檢視服務發現hyper v相關的兩個服務會...

Python(Django)遇到的問題及解決方法

問題一 因為已經有程式占用了django的預設埠了,所以只要這麼啟動專案,81是使用的埠,然後訪問即可 解決 問題二 typeerror not enough arguments for format string 出現這類問題,主要是字串中包含了 號,python 認為它是轉移符,而實際我們需要的...