Vue.js 模板語法

Vue.js 使用了基於 HTML 的模板語法，允許開發者宣告式地將 DOM 繫結至底層 Vue 例項的資料。

Vue.js 的核心是一個允許你採用簡潔的模板語法來宣告式的將資料渲染進 DOM 的系統。

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

插值

文字

資料繫結最常見的形式就是使用 {{...}}（雙大括號）的文字插值：

文字插值

<div id="app"> <p>{{ message }}</p> </div>

嘗試一下 ?

Html

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

v-html 指令

<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>入門教學</h1>' } }) </script>

嘗試一下 ?

屬性

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

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

v-bind 指令

<div id="app"> <label for="r1">修改顏色</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}"> v-bind:class 指令 </div> </div> <script> new Vue({ el: '#app', data:{ use: false } }); </script>

嘗試一下 ?

表示式

Vue.js 都提供了完全的 JavaScript 表示式支援。

JavaScript 表示式

<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">入門教學</div> </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'itread01', id : 1 } }) </script>

嘗試一下 ?

指令

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

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

例項

<div id="app"> <p v-if="seen">現在你看到我了</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>

嘗試一下 ?

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

引數

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

例項

<div id="app"> <pre><a v-bind:href="url">入門教學</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.itread01.com' } }) </script>

嘗試一下 ?

在這裡 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 指令來實現雙向資料繫結：

雙向資料繫結

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'itread01!' } }) </script>

嘗試一下 ?

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

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

以下例項在使用者點選按鈕後對字串進行反轉操作：

字串反轉

<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反轉字串</button> </div> <script> new Vue({ el: '#app', data: { message: 'itread01!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script>

嘗試一下 ?

過濾器

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

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

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

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

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

例項

<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'itread01' }, filters: { capitalize: function (value) { if (!value) return '' value = https://www.itread01.com/vue2/value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>

嘗試一下 ?

過濾器可以串聯：

{{ message | filterA | filterB }}

過濾器是 JavaScript 函式，因此可以接受引數：

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

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

縮寫

v-bind 縮寫

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

<!-- 完整語法 -->
<a v-bind:href="https://www.itread01.com/vue2/url"></a>
<!-- 縮寫 -->
<a :href="https://www.itread01.com/vue2/url"></a>

v-on 縮寫

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