生命周期，axios以及动画

1.生命周期

1.1.什么是生命周期

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

1.2.vue生命周期钩子函数

每个Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期函数=生命周期事件=生命周期钩子

1，beforeCreate() 初始化之前，data里面的数据和methods里面的方法没有初始化 （ 作用：页面重定向）

2，created() data里面的数据和methods里面的方法已经初始化，第一个可以操作data和methods的生命周期（ 接口请求和数据初始化）

3，beforeMount() 虚拟的Dom挂载

4， mounted() 真实的Dom挂载，第一个可以操作Dom元素的生命周期

5，beforeUpdate() 更新之前，data里面的数据是新的，页面的数据是旧的 还未保持同步（ 执行0次或者更多次）

6，updated()更新之后 data里面的数据是新的，页面的数据是新的（ 执行0次或者更多次）

7，beforeDestroy() 销毁之前 （ 清空页面监听和定时器）

8， destroyed() 销毁之后

2.axios 的使用

2.1 常见的请求方式

• get，post，head，put，delete，connect，options，trace

2-2 post请求头有三种格式：

○ Content-Type:x-www-form-urlencoded

○ Content-Type:multipart/form-data

○ Content-Type:application/json

2.2axios封裝

3.Vue动画

3.1.使用过渡类名

3.1.1.HTML结构
3.1.2.VM 实例
3.1.3.定义两组类样式

3.2.使用第三方css动画库

3.2.1.导入动画类库
3.2.2.定义 transition标签 及属性

3.3.使用动画钩子函数

3.3.1.定义 transition 组件以及三个钩子函数
3.3.2.定义三个 methods 钩子方法
3.3.3.定义动画过渡时⻓和样式

3.4.v-for的列表过渡

3.4.1.定义过渡样式
3.4.2.定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来
3.4.3.定义 VM中的结构

3.5.列表的排序过渡

3.5.1.v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和

动画组件标签：transition:name,appear,css,type,mode,duration

默认过渡六个类名 v-enter,v-enter-active,v-enter-to,v-leave,v-leave-active,v-leave-to

自定义过渡的类名 enter-class,enter-active-class,enter-to-class（2.18+）

事件 before-enter,before-leave,before-appear

组件transition-group属性包裹多个元素， tag,move-class,除了mode，跟其他attribute和相同