第2章 Vue內置指令

2.1　基本指令

2.1.1　v-text與v-html

v-text與v-html指令都可以用來更新頁面元素的內容，但是二者也有不同點，v-text輸出的數據是以字符串形式顯示的，而v-html不僅可以輸出字符串形式的數據，而且可以渲染字符串中的HTML標簽。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.1所示。

2.1.2　v-bind

v-bind可以用來綁定標簽的屬性，例如：<img>標簽的srcs屬性，<a>標簽的title屬性等。使用v-bind綁定的屬性值應該為一個JavaScript的變量，或者是JavaScript表達式。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.2所示。

上面的代碼示例中，對<a>標簽的title屬性使用v-bind進行綁定，title的值為Vue實例中的titleText變量，當鼠標指針懸停在<a>標簽渲染的元素上時，會顯示動態的titleText屬性的值。

2.1.3　v-once

v-once指令只渲染元素和組件一次，隨后的渲染，如果使用了此指令的元素、組件及其所有子節點，則都會當作靜態內容并跳過。這個特性可以用于優化更新性能。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.3所示。

運行上面的示例代碼，當打開瀏覽器頁面時，DOM元素中的{{message}}渲染了message屬性的值，當使用v-model綁定的輸入框再次改變message屬性的值時，添加了v-once指令的標簽則沒有發生任何變化。

2.1.4　v-cloak

v-cloak指令將會保持在DOM元素上，直到關聯實例結束編譯后自動移除。v-cloak指令的使用場景非常有限，常用于解決網絡較慢時數據的加載問題。用戶在訪問Vue.js實現的網站時，如果網絡延遲，網頁還在加載Vue.js，便會導致Vue來不及渲染，這時頁面就會顯示出Vue源代碼，我們就可以使用v-cloak指令來解決這一問題。

index.html文件代碼如下：

當網絡較慢時，在瀏覽器中打開頁面，此時會在頁面中出現Vue源碼，直到Vue.js加載完成并編譯之后，才會顯示正常的數據內容，如圖2.4所示。

為了解決上面代碼運行的問題，我們可以為DOM元素添加v-cloak指令，并使用屬性選擇器為指定的DOM元素設置隱藏樣式。v-cloak指令可以保持在DOM元素上，直到編譯結束才自動移除，這樣就可以在Vue完成編譯之前使指定的DOM元素處于隱藏狀態，等編譯完成后，CSS樣式就對該DOM元素無效了。

index.html文件代碼如下：

2.1.5　v-pre

v-pre指令會跳過這個元素和它的子元素的編譯過程，所以可以用來顯示原始Mustache標簽。跳過大量沒有指令的節點會加快編譯，代碼如下：

在瀏覽器中運行的效果如圖2.5所示。