什么是Vue
Vue是数据驱动的前端框架，它无需开发者手工操作DOM，而是通过DOM与数据绑定的方式，一旦数据被更新则DOM也会同步进行更新。
怎么使用Vue
使用Vue需要完成三个过程
1. 定义View，其实就是DOM
2. 定义Model，就是要绑定的数据
3. 定义Vue对象用于绑定View和Model
用法示例
- 定义View
<div id="myapp">
{{message}}
</div>
- 定义Model
var model = {
message: "Hello Vue.js"
}
- 定义Vue对象
var vw = new Vue({
el: "#myapp", //通过el属性指定要绑定的view
data: model //通过data属性指定要绑定的model
});
当然，定义Model和定义Vue可以合并在一起
var vw = new Vue({
el: "#myapp",
data: {
message: "Hello Vue.js"
}
});
以上view中{{message}}的写法是Vue中最基本的插值写法，就是使用model中message变量的值替换该标记，最后页面DOM显示如下：
<div id="myapp">
Hello Vue.js
</div>
可以通过model.message = "Goodbye"或者vw.message = "Goodbye"修改model的值，则页面DOM同步显示更新后的消息。
Vue常用语法
插值
最常用的插值方式就是通过双大括号的方式{{message}}，但是该方式不能用于HTML属性，如果要动态绑定HTML的属性就需要使用v-bind指令，例如指定某个元素的id属性为model中dynamicId属性的值，写法如下：
<div v-bind:id="dynamicId"></div>
注：插值方式同样支持JavaScript方式指定，比如{{message + ' hello vue.js'}}
指令
指令就是特殊标记的HTML属性，vue的指令都是以v-打头，常用指令如下：
-
v-if
v-if是条件渲染指令，它的语法格式为：
v-if="iftrue"，其中iftrue是一个返回布尔值的表达式（也可以直接是布尔类型的值），只有当返回值为true时才渲染该DOM，否则生成的DOM树中无此元素。 -
v-show
v-show类似与v-if，只是返回值决定是否显示该元素
-
v-else
为v-if添加else块，语法格式为：
v-else，其前一个元素必须为v-if或v-else-if -
v-else-if
组合if链，语法格式为：
v-else-if="iftrue"，其前一个元素必须为v-if或v-else-if -
v-for
循环指令，语法格式为：
v-for="item in items"，其中items可以是数组或者对象，详细用法如下：<div v-for="item in items"></div> <div v-for="(item, index) in items"></div> <!-- 使用item和index来遍历数组 --> <div v-for="val in object"></div> <div v-for="(val, key) in object"></div> <!-- 使用key和value来遍历对象 --> <div v-for="(val, key, index) in object"></div> <!-- 使用key、value和index来遍历对象 --> -
v-bind
为HTML元素绑定动态属性，语法格式为
v-bind:id="dynamicId"，更多用法如下：<div v-bind:id="dynamicId"></div> <div v-bind:class="{classA}"></div> <!-- model中定义了名字为classA的属性 --> <div v-bind:class="{classA: isA}"></div> <!-- 根据isA的值决定是否使用classA --> <div v-bind:class="[classA, {classB: isB}]"></div> <!-- classA一直用，isB决定是否用classB --> <div v-bind:class="['class-a', {'class-b': isB}]"></div> <!-- 与上一个区别是class名字是指定的(引号) --> -
v-on
绑定时间监听，只能监听原生的DOM事件，语法格式为：
v-on:click="doSomething" -
v-model
用于创建view和model的双向绑定（由元素的值来设置model的值），支持的元素有
input，select和textarea -
v-text
差值的指令写法，语法格式为：
v-test="msg"，不过该指令会覆盖元素的整个textContent，如果只是修改部分内容则使用插值方式
缩写
Vue为最常用的两个指令提供了缩写方式：
-
v-bind 缩写为
: -
v-on 缩写为
@所以如下示例等价：
<a v-bind:href="url"></a> <!-- 完整写法 --> <a :href="url"></a> <!-- 缩写写法 --> <a v-on:click="doSomethind"></a> <!-- 完整写法 --> <a @click="doSomethind"></a> <!-- 缩写写法 -->
更多用法请参照Vue官网API：https://cn.vuejs.org/v2/api/