vue 模板語法

模板語法

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>

複製代碼