摘要：在模板中放入太多的逻辑会让模板过重且难以维护。它会根据控件类型自动选取正确的方法来更新元素。指令需要使用的语法，指的是原数据数组，指的是迭代的数组元素。
注：本教程所使用的vue版本为 2.5.16
MVC与MVVM
MVC（Model-View-Controller）：
M指的是从后台获取到的数据， V指的是显示动态数据的html页面， C是指响应用户操作、经过业务逻辑处理后去更新视图的过程，在此过程中会导致对view层的引用。
这里我们发现我们网站的大量代码都被放在Controller，导致Controller代码臃肿；而且不利于单元测试，因为业务逻辑处理和视图更新操作会混杂在一起。
MVVM (Model-View-ViewModel)：
MVVM是MVC的一个衍生模型，这里的 ViewModel 把业务逻辑处理、用户输入验证等跟视图更新操作分离开了。MVVM是数据驱动的，我们只需要关心数据的处理逻辑即可，它会通过模板渲染去多带带处理视图的更新而不需要我们亲自去操作Dom元素。
实例化Vue对象
Vue会将渲染模板结合数据对象生成的html结构替换掉根节点，只要数据对象上的message发生改变，插值处的内容就会跟着改变，上述例子的实际效果如下：
message: hello world
模板语法
上面的双大括号绑定是vue最常用的数据绑定方式，除了双大括号还可以使用v-text属性进行绑定
message:
如果要绑定html结构的话，需要使用到v-html指令，否则vue会把这段html代码看成字符串直接绑定到对应位置
new Vue({
el: "#app",
data:{
message: "hello world",
html: "hello world"
},
template: "message: "
})
需要绑定html元素特性的时候需要使用v-bind指令，v-bind可以省略
双大括号的插值方法还可以使用js表达式，这些表达式会在所属 Vue 实例的数据作用域下被解析
{{ number + 1 }}
{{ boolean ? "true" : "false" }}
{{ message.split("").reverse().join("") }}
注意，这里的javascript语句只能是单个表达式，其他的声明变量、流程控制语法都不会生效
事件绑定
除了数据绑定外，vue还帮我们优化了事件绑定流程，指令为v-on，可缩写为@，后面是事件名称
打印1 打印1
仅仅一句js表达式是不够支撑我们的日常开发的，所以vue给我们提供了自定义事件处理方法
new Vue({
el: "#app",
data: {
message: "hello world"
},
//log为methods中定义的函数名，vue会默认把原生DOM事件对象当做参数传到处理函数中
template: "Click Me",
methods: {
log: function(event){
console.log(this.message);
event.stopPropagation();
}
}
});
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法
Click Me
计算属性 computed
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如这个字符串反转：
{{ message.split("").reverse().join("") }}
这种情况我们可以用 computed 解决
new Vue({
el: "#app",
data: {
message: "hello"
},
template: "{{ reversedMessage }}", //olleh
computed: {
reversedMessage: function(){
return this.message.split("").reverse().join("");
}
}
});
这里看渲染模板就直观多了
监听属性 watch
Vue 提供了 watch 这种通用的方式来观察和响应 Vue 实例上的数据变动
问题:
{{ answer }}
表单绑定，指令为 v-model
v-model 指令在表单 及