2.1.1　模板插值

首先，我們創建一個名為tempText.html的文件，在其中編寫HTML文檔的常規代碼。之后在body標簽中添加一個元素供我們測試使用，代碼如下：

如果在瀏覽器中運行上面的HTML代碼，你會看到網頁中渲染出了一個標題和一個按鈕，但是單擊按鈕并沒有任何效果（截至目前，我們并沒有寫什么邏輯代碼）。現在，讓我們為這個網頁增加一些動態功能，很簡單：單擊按鈕，改變數值。引入Vue框架，并通過Vue組件來實現這個計數器功能，完整的示例代碼如下：

在瀏覽器中運行上面的代碼，單擊頁面中的按鈕。可以看到頁面中標題的文本也在不斷變化。如以上代碼所示，在HTML的標簽中使用“{{}}”可以進行變量插值，這是Vue中基礎的模板語法，其可以將當前組件中定義的變量的值插入指定位置，并且這種插值會默認實現綁定的效果，即當我們修改了變量的值時，其可以同步地反饋到頁面的渲染上。

某些情況下，某些組件的渲染是由變量控制的，但是我們想讓它一旦渲染后就不能夠再被修改，這時可以使用模板中的v-once指令實現，被這個指令設置的組件在進行變量插值時只會插值一次，例如：

     <h1 v-once>這里是模板的內容:{{count}}次點擊</h1>

在瀏覽器中再次實驗，可以發現網頁中指定的插值位置被替換成了文本“0”后，無論我們再怎么單擊按鈕，標題也不會再改變。

還有一點需要注意，如果要插值的文本為一段HTML代碼，則直接使用雙括號就不太好使了，雙括號會將其內的變量解析成純文本。例如，定義Vue組件App中的數據如下：

如果使用雙括號插值的方式將HTML代碼插入，最終的效果會將其以文本的方式渲染出來，代碼如下：

     <h1 v-once>這里是模板的內容:{{countHTML}}次點擊</h1>

運行效果如圖2-1所示。

圖2-1　使用雙括號進行HTML插值

這種效果明顯不符合我們的預期，對于HTML代碼插值，我們需要使用v-html指令來完成，示例代碼如下：

     <h1 v-once>這里是模板的內容:<span v-html="countHTML"></span>次點擊</h1>

V-html指令可以指定一個Vue變量數據，其會通過HTML解析的方式將原始HTML替換到其指定的標簽位置，如以上代碼運行后的效果如圖2-2所示。

圖2-2　使用v-html進行HTML插值

前面介紹了如何在標簽內部進行內容的插值，我們知道，標簽除了其內部的內容外，本身的屬性設置也是非常重要的，例如我們可能需要動態改變標簽的style屬性，從而實現元素渲染樣式的修改。在Vue中，我們可以使用屬性插值的方式做到標簽屬性與變量的綁定。

對于標簽屬性的插值，Vue中不再使用雙括號的方式，而是使用v-bind指令，示例代碼如下：

     <h1 v-bind:id="id1">這里是模板的內容:{{count}}次點擊</h1>

定義一個簡單的CSS樣式如下：

再添加一個名為id1的Vue組件屬性，代碼如下：

運行代碼，可以看到我們已經將id屬性動態地綁定到了指定的標簽中，當Vue組件中id1屬性的值發生變化時，其也會動態地反映到h1標簽上，我們通過這種動態綁定的方式靈活地更改標簽的樣式表。v-bind指令同樣適用于其他HTML屬性，只需要在其中使用冒號加屬性名的方式指定即可。

其實，無論是雙括號方式的標簽內容插值還是v-bind方式的標簽屬性插值，除了可以直接將變量插值外，也可以使用基本的JavaScript表達式，例如：

     <h1 v-bind:id="id1">這里是模板的內容:{{count + 10}}次點擊</h1>

上面的代碼運行后，頁面上渲染的數值是count屬性增加10之后的結果。有一點需要注意，所有插值的地方如果使用表達式，則只能使用單個表達式，否則會產生異常。