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

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

然后發(fā)現(xiàn)，英語不好的我，被難住了。。。不認(rèn)識這個單詞。。。于是我習(xí)慣的打開百度查一查。

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

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

v.遮蓋; 掩蓋;

再看下對v-cloak的介紹。

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

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

未使用v-cloak的一般代碼

veu接口調(diào)用 {{context}}

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

當(dāng)然，如何解決這個問題呢？有兩種解決辦法：

解決方案1：將cdn引入的代碼移動到head標(biāo)簽內(nèi)

如下方代碼：

veu接口調(diào)用 {{context}}

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

如下方代碼：

veu接口調(diào)用 {{context}}

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。