Vue
渐进式的JS框架。最核心的思想MVVM，数据的绑定。
如何使用
使用步骤：
1、引入vue.js
2、创建一个容器标签
3、创建一个Vue的实例对象，应该提供至少两个属性el，data
4、编写模板、编写事件处理函数。
模板的细节：
操作元素的文本内容、属性、样式、事件、表单元素
可以使用指令来操作这些内容，指令是13个
1、操作文本内容（5个指令）
把数据和标签进行绑定，把数据显示到标签内部。
{{ 变量 }} 插值表达式 要结合指令v-cloak指令使用，避免闪动
v-text
v-html
v-pre
v-once
2、操作表单元素的数据（1个指令）
v-model，双向数据绑定。
本质是，使用v-bind把变量和value属性绑定，监听表单元素的变更事件，当发生变化时，获取value的新值，赋值给变量。
文本框： v-model绑定变量和value属性
单选框： v-model绑定变量，并在每个选项中提供value值区分不同的选项。变量应该是一个值。
复选框： v-model绑定变量，并在每个选项中提供value值区分不同的选项。变量的值应该是一个数组，数组中存放的是选中状态的选项的value的值。
下拉列表中： select标签中使用v-model绑定变量。需要为每个option标签指定value属性。在单选下，v-model应该绑定一个值。如果多选情况，应该绑定一个数组。
文本域： 使用v-model绑定变量。
3、操作元素的属性
v-bind:属性名 = "变量"
实现了元素的属性和变量之间的绑定，变量发生改变，元素的属性也跟着变化。
a标签的href， img标签的src
4、操作元素的样式：就是用v-bind操作class属性和style属性
v-bind:class = "变量"
变量可以是数组或者对象：
data:{
arrClasses: ["current"], // 只需要把需要添加的类样式名以字符串的形式放入数组中
objClasses: {
类样式名： boolean, // 类样式名有或者没有，如果为true则有这个样式
}
}
v-bind:style = "变量"
变量最好是一个对象
data:{
objStyles: {
CSS样式: "css的值"
}
}
5、操作元素的事件
v-on:事件名称 = "事件处理函数或JS语句"
调用事件处理函数时，有两种调用方式：
1、直接写函数名，不进行调用。 v-on:click = "handle"
当事件触发时，Vue会调用handle处理函数，并把事件对象作为参数传递到事件处理函数
2、直接调用事件处理函数，并传递参数。v-on:click = "handle(参数)"
当事件触发时，我们自己调用事件处理函数，可以自己决定传递哪些参数到事件处理函数。如果需要使用事件对象，可以直接在参数列表的最后使用$event将事件对象传递给事件处理函数。
事件修饰符： .stop .prevent
按键修饰符: .enter .esc .delete
另外的5个指令：
分支语句相关的指令
v-if
v-else-if
v-else
v-show
循环语句相关的指令
v-for
遍历数组： v-for="(item, index) in arr"
遍历对象: v-for="(value, key, index) in obj"
注意：一定要加上:key帮助vue加快查找速度
Vue的特性
自定义指令
自己定义的指令，补充内置指令的不足。
基本语法：
Vue.directive("指令名称不带v-", {
// 指令主体
inserted: function(el){ // 这个函数会在元素插入到父元素中的时候执行
// 参数中第一个是el 也就是绑定这个指令的元素对象
}
})
使用：
高级语法：
Vue.directive("指令名称不带v-", {
// 指令主体
inserted: function(el, binding){ // 这个函数会在元素插入到父元素中的时候执行
// 参数中第一个是el 也就是绑定这个指令的元素对象
// binding就是获取指令绑定到元素对象时的所有的数据
// binding.expression // 获取=后面的整个内容，格式是字符串
binding.value // 把=后面的内容当成js代码进行执行之后，获取执行的结果
{ active: true }
如果后面放变量名, value获取的就是变量的值。
// v-on:click="handle" click可以使用binding.arg获取到
}
})
使用：
data:{
msg: {
color: "red"
}
}
局部指令：定义的位置是在Vue实例中
new Vue({
directives: { // 局部自定义指令
指令名: {
// 指令内容
inserted: function(el, binding){
// 指令的内容
}
}
}
})
计算属性
计算属性跟data中的数据是同样的用法。计算属性实际是一个函数，通过对data中固定的数据进行运算，返回一个值，这个值就是计算属性显示的值。如果data中的数据发生了改变，计算属性会重新进行计算，返回新的值。计算属性可以弥补data中数据的不足。计算属性如果原始的数据没有发生变化，是不需要进行重新计算，所以有缓存。
语法：
new Vue({
computed: {
计算属性名: function(){
return 值;
}
}
});
{{ 计算属性名 }}
侦听器
监控属性（变量）的值的变化，一旦变化，可以执行一些操作、行为。
语法：
new Vue({
watch: {
属性名: function(){
// 执行一些操作，可以是ajax请求。
}
}
})
过滤器
就是对传入的数据进行加工处理
语法：
Vue.filter("过滤器名", function(value){
return 处理过的值
})
new Vue({
filters: {
过滤器名: function(value){
return 处理过的值
}
}
})
Vue实例的生命周期(钩子函数)
创建对象阶段：
beforeCreate
created
挂载虚拟DOM阶段：
beforeMount:
mounted:
数据发生变化，更新阶段
beforeUpdate
updated
销毁阶段：
beforeDestroy
destroied
Vue实例对象创建过程中可以使用的属性
new Vue({
el: // 元素选择器
data: // 数据对象
methods: // 方法对象，方法目的，是为了实现行为。
directives: // 指令对象
computed: // 计算属性对象，目的是为了弥补data中数据的不足。computed可以直接当做data中的数据来使用
watch: // 侦听器对象
filters: // 过滤器的对象
})