第三章：雙向綁定和數(shù)據(jù)渲染
有話說(shuō)在前面
既然清楚了原理采郎，那么千所，接下來(lái)進(jìn)入正題——我知道了vue怎么安裝，那么我怎么使用呢蒜埋？
在告訴你基礎(chǔ)用法之前淫痰，我還是要先告訴你一個(gè)情況。
可能要令你有點(diǎn)失望整份。vue主要是側(cè)重于數(shù)據(jù)端的待错。他的目的就是渲染數(shù)據(jù)和在前端調(diào)整一下數(shù)據(jù)邏輯。
他不是像jquery那樣讓你用來(lái)做特技的烈评。就算你要做特技火俄。你也應(yīng)該通過(guò)css3/canvas而不是dom。
基礎(chǔ)用法：1.雙向綁定
所謂的雙向綁定讲冠，你可以理解就是把view瓜客。（你還不清楚mvc的話，請(qǐng)看第一章）
和model綁定到一起竿开。說(shuō)白了谱仪，就是你js中的綁定值變了。你dom中的內(nèi)容就跟著一塊變了否彩。
vue是通過(guò)解析{{文字..}}來(lái)生成內(nèi)容的疯攒。后面綁定方法，輸出內(nèi)容的時(shí)候都會(huì)講到列荔。
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:"我是和vue綁定的數(shù)據(jù).."
}
})
</script>
2.for渲染數(shù)據(jù)
列表輸出使用 v-for敬尺，這些v開(kāi)頭加橫杠的叫做命令
這些命令是可以自定義的。但是那都屬于高級(jí)操作贴浙，我們不用它也完全足夠支撐做一個(gè)大型項(xiàng)目了筷转。
其實(shí)你回發(fā)現(xiàn)，這里無(wú)論是v-for或者是v-什么其他玩意
它都深刻的遵循了es6的語(yǔ)法悬而。這里不就是一個(gè)典型的for in 循環(huán)嗎呜舒。不過(guò)我們現(xiàn)在都用for of了。
你記住這個(gè)用法笨奠，它就長(zhǎng)這樣袭蝗。
<div id="app">
<ul>
<li v-for="item in arry">{{item.name}}</li>
<!-- 這里如果你想獲得index 可以寫(xiě)成 (index,item) in arry -->
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
arry:[
{name:"yunlong"},
{name:"gaoxiang"},
{name:"laohu"},
]
}
})
</script>
為什么要先講這兩個(gè)
前后端分離開(kāi)發(fā)的關(guān)鍵在于：后臺(tái)只提供接口。
我們獲得的數(shù)據(jù)多數(shù)情況下般婆，僅僅是一個(gè)json到腥，而mvvm的關(guān)鍵就再于解析數(shù)據(jù)在前端完成了。如果你了解jsp或者php你會(huì)了解蔚袍，數(shù)據(jù)的解析在mvc中乡范，
是由后端完成的配名，而html只負(fù)責(zé)顯示。
所以晋辆，當(dāng)你了解了數(shù)據(jù)綁定和渲染以后渠脉，你可以第一時(shí)間先把數(shù)據(jù)輸出到頁(yè)面了。
我們前端最厲害的地方不就是處理能看得見(jiàn)的東西嗎瓶佳？
