mqtt js 中乱码_Vue.js 中的 v-cloak 指令——Vue学习之路
今天看一篇文檔中見到了了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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: enfp工具箱怎么用_隐喻:你的工具箱
- 下一篇: router vue 多个路径_多个vu