綁定title提示信息
除了上一章中的文本插值，我們也可以綁定DOM的其他屬性:
<div id="root">
<span v-bind:title="message">
停留片刻查看動(dòng)態(tài)消息
</span>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el: "#root",
data: {
message: '現(xiàn)在時(shí)間為' + new Date().toLocaleString()
}
})
</script>
在瀏覽器打開(kāi)此index.html文件谆膳，鼠標(biāo)停留在文字區(qū)域，我們可以看到提示信息顯示為現(xiàn)在時(shí)間為2017-09-07XXX 的提示信息撮躁，由此可以看出來(lái)漱病，span中的title屬性已經(jīng)與app.message屬性保持一致，上面出現(xiàn)的v-bind的屬性在Vue中被稱(chēng)為指令把曼，在Vue中杨帽，指令帶有前綴v-，用來(lái)區(qū)分它們屬于Vue中的屬性嗤军。同樣的我們也按F12呼出控制臺(tái)注盈，改變message的值，你會(huì)看到title的值也同步更新了叙赚。
循環(huán)與條件
我們來(lái)看下面的例子
<div id="root">
<ul>
<li v-for="item in items" v-if="item.show">
{{item.msg}}
</li>
</ul>
</div>
var app = new Vue({
el: "#root",
data: {
items: [
{msg: 'Sherlock', show: true},
{msg: 'Tina', show: false},
{msg: 'Sherry', show: true},
{msg: 'Aini', show: false},
{msg: 'Nokia', show: true}
]
}
})
在瀏覽器中它會(huì)顯示以下效果:
- Sherlock
- Sherry
- Nokia
上面我們看到了兩個(gè)新的指令：v-for和v-if老客，v-for指令可以展開(kāi)數(shù)組數(shù)據(jù)，用來(lái)渲染一個(gè)項(xiàng)目列表震叮，上面本應(yīng)該展開(kāi)輸出以下效果：
- Sherlock
- Tina
- Sherry
- Aini
- Nokia
這里為什么會(huì)少了Tina胧砰、Aini兩項(xiàng)呢，這里就是另外一個(gè)指令v-if的效果了苇瓣，控制元素的顯示隱藏朴则，由于Tina、Aini對(duì)應(yīng)的show值為false钓简，所以在展開(kāi)的時(shí)候，這兩項(xiàng)被隱藏了汹想，我們也可以在控制臺(tái)把Tina對(duì)應(yīng)的show設(shè)置成true這時(shí)你會(huì)看到Tina會(huì)顯示到正確的位置外邓，而且，Vue也提供一個(gè)強(qiáng)大的過(guò)渡效果系統(tǒng)古掏，可以在Vue插入损话、更新、刪除元素時(shí)自動(dòng)應(yīng)用過(guò)渡效果。
處理用戶(hù)輸入
最后我們來(lái)了解一下Vue是怎么處理用戶(hù)的輸入與交互的丧枪，這里用到一個(gè)新指令v-on光涂，它可以綁定一個(gè)事件監(jiān)聽(tīng)器，通過(guò)它調(diào)用Vue實(shí)例中我們定義的方法：
<div id="root">
<p> {{ message }} </p>
<button v-on:click="reverse"> 逆轉(zhuǎn)消息 </button>
</div>
var app = new Vue({
el: "#root",
data: {
message: "Hello World"
},
methods: {
reverse: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
當(dāng)我們?cè)邳c(diǎn)擊按鈕的時(shí)候拧烦，觸發(fā)點(diǎn)擊事件忘闻，從而調(diào)用Vue實(shí)例的reverse方法，在方法中我們更新了應(yīng)用的狀態(tài)恋博，但沒(méi)有去操作DOM——所有的DOM操作都由Vue去處理齐佳，我們不用去處理這些瑣事。
另外债沮，這里還有一個(gè)指令也要一起說(shuō)下炼吴，v-model指令，通過(guò)它我們能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定:
<div id="root">
<p> {{ message }} </p>
<input v-model="message">
</div>
var app = new Vue({
el: "#root",
data: {
message: '請(qǐng)輸入消息'
}
})
當(dāng)我們修改input元素的值時(shí)疫衩，p的值也會(huì)跟著改變硅蹦。
結(jié)語(yǔ)
以上是Vue中最常見(jiàn)最基礎(chǔ)的用法，希望自己先熟練基礎(chǔ)之后再一步一步去學(xué)習(xí)Vue闷煤，以上代碼也放到Github上了：
learnVue
