Vue.js 模板語(yǔ)法
Vue.js 使用了基于 HTML 的模版語(yǔ)法碟贾，允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)你画。
Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(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ù)綁定最常見(jiàn)的形式就是使用 {{...}}（雙大括號(hào)）的文本插值：
<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 類(lèi)的樣式誊爹，否則不使用該類(lèi)：
<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 )來(lái)決定是否插入 p 元素。
2.1 參數(shù)
參數(shù)在指令后以冒號(hào)指明迂卢。例如某弦， v-bind 指令被用來(lái)響應(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)聽(tīng) DOM 事件：
<a v-on:click="doSomething">
在這里參數(shù)是監(jiān)聽(tīng)的事件名。
2.2 修飾符
修飾符是以半角句號(hào) . 指明的特殊后綴员萍，用于指出一個(gè)指令應(yīng)該以特殊方式綁定腾降。例如，.prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form></pre>
3. 用戶輸入
在 input 輸入框中我們可以使用 v-model 指令來(lái)實(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 指令用來(lái)在 input充活、select蜂莉、text、checkbox混卵、radio 等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定映穗，根據(jù)表單上的值，自動(dòng)更新綁定的元素的值幕随。
按鈕的事件我們可以使用 v-on 監(jiān)聽(tīng)事件蚁滋，并對(duì)用戶的輸入進(jìn)行響應(yīng)。
以下實(shí)例在用戶點(diǎn)擊按鈕后對(duì)字符串進(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. 過(guò)濾器
Vue.js 允許你自定義過(guò)濾器赘淮，被用作一些常見(jiàn)的文本格式化辕录。過(guò)濾器應(yīng)該被添加在 mustache 插值的尾部，由“管道符”指示：由"管道符"指示, 格式如下：
{{ message | capitalize }}
-- 在 v-bind 指令中 --
<div v-bind:id="rawId | formatId"></div>
過(guò)濾器函數(shù)接受表達(dá)式的值作為第一個(gè)參數(shù)梢卸。
以下實(shí)例對(duì)輸入的字符串第一個(gè)字母轉(zhuǎn)為大寫(xiě)：
<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>
過(guò)濾器可以串聯(lián)：
{{ message | filterA | filterB }}
過(guò)濾器是 JavaScript 函數(shù)走诞，因此可以接受參數(shù)：
{{ message | filterA('arg1', arg2) }}
這里，message 是第一個(gè)參數(shù)蛤高，字符串 'arg1' 將傳給過(guò)濾器作為第二個(gè)參數(shù)蚣旱， arg2 表達(dá)式的值將被求值然后傳給過(guò)濾器作為第三個(gè)參數(shù)。
5. 縮寫(xiě)
5.1 v-bind 縮寫(xiě)
Vue.js 為兩個(gè)最為常用的指令提供了特別的縮寫(xiě)：
<a v-bind:href="url"></a>
-- 縮寫(xiě) --
<a :href="url"></a>
5.2 v-on 縮寫(xiě)
<a v-on:click="doSomething"></a>
!-- 縮寫(xiě) -->
<a @click="doSomething"></a>
