三大新框架：Angular.js、React.js、Vue.js。今天我们来磕这个最常用，影响极广的框架：Vue.js。
Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。
Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。
Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统。
1.快速上手
还是从最基本的使用开始回顾。
第一步，需要实例化一个 Vue 对象，像下面这样：
var vm = new Vue({ el: '#app', data: {message:'hello world!'} });
html 页面中 id 为 app 的标签就可以通过模版语法接收到此消息：
<divid="app">{{ message }}</div>
是不是很眼熟？没错，和我们 python 后端的模版语法一样，所以就不要抵触，开开心心使用吧。
当然，我们还可以在 Vue 实例化过程中定义方法，如下：
var vm = new Vue({ el: '#app', data: {message: 'hello world!'}, methods:{ fnChangeMsg:function(){ this.message = 'hello Vue.js!' } } });
我们可以使用下面的页面感受它的 响应式 ：
<div id="app"> <p> {{ message }} </p> <button @click="fnChangeMsg"> 点击即可改变数据 </button> </div>
下面我们分析一下这个阶段发生了什么：
首先，当创建一个 Vue 实例时，它会把 data 对象中所有属性添加到 Vue 的响应式系统中。当这些属性的值发生变化，视图将会匹配到更新之后的值。上面的例子，通过一个方法，改变 data 对象中的属性，使视图中的值随之变化，演示了响应式。
2.模版语法
模版语法的作用就是获取数据，并在 HTML 页面中进行展示。
所有 Vue.js的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
2.1 插入值
1.最最常见的一种是胡子语法，即双大括号，也就是上面示例中的样式。除了可以获取值，大括号中还支持写表达式：
{{ number + 1 }} {{ ok ? 'YES' : 'No' }} {{ message.split('').reverse().join('') }}
2.还有一种情况，标签的属性需要获取值，这时就不能再次使用胡子语法了，可以改写为 v-bind 指令：
<av-bind:href="url"vbind:title="tip">小闫劝你多喝热水</a>
2.2 指令
Vue 中指令就是带有前缀 v- 前缀的特殊属性。
指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
常见的指令有 v-bind、 v-if、 v-on 和 v-for。下面举两个例子进行演示即可：
<!-- 根据 ok 的布尔值来插入/移除 <p> 元素 --> <p v-if="ok"> 是否显示这一段 </p> <!-- 监听按钮的 click 事件来执行 fnChangeMsg 方法 --> <button v-on:click="fnChangeMsg"> 按钮 </button>
2.3 缩写
v-bind 和 v-on 事件这两个指令因为经常的使用，所以提供了简写的方式：
<!-- 完整的语法形式 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> <!-- 完整的语法形式 --> <button v-on:click="fnChangeMsg"> 按钮 </button> <button @click="fnChangeMsg"> 按钮 </button>
2.4 Class 属性设置
设置元素的 class 属性可以使用 v-bind 指令。因为它们的属性值可以是表达式，vue.js在这一块做了增强。表达式结果除了是字符串之外，还可以是对象或者数组。
2.4.1 对象的情况
<div class="static" v-bind:class="{active:isActive,'text-danger':hasError }"></div>
data 的属性值是：
data: { isActive: true, hasError: false }
最终渲染的效果：
<divclass="static active"></div>
也可以给 v-bind:class 传一个对象引用
<divv-bind:class="classObject"></div>
data 属性值可以写成：
data: { classObject: { active: true, 'text-danger': false } }
2.4.2 数组的情况
<div v-bind:class="[activeClass, errorClass]"></div> ...... data: { activeClass: 'active', errorClass: 'text-danger'
}
最终渲染为：
<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
即当 isActive 值为 ture 时，属性为 activeClass，否则属性值为 ''
Js 的三元表达式：
条件?为真时的结果:为假时的结果
2.5 条件
一般通过条件指令来控制元素是显示还是隐藏，是创建还是销毁。
虽然语法有些许陌生，但是永远逃不了 if 、else if 、else 这三个东西，所有语言都是如此。那么我们来分情况看一下这三种情况如何书写：
2.5.1 v-if
v-if 可以控制元素的创建或者销毁
<h1v-if="ok">Yes</h1>
2.5.2 v-else
v-else 指令来表示 v-if 的 else块，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div>
2.5.3 v-else-if
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>
2.5.4 v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法和 v-if 大致一样，但是它不支持 v-else ,它和 v-if 的区别是，它制作元素样式的显示和隐藏，元素一直是存在的：
<h1v-show="ok">Hello!</h1>
2.6 列表循环
数一数，常用的指令还有俩，那快解决吧。
一种常用的情况--列表渲染，即通过遍历数组或者对象，渲染到页面中。这时就需要用到一个指令 v-for。同样我们通过数组和对象两种情况进行演示：
遍历数组
<ul id="example-1"> <li v-for="item in items"> {{ item }} </li> </ul>
vue对象创建如下：
var example1 = new Vue({ el: '#example-1', data: { items: ['foo','bar'] } })
如果想加上索引值，可以加上第二个参数
<ul id="example-2"> <li v-for="(item, index) in items"> {{ index }} - {{ item.message }} </li> </ul>
遍历对象
也可以用 v-for 通过一个对象的属性来迭代
<ul id="v-for-object"> <li v-for="value in object"> {{ value }} </li> </ul>
如果想加上对象属性名，可以加上第二个参数
<ul id="v-for-object"> <li v-for="(value,key) in object"> {{ key }}-{{ value }} </li> </ul>
2.7 事件相关
2.7.1 事件绑定方法
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
事件的处理，简单的逻辑可以写在指令中，复杂的就需要在 vue 对象的 methods 属性中指定处理函数。
<div id="example-1"> <!-- 在指令中写处理逻辑 --> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> ...... var example1 = new Vue({ el: '#example-1', data: { counter: 0 } })
methods 属性中指定处理函数：
<div id="example-2"> <!-- greet 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div> ...... var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function () { // `this` 在方法里指向当前 Vue 实例 alert('Hello ' + this.name + '!') } } })
2.7.2 事件修饰符
实际开发中，事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为，在 vue.js 可以加上事件修饰符
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form>
