第三章：雙向綁定和數(shù)據(jù)渲染

有話說在前面

既然清楚了原理，那么，接下來進(jìn)入正題——我知道了vue怎么安裝，那么我怎么使用呢？

在告訴你基礎(chǔ)用法之前，我還是要先告訴你一個(gè)情況。
可能要令你有點(diǎn)失望。vue主要是側(cè)重于數(shù)據(jù)端的。他的目的就是渲染數(shù)據(jù)和在前端調(diào)整一下數(shù)據(jù)邏輯。
他不是像jquery那樣讓你用來做特技的。就算你要做特技。你也應(yīng)該通過css3/canvas而不是dom。

基礎(chǔ)用法：1.雙向綁定

所謂的雙向綁定，你可以理解就是把view。（你還不清楚mvc的話，請(qǐng)看第一章）
和model綁定到一起。說白了，就是你js中的綁定值變了。你dom中的內(nèi)容就跟著一塊變了。
vue是通過解析{{文字..}}來生成內(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開頭加橫杠的叫做命令
這些命令是可以自定義的。但是那都屬于高級(jí)操作，我們不用它也完全足夠支撐做一個(gè)大型項(xiàng)目了。

其實(shí)你回發(fā)現(xiàn)，這里無論是v-for或者是v-什么其他玩意
它都深刻的遵循了es6的語法。這里不就是一個(gè)典型的for in 循環(huán)嗎。不過我們現(xiàn)在都用for of了。
你記住這個(gè)用法，它就長這樣。

<div id="app">
    <ul>
       <li v-for="item in arry">{{item.name}}</li>
        <!-- 這里如果你想獲得index 可以寫成 (index,item) in arry -->
    </ul>
</div>
<script type="text/javascript">
    new Vue({
       el:"#app",
       data:{
          arry:[
             {name:"yunlong"},
             {name:"gaoxiang"},
             {name:"laohu"},
          ]
       }
   })
</script>

為什么要先講這兩個(gè)

前后端分離開發(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ù)輸出到頁面了。

我們前端最厲害的地方不就是處理能看得見的東西嗎？