Vue第三天（生命周期，钩子函数，axios请求）

目录

一、vue的生命周期

1、什么是生命周期

2、vue生命周期钩子函数

3、vue生命周期

1.beforeCreate()：

2.created() ：

3.beforeMount()：

4.mounted()：

5.beforeUpdate()：

6.updated()：

7.beforeDestroy()：

8.destroyed()：

二、vue-resource接口请求

1、get请求：

2、post请求： 

三、 axios的使用

四、vue中的动画

1、使用过渡类名使用 transition 将需要过渡的元素包裹起来 

2、使用第三方css动画库

3、使用动画钩子函数

四、v-for的列表过渡

五、列表的排序过渡

---

一、vue的生命周期

1、什么是生命周期

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

2、vue生命周期钩子函数

将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数（生命周期函数=生命周期事件=生命周期钩子）

3、vue生命周期

1.beforeCreate()：

一般用于页面重定向

2.created() ：

一般用于接口请求 ，数据初始化

3.beforeMount()：

页面数据未更新，在内存中已经解析好模版，虚拟dom

4.mounted()：

页面更新完成，需要依赖dom的操作，在此完成

5.beforeUpdate()：

触发0次或多次，数据更新前

6.updated()：

数据更新后

7.beforeDestroy()：

组件销毁前，清除定时器还有页面监听

8.destroyed()：

组件销毁后

二、vue-resource接口请求

先引用Vue的脚本文件，再引用vue-resource的脚本文件

<script src="./vue-2.4.0.js"></script>
<script src="./vue-resource-1.3.4.js"></script>

1、get请求：

this.$http.get("url?data").then(
                (res)=>{
                    this.arr = res.data
                }
            )

2、post请求： 

// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded