今天看一篇文檔中見到了了v-cloak指令，感覺很新鮮。由于使用的頻率不高。但還是想了解下是做什么的。

眾所周知，程序的指令一般都是語義化的，然后，我企圖從cloak這個單詞能找到點線索。

然后發現，英語不好的我，被難住了。。。不認識這個單詞。。。于是我習慣的打開百度查一查。

cloak英[kl??k]，美[klo?k]

n.(尤指舊時的) 披風，斗篷; 遮蓋物;

v.遮蓋; 掩蓋;

再看下對v-cloak的介紹。

當網絡較慢，網頁還在加載 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼。我們可以使用 v-cloak 指令來解決這一問題。

然而，具體怎么實現呢，可是沒見demo，還是不太明白意思。我就試著寫了下，看了下效果。

未使用v-cloak的一般代碼

veu接口調用 {{context}}

如上面的代碼構成的html文件，我們看到的頁面會在 {{context}}和天氣之間閃爍一下，其主要原因就是使用cdn引入的vue.js文件的加載速度沒有 {{context}}這個內容先渲染進頁面。所以才導致了內容跳躍的問題。

當然，如何解決這個問題呢？有兩種解決辦法：

解決方案1：將cdn引入的代碼移動到head標簽內

如下方代碼：

veu接口調用 {{context}}

解決方案2：使用v-cloak指令。

如下方代碼：

veu接口調用 {{context}}

由于加載的效果間隔時間較短，沒辦法截圖，各位讀者可以直接復制上面的代碼進行試驗。

另外，我還注意到了傳統的html代碼不需要專門寫編碼格式為utf-8即可。但是引入了vue.js之后，不寫這一行會出現亂碼問題，大家可以注意一下！

總結

以上是生活随笔為你收集整理的mqtt js 中乱码_Vue.js 中的 v-cloak 指令——Vue学习之路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。