Vue 整理
一.什么是vue
概述：Vue是一款前端渐进式框架，可以提高前端开发效率。
特点：
Vue通过MVVM模式,能够实现视图与模型的双向绑定。
简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
二.条件指令
指令语法，用来解析标签（标签属性，标签体内容）在内联样式表直接调用 ，都以v-开头
1.v-bind
v-bind是单向绑定，用于动态绑定属性。简写：
1.当元素的属性值要求为变量时，我们可以使用v-bind来修饰属性
2.v-bind修饰的属性值里，可以写js表达式
3.当 v-bind的属性值为对象时会将对象展开作为标签的属性，优先级要注意，v-bind赋予的属性优先级始终最低
2.v-model
v-model双向绑定，只能用于表单类元素。进行双向绑定后，即可与vue实例中的数据进行实时变换。
作用：双向数据绑定
原理：当表单元素内容被修改时，触发对应的表单事件，在事件中完成对数据的修改
这里引入一个新的变量 ref
ref如果绑定在DOM元素上，会将该元素记录在$refs上，通过this.$refs即可获得到DOM元素
3.v-text与v-html
v-text与v-html的区别：1.v-text显示文本内容，但是不能对标签进行转义
2.v-html显示文本内容，可以对标签进行转移
4.v-on绑定事件
v-on:click=" fn()" click可以换成任意的事件，从而使我们完成点击事件，键盘事件。简写为@click="fn()"
键盘事件中有事件修饰符通过 .enter回车 .delete 删除 .esc退出 .space空格 .tab切换 来触发事件
vue.config.keyCode.自定义名字=键名
在事件中$envent,函数传参e 通过e.target可以找到对应的元素
5.v-if·v-show 与v-for
1.v-if="判断条件" v-else-if=“ 判断条件” 对其进行条件判断进行渲染
2.v-show=“判断条件” 在内联样式中 判断是否显示 会明显看到display="none"
3.v-if与v-show的区别
v-if 是渲染或不渲染 如果不渲染 在html中找不到这个标签
v-show 是显示或不显示 在html中可以找到这个标签
4.v-for=“（item，index）in list ” 对list进行遍历，用于动态生成标签 这里index是唯一的，我们可以通过index找到对应的元素
三.数据代理
数据代理：通过一个对象代理对另一个对象中属性的操作
数据代理的好处：更加方便的操作data中的数据
数据代理的基本原理：通过Object.defineProperty()把data对象中所有属性添加到vue上，为每一个添加到vue实例对象上的属性，都指定一个getter/setter，在getter与setter中去操作data中对应的属性
在data中添加任意属性：this.$set(this.list,'sex','男')
四.事件修饰符
.prevent 阻止默认 .stop 阻止冒泡 .once 只触发一次 .capture 事件捕获 .enter回车 .delete 删除 .esc退出 .space空格 .tab切换
五.vue实例对象的属性
通过new Vue({
el:"#app"
})创建一个vue实例对象
其中还有data属性，methods，computed ，watch属性
1.methods属性
methods 方法表示一个具体的操作，主要书写业务逻辑；
2.computed属性
computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用；
3.watch属性
watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体；
六.钩子函数
钩子函数指在一个vue实例从创建到销毁的过程自动执行的函数
beforeCreate() 实例创建前触发
created（）实例创建完整
beforeMount（）模板渲染前完成
mounted（）模板渲染完成触发
beforeUpdate（）数据修改前
updated（）数据修改完成
activated（）激活前
deactivated（）激活后
beforeDestroy（）销毁前
destoryed（）销毁后
七.网络请求
网络请求 在之前我们都是使用ajx进行后台数据处理，vue使用的是fetch与axios，但是他们的本质还是promise
fetch().then().catch()
axios().then().catch()