vue頁面加載閃爍問題的解決方法

vue頁面加載閃爍問題的解決方法

• 法一：v-cloak指令

  v-cloak指令和[v-cloak]{display:none}一塊兒用時，這個指令能夠隱藏未編譯的Mustache標籤直到實例準備完畢。
        v-cloak 指令能夠像css選擇器同樣綁定一套css樣式而後這套css會一直生效到實例編譯結束。
  
        [v-cloak]{//在css裏添加 
            display:none;
                }
  
        //  <div> 不會顯示，直到編譯結束。v-cloak並不須要添加到每一個渲染數據的標籤上，只要在el掛載的標籤上添加就能夠
        <div class="app" v-cloak>
             {{ message }}
        </div>
  
  
        可是有的時候會不起做用，可能的緣由以下：
        一、v-cloak的display屬性被層級更高的給覆蓋掉了，因此要提升層級
            [v-cloak] {
                    display: none !important;
                    }
  
        二、樣式放在了@import引入的css文件中
        v-cloak的這個樣式放在@import 引入的css文件中不起做用，能夠放在link引入的css文件裏或者內聯樣式中

• 法二： v-text指令

  在vue內部，{{}}會被編譯成textNode的一個v-text指令。因此v-text也能很好的解決問題。