Vue.js（03）：Vue.js 模闆文法

vue.js 使用了基于 html 的模版文法，允許開發者聲明式地将 dom 綁定至底層 vue 執行個體的資料。

vue.js 的核心是一個允許你采用簡潔的模闆文法來聲明式的将資料渲染進 dom 的系統。

結合響應系統，在應用狀态改變時， vue 能夠智能地計算出重新渲染元件的最小代價并應用到 dom 操作上。

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

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

菜鳥教程

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

以下執行個體判斷 use 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：

嘗試一下 »

vue.js 都提供了完全的 javascript 表達式支援。

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

指令用于在表達式的值改變時，将某些行為應用到 dom 上。如下例子：

這裡， v-if 指令将根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。

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

在這裡 href 是參數，告知 v-bind 指令将該元素的 href 屬性與表達式 url 的值綁定。

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

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

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

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

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

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

以下執行個體在使用者點選按鈕後對字元串進行反轉操作：

vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。由"管道符"訓示, 格式如下：

過濾器函數接受表達式的值作為第一個參數。

以下執行個體對輸入的字元串第一個字母轉為大寫：

過濾器可以串聯：

過濾器是 javascript 函數，是以可以接受參數：

這裡，message 是第一個參數，字元串 'arg1' 将傳給過濾器作為第二個參數， arg2 表達式的值将被求值然後傳給過濾器作為第三個參數。

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

舉例：