vue-day03

一、vue生命周期

首先，生命周期？
官网：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了什么。

官方文档如下：

 

英文看不懂，但中文可以

 vue的声明周期有八个阶段

1.beforeCreated（初始化前）        在此阶段，刚初始化了一个Vue的空的实例化对象，这时候，这个对象上，只有默认的一些生命周期函数和和默认的事件，其他的东西都未创建，此时，data和methods中的数据都还未初始化。        此阶段常用语页面重定向。

2.created（初始化完成）        在此阶段，data和methods都被初始化完成。当需要操作data中的数据或调用methods中的方法，最早可在created中操作或调用。        此阶段常用语接口请求，数据初始化。

3.beforeMount（挂载前）        在此阶段，模板已经在内存中编译好了，但是还没有挂载到页面中，此时页面仍然是旧的。

4.mounted（挂载完成）        由创建阶段进行到运行阶段，页面更新，如果需要操作页面上的DOM节点，最早要在mounted中进行。执行完mounted之后，表示整个Vue实例化完成。

5.beforeUpdate(更新前)        在此阶段，即数据更新前，此时，页面展示的数据仍然是旧的，但data中的数据已经是最新的，页面和最新的数据还没有同步。需要注意的是，其他阶段只执行一次，但beforeUpdate和updated可以执行0次或多次

6.updated（更新后）        在此阶段，数据更新后，页面展示的数据和data中的数据完成同步，都是最新的。

7.beforeDestory（销毁前）        从运行阶段进入到销毁阶段，此时Vue实例上的data，methods，过滤器，指令等都可用，此时还没有销毁。常用与清除计数器，清除页面监听。

8.updated(销毁后)        在此阶段，Vue实例上的data，methods，过滤器，指令，组件等完全销毁，全都不课用了。

二、Vue接口请求

2.1、vue-resource

步骤：先引用vue.js，在引用vue.resource.js，使用时在created（）中

get:        this.$http.get("url").then((res)=>{console.log(res);})

post:        this.$http.post("url",{}).then((res)=>{console.log(res);})

        需要注意的是：当post的请求头类型为 application/x-www-form-urlencoded 时，需要加入{emulateJSON:true}

2.2、axios

步骤：先引用vue.js，在引用axios.js，使用时在created（）中

get：       axios.get("url").then((res)=>{console.log(res);})

post:        axios.post("url",{}).then((res)=>{console.log(res);})

当请求人类型为 application/x-www-form-urlencoded 时，let url=new URLSearchParams(),

通过url.append()向对象中添加内容

当请求人类型为 multipart/form-data  时，let url=new FormData(),

通过url.append()向对象中添加内容

三、Vue中的动画

3.1        v-enter v-enter-active v-enter-to

             v-leave v-leave-active v-leave-to

3.2        第三方css

3.3        使用钩子函数

四、vue中列表的动画

<transition-group>