Vue.js 範本語法

Vue.js 使用了基於 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。

Vue.js 的核心是一個允許你採用簡潔的範本語法來聲明式的將數據渲染進 DOM 的系統。

結合回應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價並應用到 DOM 操作上。

插值

文本

數據綁定最常見的形式就是使用 {{...}}（雙大括弧）的文本插值：

Html

使用 v-html 指令用於輸出 html 代碼：

屬性

HTML 屬性中的值應使用 v-bind 指令。

以下實例判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：

運算式

Vue.js 都提供了完全的 JavaScript 運算式支持。

指令

指令是帶有 v- 首碼的特殊屬性。

指令用於在運算式的值改變時，將某些行為應用到 DOM 上。如下例子：

這裏， v-if 指令將根據運算式 seen 的值(true 或 false )來決定是否插入 p 元素。

參數

參數在指令後以冒號指明。例如， v-bind 指令被用來回應地更新 HTML 屬性：

在這裏 href 是參數，告知 v-bind 指令將該元素的 href 屬性與運算式 url 的值綁定。

另一個例子是 v-on 指令，它用於監聽 DOM 事件：

<a v-on:click="doSomething">

在這裏參數是監聽的事件名。

修飾符

修飾符是以半角句號 . 指明的特殊尾碼，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：

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

用戶輸入

在 input 輸入框中我們可以使用 v-model 指令來實現雙向數據綁定：

v-model 指令用來在 input、select、textarea、checkbox、radio 等表單控件元素上創建雙向數據綁定，根據表單上的值，自動更新綁定的元素的值。

按鈕的事件我們可以使用 v-on 監聽事件，並對用戶的輸入進行回應。

以下實例在用戶點擊按鈕後對字串進行反轉操作：

篩檢程式

Vue.js 允許你自定義篩檢程式，被用作一些常見的文本格式化。由"管道符"指示, 格式如下：

<!-- 在兩個大括弧中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

篩檢程式函數接受運算式的值作為第一個參數。

以下實例對輸入的字串第一個字母轉為大寫：

篩檢程式可以串聯：

{{ message | filterA | filterB }}

篩檢程式是 JavaScript 函數，因此可以接受參數：

{{ message | filterA('arg1', arg2) }}

這裏，message 是第一個參數，字串 'arg1' 將傳給篩檢程式作為第二個參數， arg2 運算式的值將被求值然後傳給篩檢程式作為第三個參數。

縮寫

v-bind 縮寫

Vue.js 為兩個最為常用的指令提供了特別的縮寫：

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

v-on 縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>