Vue-基本指令(v-once, v-pre, v-html, v-cloak, v-for, v-text)的使用

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.

 

 結果：