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()