Vue.js 模板語法
Vue.js 使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。
Vue.js 的核心是一個(gè)允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。
結(jié)合響應(yīng)系統(tǒng)，在應(yīng)用狀態(tài)改變時(shí)， Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上。
1. 插值
1.1 文本插值
數(shù)據(jù)綁定最常見的形式就是使用 {{...}}（雙大括號）的文本插值：
<div id="app"> <p>{{ message }}</p> </div>
1.2純html
使用 v-html 指令用于輸出 html 代碼：
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({ el: '#app', data: { message: '<h1>VUE教程</h1>' } })
</script>
1.3屬性
HTML 屬性中的值應(yīng)使用 v-bind 指令。
以下實(shí)例判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<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>
1.4 JavaScript表達(dá)式
Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">vue教程</div>
</div>
<script>
new Vue({
el: '#app',
data: { ok: true, message: 'RUNOOB', id : 1 }
})
</script>
2. 指令
指令是帶有 v- 前綴的特殊屬性。
指令用于在表達(dá)式的值改變時(shí)，將某些行為應(yīng)用到 DOM 上。如下例子：
<div id="app">
<p v-if="seen">現(xiàn)在你看到我了</p>
</div>
<script>
new Vue({ el: '#app', data: { seen: true } })
</script>
這里， v-if 指令將根據(jù)表達(dá)式 seen 的值(true 或 false )來決定是否插入 p 元素。
2.1 參數(shù)
參數(shù)在指令后以冒號指明。例如， v-bind 指令被用來響應(yīng)地更新 HTML 屬性：
<div id="app">
<pre><a v-bind:href="url">vue教程</a></pre>
</div>
<script>
new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } })
</script>
在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href 屬性與表達(dá)式 url 的值綁定。
另一個(gè)例子是 v-on 指令，它用于監(jiān)聽 DOM 事件：
<a v-on:click="doSomething">
在這里參數(shù)是監(jiān)聽的事件名。
2.2 修飾符
修飾符是以半角句號 . 指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調(diào)用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form></pre>
3. 用戶輸入
在 input 輸入框中我們可以使用 v-model 指令來實(shí)現(xiàn)雙向數(shù)據(jù)綁定：
3.1 雙向數(shù)據(jù)綁定
<div id="app">
<p>{{ message }}</p> <input v-model="message">
</div>
<script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script>
v-model 指令用來在 input、select、text、checkbox、radio 等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，根據(jù)表單上的值，自動(dòng)更新綁定的元素的值。
按鈕的事件我們可以使用 v-on 監(jiān)聽事件，并對用戶的輸入進(jìn)行響應(yīng)。
以下實(shí)例在用戶點(diǎn)擊按鈕后對字符串進(jìn)行反轉(zhuǎn)操作：
3.2 字符串反轉(zhuǎn)
<div id="app">
<p>{{ message }}</p> <button v-on:click="reverseMessage">反轉(zhuǎn)字符串</button>
</div>
<script>
new Vue({
el: '#app', data: { message: 'Runoob!'
},
methods: {
reverseMessage: function () { this.message = this.message.split('').reverse().join('') }
}
})
</script>
4. 過濾器
Vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。過濾器應(yīng)該被添加在 mustache 插值的尾部，由“管道符”指示：由"管道符"指示, 格式如下：
{{ message | capitalize }}
-- 在 v-bind 指令中 --
<div v-bind:id="rawId | formatId"></div>
過濾器函數(shù)接受表達(dá)式的值作為第一個(gè)參數(shù)。
以下實(shí)例對輸入的字符串第一個(gè)字母轉(zhuǎn)為大寫：
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({ el: '#app',
data: { message: 'runoob' },
filters: {
capitalize: function (value) { if (!value) return ''
value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })
</script>
過濾器可以串聯(lián)：
{{ message | filterA | filterB }}
過濾器是 JavaScript 函數(shù)，因此可以接受參數(shù)：
{{ message | filterA('arg1', arg2) }}
這里，message 是第一個(gè)參數(shù)，字符串 'arg1' 將傳給過濾器作為第二個(gè)參數(shù)， arg2 表達(dá)式的值將被求值然后傳給過濾器作為第三個(gè)參數(shù)。
5. 縮寫
5.1 v-bind 縮寫
Vue.js 為兩個(gè)最為常用的指令提供了特別的縮寫：
<a v-bind:href="url"></a>
-- 縮寫 --
<a :href="url"></a>
5.2 v-on 縮寫
<a v-on:click="doSomething"></a>
!-- 縮寫 -->
<a @click="doSomething"></a>
