目录
一、vue的生命周期
1、什么是生命周期
2、vue生命周期钩子函数
3、vue生命周期
()：
() ：
()：
()：
()：
()：
()：
()：
二、vue-resource接口请求
1、get请求：
2、post请求：
三、 axios的使用
四、vue中的动画
1、使用过渡类名使用 transition 将需要过渡的元素包裹起来
2、使用第三方css动画库
3、使用动画钩子函数
四、v-for的列表过渡
五、列表的排序过渡
一、vue的生命周期
1、什么是生命周期
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
2、vue生命周期钩子函数
将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数（生命周期函数=生命周期事件=生命周期钩子）
3、vue生命周期
()：
一般用于页面重定向
() ：
一般用于接口请求 ，数据初始化
()：
页面数据未更新，在内存中已经解析好模版，虚拟dom
()：
页面更新完成，需要依赖dom的操作，在此完成
()：
触发0次或多次，数据更新前
()：
数据更新后
()：
组件销毁前，清除定时器还有页面监听
()：
组件销毁后
二、vue-resource接口请求
先引用Vue的脚本文件，再引用vue-resource的脚本文件
<script src="./vue-2.4."></script>
<script src="./vue-resource-1.3."></script>
1、get请求：
this.$("url?data").then(
(res)=>{
=
}
)
2、post请求：
// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$("url",data,{ emulateJSON: true }).then((res)=>{
=
})
post josn：
this.$("url",data).then((res)=>{
// (res);
})
三、 axios的使用
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 中。
get请求：
mounted () {
axios
.get('/try/ajax/json_demo.json')
.then(response => ( = response))
.catch(function (error) { // 请求失败处理
(error);
});
}
post请求：
mounted () {
axios
.post('/try/ajax/demo_axios_post.php')
.then(response => ( = response))
.catch(function (error) { // 请求失败处理
(error);
});
}
post请求有内置对象，内置对象的append方法可以把参数传到变量中。
let url = new URLSearchParams()或者 let url = new FormData()
('type','free')四、vue中的动画
1、使用过渡类名
使用 transition 将需要过渡的元素包裹起来
HTML结构：
<transition name="fade">
<div v-show="isshow">动画哦</div>
</transition>
VM 实例：
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
isshow: false
},
methods: {
myAnimate() {
= !;
}
}
定义两组类样式：
/* 定义进入和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease;
position: absolute;
}
/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
2、使用第三方css动画库
导入动画类库：
<link rel="stylesheet" type="text/css" href="./lib/">
定义 transition 及属性
<transition
enter-active-class="animate__bounceInDown"
leave-active-class="animate__rotateOutDownLeft"
>
<div v-if="flag" class="animate__animated"> 哈哈</div>
</transition>
3、使用动画钩子函数
动画进入之前的回调
beforeEnter(el) {
(el);
= 'translateX(500px)';
},
动画进入完成时候的回调
enter(el, done) {
(done);
;
= 'translateX(0px)';
done();
},
动画进入完成之后的回调
afterEnter(el) {
("3333");
= !;
}
定义动画过渡时长
.show{
transition: all 0.4s ease;
}
四、v-for的列表过渡
DOM结构需要使用 transition-group 组件把v-for循环的列表包裹起来
五、列表的排序过渡
<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。
v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和
.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}