Vue.js的模板語法

插值

文本

使用「Mustache」語法 (即用雙大括號包裹) 的文本插值：

<span>Message: {{ msg }}</span>
複製代碼

Mustache 標籤將會被替代爲對應數據對象上 「msg」 屬性的值。不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。

若是使用 v-once 指令，你也能執行一次性插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定。

HTML

直接用雙大括號包裹只是普通文本，若是想實現HTML代碼效果，須要加入v-html指令

html部分：

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

js部分：

var vm = new Vue({
	el:'#app',
	data:{
	    rawHtml:'<span style="color:red">this is red</span>'
	}
});
複製代碼

v-html使用時在span標籤的前標籤內寫入「v-html="xxx」，至關於將data中的值以HTML形式放入span標籤內。

attribute（屬性）

Mustache 語法不能做用在 HTML attribute 上，遇到這種狀況應該使用 v-bind 指令：

格式：v-bind:屬性="變量名"

html部分：

<div v-bind:color="textcolor">123</div>
複製代碼

js部分：

data:{
    textcolor:"red"
}
複製代碼

將變量textcolor的值「red"綁定在盒子的 "color" 屬性上

對於布爾屬性，v-bind使用爲：

<button v-bind:disabled="isButtonDisabled">Button</button>
複製代碼

若是 isButtonDisabled 的值是 null、undefined 或 false，則 disabled attribute 甚至不會被包含在渲染出來的 <button> 元素中。

JS表達式

迄今爲止，在咱們的模板中，咱們一直都只綁定簡單的屬性鍵值。但實際上，對於全部的數據綁定，Vue.js 都提供了徹底的 JavaScript 表達式支持。

{{ data變量 + 1 }}                //
{{ data變量/表達式 ? 'true代碼' : 'false代碼' }}            //三元運算
{{ data變量.split('').reverse().join('') }}            //能夠進行函數調用

<div v-bind:id="'list-' + id"></div>
複製代碼

這些表達式會在所屬 Vue 實例的數據做用域下做爲 JavaScript被解析。

限制是：每一個綁定都只能包含單個表達式，因此下面的例子都不會生效。

<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}

<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}
複製代碼

指令

指令 (Directives) 是帶有 v- 前綴的特殊 attribute。指令 attribute 的值預期是單個 JavaScript 表達式 。指令的職責是， 當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。 回顧咱們在介紹中看到的例子：

<p v-if="seen">如今你看到我了</p>
複製代碼

這裏，v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。

參數

一些指令可以接收一個「參數」，在指令名稱以後以冒號表示。例如，v-bind 指令能夠用於響應式地更新 HTML屬性值：

<a v-bind:href="url">...</a>
複製代碼

在這裏 href 是參數 ，告知 v-bind 指令將該元素的 href attribute 與表達式 url 的值綁定。

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

<a v-on:click="doSomething">...</a>
複製代碼

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

動態參數

能夠動態的綁定不一樣的屬性，能夠用方括號括起來的 JavaScript 表達式做爲一個指令的參數：

<!--
注意，參數表達式的寫法存在一些約束，如以後的「對動態參數表達式的約束」章節所述。
-->
<a v-bind:[attributeName]="url"> ... </a>
複製代碼

這裏的 attributeName(命名中不能有逗號或冒號等符號) 會被做爲一個 JavaScript 表達式進行動態求值，求得的值將會做爲最終的參數來使用。

例如，若是你的 Vue 實例有一個 data 屬性 attributeName，其值爲 "href"，那麼這個綁定將等價於 <a v-bind:href="url">...</a>。

一樣地，你可使用動態參數爲一個動態的事件名綁定處理函數：

<a v-on:[eventName]="doSomething"> ... </a>
複製代碼

在這個示例中，當 eventName 的值爲 "focus" 時，v-on:[eventName] 將等價於 v-on:focus。

修飾符

修飾符 (modifier) 是以半角句號 " . " 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。

簡寫

v-bind 縮寫

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

<!-- 縮寫 -->
<a :href="url">...</a>
複製代碼

v-on 縮寫

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

<!-- 縮寫 -->
<a @click="doSomething">...</a>
複製代碼