連續寫了 Vue Instance, Lifecycle Hook, Virtual DOM 有點快要腦中風，今天就先回到寫幾個基礎範例喘息一下。至於執行結果的部分就麻煩大家點fiddle範例觀看(懶的截圖XD)。

模板語法

Vue.js 使用基於 HTML 的模板語法，允許開發者將 DOM 綁定到 Vue 實例的數據(data)，且所有 Vue.js 的模板都是合法的 HTML。

在底層的實現上，Vue 將模板編譯成 Virtual DOM render function，當狀態改變時，Vue 能計算出重新渲染的最小代價並應用到DOM的操作上。

Interpolations(插值)

Text

插入值：

<div id="app">
  <p>Message: {{ msg }}</p>

  <p v-once>This will never change: {{ msg }}</p>
</div>

通過使用 v-once 指令，我們可以執行一次性的差值。

var vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
})

vm.$data.msg = 'change msg';

由於 v-once 是一次性的，所以當我們修改 msg 時，即不會在改變。
附上 fiddle https://jsfiddle.net/hunterliu/qfh2o4z9/

Raw HTML

插入 HTML：

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

var vm = new Vue({
  el: '#app',
  data: {
    rawHtml: ' <span style="color: red">This should be red.</span>'
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/jc0ugtxz/

Attributes

Mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind 指令：

<div id="app">
  <div v-bind:id="dynamicId">dynamicId</div>

  <button v-bind:disabled="isButtonDisabled">Button</button>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    dynamicId: 'colorRed',
    isButtonDisabled: true
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/gdayc7os/1/

Using javascript Expressions

對於所有的數據綁定 Vue.js 都支援完整的 javascript 表達式，例如：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

無效：

<!-- this is a statement, not an expression: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}

Directives(指令)

指令 (Directives) 是带有 v- 前缀的特殊属性。

Arguments(參數)

有些指令可以接受一個參數，在指令名稱之後以冒號表示。

例如：

<a v-bind:href="url"> ... </a>
<a v-on:click="doSomething"> ... </a>

在此 href 是參數，告知 v-bind 指令將 href 與表達式 url 的值绑定。

另一個範例是v-on，用於監聽 DOM 事件。

Modifilers(修飾符)

修飾符是以.指定特殊的後綴。例如，.prevent修飾符為告訴v-on指令對於觸發的事件調用event.preventDefault()：

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

Shorthands(縮寫)

因為v-bind和v-on這兩個指令太常用到，之後的範例也都會直接使用縮寫的方式。

v-bind Shorthand

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

<!-- 缩写 -->
<a :href="url">...</a>

v-on Shorthand

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

<!-- 缩写 -->
<a @click="doSomething">...</a>

參考資料

• Vue.js: Template Syntax