第2章 Vue內(nèi)置指令

2.1　基本指令

2.1.1　v-text與v-html

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

index.html文件代碼如下：

在瀏覽器中運(yùn)行的效果如圖2.1所示。

2.1.2　v-bind

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

index.html文件代碼如下：

在瀏覽器中運(yùn)行的效果如圖2.2所示。

上面的代碼示例中，對<a>標(biāo)簽的title屬性使用v-bind進(jìn)行綁定，title的值為Vue實例中的titleText變量，當(dāng)鼠標(biāo)指針懸停在<a>標(biāo)簽渲染的元素上時，會顯示動態(tài)的titleText屬性的值。

2.1.3　v-once

v-once指令只渲染元素和組件一次，隨后的渲染，如果使用了此指令的元素、組件及其所有子節(jié)點，則都會當(dāng)作靜態(tài)內(nèi)容并跳過。這個特性可以用于優(yōu)化更新性能。

index.html文件代碼如下：

在瀏覽器中運(yùn)行的效果如圖2.3所示。

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

2.1.4　v-cloak

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

index.html文件代碼如下：

當(dāng)網(wǎng)絡(luò)較慢時，在瀏覽器中打開頁面，此時會在頁面中出現(xiàn)Vue源碼，直到Vue.js加載完成并編譯之后，才會顯示正常的數(shù)據(jù)內(nèi)容，如圖2.4所示。

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

index.html文件代碼如下：

2.1.5　v-pre

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

在瀏覽器中運(yùn)行的效果如圖2.5所示。