vue生命周期、axios以及动画

1.生命周期

vue有八个生命周期，它们跟el、data、methods平级

分别是：

beforeCreate() 、create() 、beforeMount()、mounted()、beforeUpdate()、updated()、beforeDestroy()、destroyed()

2.axios

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。使用时需要链入axios的js文件。

它是需要写在vue八个生命周期中的created(){}里的，通过axios.get及axios.post请求数据

如图：

3.vue中的动画

1.在html中需要使用 transition 将需要过渡的元素包裹起来

如:

 2.在css里需要定义类的样式：

入场动画: .fade-enter{}表示开始状态 、.fade-enter-active{}表示动画的过度、.fade-enter-to表示结束状态。

离场动画：.fade-leave{}表示开始状态 、.fade-leave-active{}表示动画的过度、.fade-leave-to表示结束状态。

如果没有在transition标签里添加name属性，那么入场动画和离场动画中的fade就用 v 来表示：.v-enter{},name的属性值自定义，只需要在设置动画样式时在 -enter或者-leave前边加上name的属性值即可。

使用第三方动画库:

第一步导入动画类库<link rel="stylesheet" type="text/css" href="./lib/animate.css">（这里用的是animate的动画类库）

第二步定义transition及属性：

使用动画钩子函数

v-for的列表过渡在定义DOM结构中需要使用transition-group 组件把v-for循环的列表包裹起来

如：