Vue
渐进式框架，采用自底向上的增量开发，Vue关注视图层
MVVM
Model-View-ViewModel
采用双向数据绑定，改变数据影响元素，反之亦然。
如何使用Vue：
1、引入Vue的核心JS文件
2、准备Dom结构
3、实例化组件
通过el属性，挂载元素，绑定id为app的html元素
通过data属性，定义数据，可以在html代码段中显示的数据
4、获取数据
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
指令 (Directives)
是带有 v- 前缀的特殊属性。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
v-text:
显示数据，响应式（默认）
简写：{{}}
v-once:
数据只会更新一次，下次更新数据不影响dom
v-html:
可以显示html元素
v-bind
v-bind指令可以绑定元素的属性，动态给属性赋值。
比如：v-bind:class、v-bind:style、v-bind:href形式。
v-bind的简写形式：
v-bind:属性名="组件中定义的数据"
简化为 :
:属性名="组件中定义的数据"
上边的形式可以改写成：
:class、:style、:href
class绑定
绑定DOM对象的class样式有以下几种形式：
绑定多个class
使用对象classObject绑定
使用数组classList绑定
绑定的对象可以同时切换多个class
对象和数组绑定的区别：
对象可以控制class的添加和删除；数组不能控制删除
style绑定
绑定形式跟class一致：
使用内联对象Object
直接传入对象styleObject
使用数组对象styleList
绑定事件
语法：
v-on:事件名
简写：
@事件名
绑定事件
语法：
v-on:事件名
简写：
@事件名
方法事件处理器
一般来说事件会绑定一个方法，在方法内部处理相关的事件逻辑。
需要在methods属性中定义方法，然后v-on引用对应相关的方法名。
事件修饰符
在事件处理程序中调用 event.preventDefault()（阻止元素发生默认行为） 或 event.stopPropagation()（阻止事件冒泡到父元素） 是非常常见的需求。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。
stop ： 阻止event冒泡，等效于event.stopPropagation()
prevent ： 阻止event默认事件，等效于event.preventDefault()
capture ： 事件在捕获阶段触发
self ： 自身元素触发，而不是子元素触发
once ： 事件只触发一次‘
’键值修饰符
在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：
enter
tab
delete (捕获“删除”和“退格”键)
esc
space
up
down
left
right
条件渲染
1、v-if
当条件返回true时，执行
2、v-else
当if条件不满足时，执行（要结合v-if一起使用）
3、v-else-if
当满足条件时执行（要结合v-if一起使用）
4、v-show
满足条件时显示，不满足隐藏
v-if 和 v-show
两者的区别是v-if是“真正”的条件渲染，只有为true时才会被渲染。v-if也是“惰性”的，假如初始条件为false，那么条件变为true时才会发生第一次渲染。
v-show只是CSS的display属性的切换，不论初始条件是否成立，都会进行html渲染，然后改变display的值为none或者block。
一般来说v-if开销比较大，如果需要频繁切换显示不显示使用v-show，需要进行条件判断的但是改变很少的使用v-if。
列表渲染
v-for
可以把一组值进行列表渲染，语法形式： item in items，
items 是源数据数组并且 item 是数组元素迭代的别名。
在 v-for 块中，对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
v-for也可以遍历对象，可以指定三个形参:
形式: v-for="(value, key, index) in object"
value: 对象的值
key: 对象的键
index: 遍历的索引
v-model
用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中声明初始值。
单个使用时v-model是逻辑值：true和false，多个一起使用需要指定value值，选中结果绑定v-model的数组。
v-model
用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中声明初始值。
单个使用时v-model是逻辑值：true和false，多个一起使用需要指定value值，选中结果绑定v-model的数组。
修饰符
使用v-model绑定数据后，可以使用修饰进行数据处理：
lazy：绑定数据默认实时更新，lazy可以在onChange触发
number：返回数字类型的值，转换不成返回NaN
trim：去除数据的前后空格
组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
1、定义组件
Vue自定义组件分为两种：全局注册和局部注册，全局组件可以在任何地方引用，局部组件只能在当前Vue实例使用。
1）全局注册
使用Vue.component(tagName, options)来定义：
1）局部注册
在Vue实例中使用components属性来定义：
注意：HTML 特性是不区分大小写的，所有在定义组件时尽量使用中划线“-”来指定组件名。
即使，使用了驼峰标示命名如：myComponent，在页面引用时仍然要使用
组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
1、定义组件
Vue自定义组件分为两种：全局注册和局部注册，全局组件可以在任何地方引用，局部组件只能在当前Vue实例使用。
1）全局注册
使用Vue.component(tagName, options)来定义：
1）局部注册
在Vue实例中使用components属性来定义：
注意：HTML 特性是不区分大小写的，所有在定义组件时尽量使用中划线“-”来指定组件名。
即使，使用了驼峰标示命名如：myComponent，在页面引用时仍然要使用进行引用。
is属性
在table标签中直接使用自定义组件，无法正常显示。DOM解析时会解析到标签的外部：
原因是：table/ol/ul/select 这种html标签有特殊的结构要求,不能直接使用自定义标签。他们有自己的默认嵌套规则，比如:
table> tr> [th, td];
ol/ul > li;
select > option
模板
当模板的html结构比较复杂时，直接在template属性中定义就不现实了，效率也会很低，此时我们可以使用模板，定义模板的四种形式:
1)直接使用字符串定义
2)使用
3)使用标签
4)使用.vue组件，需要使用模块加载机制
在使用直接字符串模板时、x-template和.vue组件时,不需要is进行转义。