vue 模板語法

摘要： Vue.js 允許開發者宣告式地將DOM繫結至底層Vue例項的資料 在底層的實現上，Vue將模板編譯成虛擬DOM渲染函式。結合響應系統，Vue能夠只能地計算出最少需要重新玄灘多少元件，並把DOM操作次數減到最少 也可不用模板，直接寫渲染（render）函式，使用可選的JSX語法 插...

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>

複製程式碼