關於v-clock

v-clock 用法總結

先看如下這段代碼

<ul v-for="item in items">

    <li>{{ item.name }}</li>

</ul>

那麼，當咱們使用vue從後臺讀取的數據時或者是刷新頁面的時候由於響應問題可能會閃現一下{{item.name}} 這個vue.js模板變量，這樣給用戶帶來了很差的體驗，這時候v-cloak 就要派上用場了

v-cloak： 防止頁面加載時出現 vuejs 的變量名。

方法：在 html 中的加載點加上 v-cloak

<ul v-cloak v-for="item in items">

     <li>{{ item.name }}</li>

</ul>

而後在css中添加

[v-cloak] {

     display: none;

}

解釋：包含 v-cloak 屬性的 html 標籤在頁面初始化時會被隱藏。

在 vuejs instance ready 以後，v-cloak 屬性會被自動去除，也就是對應的標籤會變爲可見。

那麼問題又來了：在實際項目中，咱們通常都是經過 @import 來加載 css 文件

@import "style.css"

在頁面 DOM 徹底載入後纔會進行加載，若是咱們將 [v-cloak] 寫在 @import 加載的 css 文件中，就會致使頁面仍舊閃爍。

解決辦法：將 [v-cloak] 寫在 link 引入的 css 中，或者寫一個內聯 css 樣式。

ok!