1.3　Vue模板語法

Vue.js使用了基于HTML的模板語法，允許開發(fā)者聲明式地將DOM綁定至底層Vue實(shí)例的數(shù)據(jù)上。所有Vue.js的模板都是合法的HTML，所以能被遵循規(guī)范的瀏覽器和HTML解析器解析。

在底層的實(shí)現(xiàn)上，Vue將模板編譯成虛擬DOM渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng)，Vue能夠智能地計算出最少需要重新渲染多少組件，并把DOM操作次數(shù)減到最少。

1.3.1　插值

插值的語法有以下3種：

1．文本

數(shù)據(jù)綁定最常見的形式就是使用Mustache語法（雙大括號）的文本插值，代碼如下：

Mustache標(biāo)簽將會被替代為對應(yīng)數(shù)據(jù)對象上property的值。無論何時，只要綁定的數(shù)據(jù)對象上property發(fā)生了改變，插值處的內(nèi)容都會更新。

通過使用v-once指令，也能一次性地插值，但當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容卻不會更新。需要留心，這會影響到該節(jié)點(diǎn)上的其他數(shù)據(jù)綁定，代碼如下：

在下面的示例中，向標(biāo)題動態(tài)插入值，插值的內(nèi)容可以根據(jù)需要進(jìn)行修改，代碼如下：

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

2．原始HTML

雙大括號會將數(shù)據(jù)解釋為普通文本，而非HTML代碼。為了輸出真正的HTML，我們需要使用v-html指令。

如果想要在頁面中輸出一個超鏈接，我們先在data屬性中聲明一個值，其含有<a>標(biāo)簽的字符串屬性，然后使用v-html指令綁定到對應(yīng)的HTML元素上，代碼如下：

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

在瀏覽器的控制臺中可以看到，使用v-html指令的<p>標(biāo)簽輸出了<a>標(biāo)簽，并且在單擊頁面中的“Vue.js官網(wǎng)”鏈接后，瀏覽器頁面跳轉(zhuǎn)到了對應(yīng)的頁面。

3．使用JavaScript表達(dá)式

在前面的Vue.js示例代碼中，一直只綁定簡單的property鍵值，但實(shí)際上，對于所有的數(shù)據(jù)綁定，Vue.js都提供了完全的JavaScript表達(dá)式支持，代碼如下：

這些表達(dá)式會在所屬Vue實(shí)例的數(shù)據(jù)作用域下作為JavaScript被解析。有個限制需要注意，每個綁定都只能包含單個表達(dá)式，所以下面的例子不會生效，代碼如下：

1.3.2　指令

指令（directives）是帶有“v-”前綴的特殊屬性，指令設(shè)計的初衷是用于表示單個的JavaScript表達(dá)式（v-for為例外情況）。指令的作用是當(dāng)表達(dá)式的值發(fā)生改變時，可以動態(tài)地將結(jié)果響應(yīng)式作用在DOM元素上，代碼如下：

在上面的代碼中，v-if指令將根據(jù)表達(dá)式seen的值的真假動態(tài)插入或移除<p>元素。

1．參數(shù)

一些指令能夠接收一個“參數(shù)”，在指令名稱之后以冒號表示。例如，v-bind指令可以用于響應(yīng)式地更新HTMLattribute，代碼如下：

這里的href是參數(shù)，告知v-bind指令將該元素的href attribute與表達(dá)式URL的值綁定。

2．修飾符

修飾符（modifier）是由半角句號“.”指明的特殊后綴，用于指出一個指令應(yīng)該以特殊方式綁定。例如，.prevent修飾符告訴v-on指令對于觸發(fā)的事件調(diào)用event.preventDefault（），代碼如下：

1.3.3　縮寫

“v-”前綴作為一種視覺提示，用來識別模板中Vue特定的屬性。在使用Vue.js為現(xiàn) 有標(biāo)簽添加動態(tài)行為時，v-前綴很有幫助。然而，對于一些頻繁用到的指令，這樣使用會令人覺得煩瑣。同時，在構(gòu)建由Vue管理所有模板的單頁面應(yīng)用程序（Single Page Application，SPA）時，v-前綴也變得沒那么重要了。因此，Vue為v-bind和v-on這兩個最常用的指令提供了特定簡寫。

1．v-bind縮寫

代碼如下：

2．v-on縮寫

代碼如下：

它們看起來可能與普通的HTML略有不同，但“：”與“@”對于屬性名來說都是合法字符，在所有支持Vue的瀏覽器都能被正確地解析。而且，它們不會出現(xiàn)在最終渲染的標(biāo)記中。