Vue.js模板語法
Vue.js使用了基于HTML的模板語法，允許開發(fā)者聲明式地將DOM綁定至底層Vue實(shí)例的教程。
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操作上。
插值
文本
數(shù)據(jù)綁定最常見的形式就是使用{{...}}(雙大括號(hào))的文本插值：
文本插值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
屬性
HTML屬性中的值應(yīng)使用v-bind指令泌辫。
以下實(shí)例判斷use的值，如果為true使用class1類的樣式九默，否則不使用該類：
v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title>
</head>
<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>
</body>
表達(dá)式
Vue.js都提供了完全的JavaScript表達(dá)式支持震放。
JavaScript表達(dá)式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<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: 'RUNOOB',
id : 1
}
})
</script>
</body>
</html>
指令
指令是帶有v-前綴的特殊屬性。
指令用于在表達(dá)式的值改變時(shí)驼修，將某些行為應(yīng)用到DOM上殿遂，如下例子：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">現(xiàn)在你看到我了</p>
<template v-if="ok">
<h1>菜鳥教程</h1>
<p>學(xué)的不僅是技術(shù)，更是夢(mèng)想乙各！</p>
<p>哈哈哈墨礁，打字辛苦啊６汀６骶病！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
</html>
這里蹲坷，v-if指令將根據(jù)表達(dá)式seen的值(true 或 false)來決定是否插入p元素蜕企。
參數(shù)
參數(shù)在指令以后冒號(hào)指明咬荷。例如，v-bind指令被用來響應(yīng)地更新HTML屬性：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<pre><a v-bind:href="url">菜鳥教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
</body>
</html>
在這里herf是參數(shù)轻掩，告知v-bind指令將該元素的herf屬性與表達(dá)式url的值綁定幸乒。
另個(gè)一個(gè)例子是v-on指令，它用于監(jiān)聽DOM事件：
<a v-on:click="doSomething">
在這里參數(shù)是監(jiān)聽的事件名唇牧。
修飾符
修飾符是以半角句號(hào).指明的特殊后綴罕扎，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。例如,.prevent修飾符告訴v-on指令對(duì)于觸發(fā)的事件調(diào)用evnet.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>
用戶輸入
在input輸入框中我們可以使用v-model指令來實(shí)現(xiàn)雙向數(shù)據(jù)綁定：
雙向數(shù)據(jù)綁定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
</body>
</html>
v-model指令用來在input丐重、select腔召、textarea、checkbox扮惦、radio等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定臀蛛，根據(jù)表單上的值，自動(dòng)更新綁定的元素的值崖蜜。
按鈕的事件我們可以使用v-on監(jiān)聽事件浊仆，并對(duì)用戶的輸入進(jìn)行響應(yīng)。
以下實(shí)例在用戶點(diǎn)擊按鈕后對(duì)字符串進(jìn)行反轉(zhuǎn)操作：
字符串反轉(zhuǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<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>
</body>
</html>
過濾器
Vue.js允許你自定義過濾器豫领，被用作一些常見的文本格式化抡柿。由"管道符"指示，格式如下：
<!-- 在兩個(gè)大括號(hào)中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
過濾器函數(shù)接受表達(dá)式的值作為第一個(gè)參數(shù)等恐。
以下實(shí)例對(duì)輸入的字符串第一個(gè)字母轉(zhuǎn)為大寫：
實(shí)例
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<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>
</body>
</html>
過濾器可以串聯(lián)：
{{message|filterA|filterB}}
過濾器是JavaScript函數(shù)洲劣，因此可以接受參數(shù)：
{{message|filterA('arg1',arg2)}}
這里，message是第一個(gè)參數(shù)课蔬，字符串'arg1'將傳給過濾器作為第二個(gè)參數(shù)囱稽，arg2表達(dá)式的值將被求值然后傳給過濾器作為第三個(gè)參數(shù)。
縮寫
v-bind縮寫
Vue.js為兩個(gè)最為常用的指令提供了特別的縮寫：
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
v-on縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
···
