模板語法

Vue.js 允許開發者宣告式地將DOM繫結至底層Vue例項的資料

在底層的實現上，Vue將模板編譯成虛擬DOM渲染函式。結合響應系統，Vue能夠只能地計算出最少需要重新玄灘多少元件，並把DOM操作次數減到最少

也可不用模板，直接寫渲染（render）函式，使用可選的JSX語法

插值

---

**文字**

資料繫結: {{ }}
> ` Message: {{ msg }} `
>
> // 無論何時，繫結的資料物件上的屬性發生了改變，插值處的內容都會更新

• v-once指令，執行一次性的插值，當資料發生改變時，插值處的內筒不會更新。
  

原始HTML

• v-html指令，輸出真正的HTML
  例子：

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

複製程式碼

輸出顯示：

注意，不能使用v-html來符合區域性模板，因為Vue不是基於字串的模板引擎。
反之，對於使用者介面（UI），元件更實用作為可重用和可組合的基本單位

你的站點上動態渲染的任意HTML可能會非常危險，因為它很容易導致XXS攻擊。只對可信內容使用HTML插值，絕對不要對使用者提供的內容使用插值

特性

模板表示式都被凡在沙盒中，只能訪問全域性變數的一個白名單，如Math和Date.
不應該在模板表示式中試圖訪問使用者定義的全域性變數

指令

---

指令（Directives）是帶有` v-`字首的特殊特性。指令特性的值預期是**單個JavaScript表示式**

` v-for`是例外情況

引數

一些指令能夠接收一個“引數”,在指令名稱之後以冒號表示。

<a v-bind:href="url"> ...</a>
在這裡href 是引數，告知v-bind指令將該元素的href特性與表示式url的值繫結。另一個例子是v-on指令，它用於監聽DOM事件：
<a v-on:click="doFunction">...</a>

修飾符

修飾符（modifiers）是以半形句號.指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。
例如，.prevent修飾符告訴v-on指令對於觸發的事件呼叫event.preventDefault():

<form v-on:submit.prevent="onSubmit">..</form>

縮寫

---

v-字首作為一種視覺提醒，用來識別模板中vue特性。當你在使用Vue.js為現有標籤新增動態行為（dynamic behavior）時，v-字首很有幫助。

同時，在構建由 Vue.js 管理所有模板的單頁面應用程式 (SPA – single page application) 時，v- 字首也變得沒那麼重要了。因此，Vue.js 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：

#v-bind縮寫

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫語法 -->
<a :href="url">...</a>

複製程式碼

#v-on縮寫

<!-- 完整語法 -->
<a v-on:click="onClick">...</a>

<!-- 縮寫語法 -->
<a @click="onClick">...</a>

複製程式碼