Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 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指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为item in items，items是数据数组，item是当前数组元素的别名,在 v-for
块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：
示例：
<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在工程上的巨大魔力，特意去网上看了工程，这个感觉是看了之后收益蛮多
主要需求如下：
-
需要拉取十个人的信息，包括封面图，名字，票数，以及对应用户是否进行了投票等信息，以及根据票数排序
-
正在直播的人在右上角会有一个提示
-
点击支持的时候，需要反馈给后台，并且前端这边会有+1的动画，之后重新拉取人物信息以及是否正在直播的状态
-
每隔一段时间，拉取人物信息以及是否正在直播的状态
这里就想到了使用下 vue.js 来构建，因为人物信息都是后台拉取的json数据，前端需要展示，如果使用jquery来拼错DOM结构，或者使用模板来写，比如 BaiduTemplate ，都非常繁琐。使用vue.js的v-for指令可以简单的完成这个任务
一开始想要前端这边进行排序，那么vue.js的orderBy指令也可以很简单的完成排序功能，而不需要额外的代码判断（不过后来排序都通过后台进行了，相应代码会给出。）
拉取数据，进行前后台交互，可以使用比较成熟的 vue-resource 代替jquery的$.ajax来操作。
数据会经常进行变化，使用vue.js这样的MVVM框架，可以把重点放在数据的操作上，因为数据的更新也会让DOM保持实时更新
剩下就是原文了
网友评论