Vue.js 的核心是一個響應的數(shù)據綁定系統(tǒng)，它讓數(shù)據與 DOM 保持同步非常簡單。在使用 jQuery 手工操作 DOM 時，我們的代碼常常是命令式的、重復的與易錯的。Vue.js 擁抱數(shù)據驅動的視圖概念。通俗地講，它意味著我們在普通 HTML 模板中使用特殊的語法將 DOM “綁定”到底層數(shù)據。一旦創(chuàng)建了綁定，DOM 將與數(shù)據保持同步。每當修改了數(shù)據，DOM 便相應地更新。這樣我們應用中的邏輯就幾乎都是直接修改數(shù)據了，不必與 DOM 更新攪在一起。這讓我們的代碼更容易撰寫、理解與維護。
在放上實例之前，先回顧vue最常用那個的幾個模塊
1，條件渲染
v-if是一個指令，需要將它添加到一個元素上。但是如果我們想切換多個元素呢？此時我們可以把一個 <template>元素當做包裝元素，并在上面使用 v-if，最終的渲染結果不會包含它。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
另一個根據條件展示元素的選項是 v-show指令。用法大體上一樣：
<h1 v-show="ok">Hello!</h1>
不同的是有 v-show的元素會始終渲染并保持在 DOM 中。v-show是簡單的切換元素的 CSS 屬性 display。
注意 v-show不支持 <template>語法。
2，列表渲染
可以使用 v-for指令基于一個數(shù)組渲染一個列表。這個指令使用特殊的語法，形式為item in items，items是數(shù)據數(shù)組，item是當前數(shù)組元素的別名,在 v-for
塊內我們能完全訪問父組件作用域內的屬性，另有一個特殊變量 $index，正如你猜到的，它是當前數(shù)組元素的索引：
示例：
<ul id="example-2">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data:
{ parentMessage: 'Parent',
items: [ { message: 'Foo' }, { message: 'Bar' } ] }})
結果：
Parent - 0 - Foo
Parent - 1 - Bar
template v-for
類似于 template v-if，也可以將 v-for用在 <template> 標簽上，以渲染一個包含多個元素的塊。例如：
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
也可以使用 v-for遍歷對象。除了 $index之外，作用域內還可以訪問另外一個特殊變量 $key。
<ul id="repeat-object" class="demo">
<li v-for="value in object"> {{ $key }} : {{ value }} </li>
</ul>
new Vue({
el: '#repeat-object',
data: {
object: { FirstName: 'John', LastName: 'Doe', Age: 30 }
}})
結果：
FirstName : John
LastName : Doe
Age : 30
進入實例分析
這個實例是我為了感受下vue在工程上的巨大魔力，特意去網上看了工程，這個感覺是看了之后收益蠻多
主要需求如下：
需要拉取十個人的信息，包括封面圖，名字，票數(shù)，以及對應用戶是否進行了投票等信息，以及根據票數(shù)排序
正在直播的人在右上角會有一個提示
點擊支持的時候，需要反饋給后臺，并且前端這邊會有+1的動畫，之后重新拉取人物信息以及是否正在直播的狀態(tài)
每隔一段時間，拉取人物信息以及是否正在直播的狀態(tài)
這里就想到了使用下 vue.js 來構建，因為人物信息都是后臺拉取的json數(shù)據，前端需要展示，如果使用jquery來拼錯DOM結構，或者使用模板來寫，比如 BaiduTemplate ，都非常繁瑣。使用vue.js的v-for指令可以簡單的完成這個任務
一開始想要前端這邊進行排序，那么vue.js的orderBy指令也可以很簡單的完成排序功能，而不需要額外的代碼判斷（不過后來排序都通過后臺進行了，相應代碼會給出。）
拉取數(shù)據，進行前后臺交互，可以使用比較成熟的 vue-resource 代替jquery的$.ajax來操作。
數(shù)據會經常進行變化，使用vue.js這樣的MVVM框架，可以把重點放在數(shù)據的操作上，因為數(shù)據的更新也會讓DOM保持實時更新
剩下就是原文了
