vue
Vue.js (读音 /vjuː/，类似于 view)
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
采用自底向上增量开发的设计。Vue
的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue
生态系统支持的库结合使用时，Vue
也完全能够为复杂的单页应用程序提供驱动。
Vue.js 提供了 MVVM
(Model-View-ViewModel的简写)数据绑定和一个可组合的组件系统，具有简单、灵活的
API。
MVVM: 它采用双向绑定（data-binding）：View的变动，自动反映在
ViewModel，反之亦然。
Vue框架有以下特点:
简洁： HTML 模板 + JSON 数据。
数据驱动： 自动追踪依赖的模板表达式和计算属性。
组件化： 用解耦、可复用的组件来构造界面。
轻量： ~24kb min+gzip，无依赖。
快速： 精确有效的异步批量 DOM 更新。
模块友好： 通过 NPM 或 Bower 安装，无缝融入你的工作流。
一.Vue模板语法
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的：
var app = new Vue({
});
准备html：
{{message}}
在Vue的html中使用{{}}来获取组件定义的data数据，页面中引用Vue.js搭建好Vue环境,开始准备使用Vue:
页面显示效果:
一个 Vue 应用由一个通过 new Vue 创建的根 Vue
实例,el(element)代表要绑定html代码片段的根元素,data定义该代码片段上绑定的数据。
1、插值
数据绑定最常见的形式就是使用"Mustache"语法 (双大括号) 的文本插值：
Mustache
标签将会被替代为对应数据对象上 message属性的值。无论何时，绑定的数据对象上 message属性发生了改变，插值处的内容都会更新。
2、JavaScript表达式
在Vue模板中，提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
注意，只能在模板中写入表达式，而不能使用js语句，所以下面的写法会报错:
{{ var a = 1 }}
{{ if (ok) { return message } }}
二、指令
指令 (Directives)
是带有 v- 前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于
DOM。
1）文本渲染
1、v-text
在html中插入数据，跟{{}}功能一致：
{{msg}}
响应属性：
除了在Vue组件内部定义data外，可以在外部定义一个对象，在内部直接引用。
{{msg}}
`此时Vue组件内部的data属性与外部数据引用一致，通过组件名如上边的app.msg
进行访问。内部数据改变会影响原始数据，原始数据的修改同样会影响组件的内部状态。
2、v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
{{msg}}
{{msg}}
在控制台中修改data中msg的值会发现，使用v-once命令的元素不再发生变化。
3、v-html
把文本内容进行解析，生成html结构并渲染。
{{msg}}
2）class与style绑定
1、v-bind
v-bind指令可以绑定元素的属性，动态给属性赋值。比如：v-bind:class、v-bind:style、v-bind:href形式。
v-bind的简写形式：v-bind: 简化为 : ，上边的形式可以改写成：
:class、:style、:href
2、class绑定
通过 v-bind:class 一个对象，以动态地切换 class：
绑定对象中active是css样式class的名称，isActive控制是否添加样式，true添加false不添加。假定
data:{
isActive: true
}
页面渲染结果为：
绑定DOM对象的class样式有以下几种形式：
绑定多个class
使用对象classObject绑定
使用数组classList绑定
绑定的对象可以同时切换多个class：
data: {
isActive: true,
hasError: false
}
可以直接传入classObject，不必写成内联形式：
data: {
classObject: {
active: true,
'text-danger': false
}
}
可以使用数组传入一个classList：
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
实例：form表单校验
用户名:
{{errorText}}
3.style绑定
绑定形式跟class一致：
使用内联对象Object
直接传入对象styleObject
使用数组对象styleList
内联对象形式：
我是文本
直接传入对象styleObject：
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
直接传入数组array：
我是文本
3）事件处理
1、监听事件
用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。使用形式：
v-on:click，简化形式：@click
点击次数:{{count}}
2、方法事件处理器
一般来说事件会绑定一个方法，在方法内部处理相关的事件逻辑。需要在methods属性中定义方法，然后v-on引用对应相关的方法名。
3、$event对象
在事件处理函数中访问DOM原生事件event对象，可以使用特殊变量$event对象传入。
4、事件修饰符
在事件处理程序中调用 event.preventDefault() 或
event.stopPropagation() 是非常常见的需求。为了解决这个问题，Vue.js
为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。
stop ： 阻止event冒泡，等效于event.stopPropagation()
prevent ： 阻止event默认事件，等效于event.preventDefault()
capture ： 事件在捕获阶段触发
self ： 自身元素触发，而不是子元素触发
once ： 事件只触发一次
stop ：
- 子元素
- 子元素
点击上面的li会同时触发父元素ul的click的执行，所以会打印2次。点击下面的li只打印1次，由于阻止了事件进行冒泡，所以只会触发li本身事件的执行。
prevent ：
此时点击标签链接不会发生跳转,因为阻止了a标签的默认点击事件。
capture ：
- 子元素
- 子元素
事件执行默认是在冒泡阶段触发，在点击上边的li时，先触发子元素li执行后触发父元素ul执行，打印：子元素
父元素。下边ul和li指定在捕获阶段触发，那么首先会触发父元素ul执行后触发子元素li执行，打印：父元素
子元素。
self ：
- 子元素
- 子元素
点击上边的li会触发父元素ul的执行，而下边不会，子元素点击不会触发父元素事件执行。
once：
- 子元素
点击li触发事件的执行，只会触发一次，后续点击就不会触发了。
5、键值修饰符
在监听键盘事件时，我们经常需要监测常见的键值。Vue
允许为 v-on 在监听键盘事件时添加关键修饰符：
v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
v-on:keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获"删除"和"退格"键)
.esc
.space
.up
.down
.left
.right
简单看一下enter(13)和delete的使用:
enter 键
enter 键
delete 删除键
4）条件渲染
1、v-if
根据if绑定值得true或者false进行渲染
你能看见我!
控制设置seen为false则HTML元素被隐藏。
2、v-else
需要配合v-if使用，显示一个相反的情况。
你能看见我!seen: {{seen}}
seen: {{seen}}
3、v-else-if
配合v-if一起使用，来做一个条件判断
年龄:12
年龄:18
不是12和18
4、v-show
根据条件渲染html，使用类似v-if
你能看见我!
5、v-if 和 v-show
两者的区别是v-if是"真正"的条件渲染，只有为true时才会被渲染。v-if也是"惰性"的，假如初始条件为false，那么条件变为true时才会发生第一次渲染。
v-show只是CSS的display属性的切换，不论初始条件是否成立，都会进行html渲染，然后改变display的值为none或者b0lock。
一般来说v-if开销比较大，如果需要频繁切换显示不显示使用v-show，需要进行条件判断的但是改变很少的使用v-if。
5）列表渲染
1、v-for
可以把一组值进行列表渲染，语法形式： item in
items，items 是源数据数组并且 item 是数组元素迭代的别名。
- {{item.name}}
在 v-for 块中，对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
- {{type}} == {{item.name}} == {{index}}
v-for也可以遍历对象，可以指定三个形参:
形式: v-for="(value, key, index) in object"
value: 对象的值
key: 对象的键
index: 遍历的索引
-
{{index}} == {{key}} == {{value}}
2、key属性
用 v-for渲染列表时，
使用key属性给每个指定一个唯一的ID表示，那么可以在下次数据渲染时，提高渲染速度。它默认用"就地复用"策略。
如果数据项的顺序被改变，重复ID的元素将会被再次使用，不会重新渲染。这个默认的模式是高效的。需要用 v-bind 来绑定动态值
(在这里使用简写)：
- {{item.name}}
3、取值范围
v-for也可以指定整数，用来重复多次使用模板。
- 第 {{i}} 次
6）表单输入绑定
用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择
Vue 实例数据来作为具体的值。通过 JavaScript
在组件的 data 选项中声明初始值。
1、文本 text
message: {{message}}
2、复选框
单个使用时v-model是逻辑值：true和false，多个一起使用需要指定value值，选中结果绑定v-model的数组。
是否选中: {{checked}}
多选结果：{{lesson}}
3、单选框
是否喜欢: {{love}}
4、选择列表
结果: {{selected}}
使用v-for指令渲染列表，增加选项的value并指定默认值。
结果: {{selected}}
5.修饰符
使用v-model绑定数据后，可以使用修饰进行数据处理：
.lazy：绑定数据默认实时更新，lazy可以在onChange触发
.number：返回数字类型的值，转换不成返回NaN
.trim：去除数据的前后空格
实例：
var app = new Vue({
el: '#app',
data: {
name:'hello',
age:12,
cont:''// shang hai
},
methods:{
show:function(){
console.log(this.name, this.age, this.cont);
console.log(typeof this.age);//number
}
}
});