1.v-once:
某些情況下我們不希望界面的內容隨意地跟隨改變,這時我們可以使用v-once來達到此目的。
(1)該指令后面不需要跟任何的表達式;
(2)該指令表示元素和組件只渲染一次不會隨着數據的改變而發生變化。
e.g.
打開瀏覽器的控制台,在控制台中輸入:app.message = 'hahaha';
第一個發生變化,第二個無變化。
2.v-html:
在某些情況下我們從服務器請求到的數據就是一個HTML代碼,如果我們直接使用{{}}來輸出,會將HTML代碼直接輸出。但是我們希望的是按照HTML的格式進行解析,並將內容顯示出來。
可以使用v-html指令,該指令后面往往帶上一個string類型,它會將string類型的HTML解析出來並且進行渲染。
e.g.
結果:
3.v-text:
v-text的作用與Mustache( {{}} )比較類似,都是用於將數據顯示在頁面中,在通常情況下v-text接收一個string類型。但是如果同時存在v-text和Mustache,v-text的內容會覆蓋Mustache的內容。
e.g.
結果:
4.v-pre:
這個指令用於跳過這個元素和它子元素的編譯過程,用於顯示原本的Mustache語法。
e.g.
第一個h2元素中的內容會被編譯解析出來對應的內容,第二個h2元素會直接顯示{{message}}。
結果:
5.v-cloak:
在某些情況下瀏覽器可能會直接顯示出來未編譯的Mustache標簽,v-cloak可用於防閃爍。
e.g.
由於延遲函數的存在,在一秒到達之前,vue實例還未初始化,因此此時網頁上顯示的是{{message}},當到達一秒之后,{{mesage}}會馬上變成'你好啊',此變化的瞬間產生了閃爍。
為防止閃爍,在變量未編譯的時候,不予顯示,而當編譯好了之后,才顯示出來。
在vue解析之前,div中有一個屬性v-cloak,配合css的display可以使元素不顯示;
在vue解析之后,div沒有一個屬性v-cloak。
6.v-for:
遍歷數組。
e.g.
結果:
博客日常記錄我的學習內容,如果有錯誤歡迎指出。