什么是vue
前端框架的3马车
anguler 谷歌公司 m(数据)v(视图)c(控制器) 双向数据绑定
react facebook 视图层的框架view 虚拟dom
vue 尤玉溪 双向数据绑定+虚拟dom 是一套用于构建用户界面的渐进式框架 入门难度最低
为什么要学习vue
高效
1.运行效率高 采用虚拟dom
2.开发效率高 采用了组件化开发
将开发者的精力从dom操作解放出来，转移到数据操作上
dom操作是制约效率的关键，减少dom
修改内存中的数据（变量）消耗的资源远远小于dom操作
虚拟dom 就是一个内存中的一个对象 该对象有一个特点和dom有相同的结构
vue的实例化
```
1.下载引入
2.找一个dom元素 这个dom要被vue控制
3.在js中实例化vue
```
数据绑定
将data中的数据在视图中使用（
view） 这个过程叫数据绑定 data->view
正常的数据类型都可以绑定并显示 特殊的 null undefined 只能绑定不能显示
{{}} 插值法内部 放的是变量和表达式
条件渲染
v-if = '表达式或者是变量'
是一个指令 条件渲染 可以控制一个元素的渲染不渲染
<目标元素 v-if = '表达式或者是变量' ><目标元素/>
指令后面 跟的是变量或者是表达式
v-else 当v-if为假的时候 v-else 为真
当v-if为真的时候 v-else 为假
条件渲染
v-show 可以控制元素的显示隐藏
通过display none 不管是显示还是隐藏元素都是存在
v-if 控制元素的渲染 v-if为假 都不会被渲染
事件绑定
v-on:事件名 = '事件处理函数' 事件名和原生js一样
onclick v-on:click
onblur v-on:blur
事件处理函数一定要写在实例的methords内部
默认参数（什么参数都不传都有的参数）是事件对象
如果有其他参数，事件对象需要通过 $event 手动传递
v-on：click === @click
数据的响应式
数据变 页面自动变 不需要开发者操作dom
将开发者的精力从dom操作解放 转移到数据操作上
属性绑定
v-bind
属性后面跟的是固定字符串
属性绑定可以让属性后面跟变量或者表达式
简写 v-bind:src 0 :src
标签绑定
v-for 绑定一个标签 循环一个数据源
循环数组
<li v-for = '循环数据的每一项 in/of 要循环的数据'></li>
<li v-for = '(循环数据的每一项,每一项的下标) in/of 要循环的数据'></li>
循环对象
<li v-for = '(对象value,对象里的key,下标) in 要循环的对象'></li>
双向数据绑定
v-modol 相当于 事件绑定和属性绑定的综合
将input框的value 和 data里的数据进行绑定
可以绑定一个表单元素的value 修改表单元素的data 里的数据也会发生改变
v-modol 所有的表单元素都能用
组件也可用
