一、生命周期
1.什么是生命周期?
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
2.Vue生命周期
beforeCreate:初始化尚未完成,data数据,methods方法都未挂在vue实例上( 一般用于页面重定向)
created:第一个能操作data数据的生命周期(一般用于接口请求+数据初始化)
beforeMount: 虚拟dom挂载前,此时页面尚未更新
mounted:dom元素挂载后,如果需要操作dom,可以在此生命周期执行
beforeUpdate:可以执行0-多次
updated:页面和数据已经保持同步,都是最新的
beforeDestroy:销毁之前,一般用于清空计时器,解除事件绑定
destroyed:销毁之后
3. axios的使用
post请求方法
// 内置对象
// let formData=new formData()
// formData.append(key,value)
let formurl=new URLSearchParams()
formurl.append('type','free')
formurl.append('pageNum',1)
formurl.append('pageSize',10)
// post
axios.post(this.baseurl+'/weChat/applet/course/list/type',formurl).then(res=>{
console.log(res);
})
//json对象和json字符串时,请求方式
axios.post(this.baseurl+"/weChat/applet/course/list/type",formurl).then(res=>{
console.log(res);
})
get请求方法
axios.get(this.baseurl + "/weChat/applet/course/banner/list?number=5")
.then((res) => {
console.log(res);
});
4.Vue中的动画
.v-enter:动画进入时起始位置
.v-enter-to:动画进入时目的位置
.v-enter-active:动画进入过渡的状态
.v-leave:动画离开时起始位置
.v-leave-to:动画离开时目的位置
.v-leave-active:动画离开过渡的状态
控制不同的transition标签只需要给对应的加上name属性,再将css中原来v的位置替换成所写的name的值
//style
.zs-enter{
transform: translateX(200px);
}
.zs-enter-to,.zs-leave{
transform: translateX(0px);
}
.zs-enter-active,.zs-leave-active{
transition: all 2s;
}
.zs-leave-to{
transform: translateX(-200px);
}
//script
<transition name="zs">
<div class="box" v-show="flag"> {{msg}}</div>
</transition>
5.使用动画钩子函数
定义 transition 组件以及三个钩子函数:
<div id="app">
<input type="button" value="切换动画" @click="isshow = !isshow">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div v-if="isshow" class="show">OK</div>
</transition>
</div>
定义三个 methods 钩子方法:
methods: {
beforeEnter(el) { // 动画进入之前的回调
el.style.transform = 'translateX(500px)';
},
enter(el, done) { // 动画进入完成时候的回调
el.offsetWidth;
el.style.transform = 'translateX(0px)';
done();
},
afterEnter(el) { // 动画进入完成之后的回调
this.isshow = !this.isshow;
}
}
定义动画过渡时长和样式:
.show{
transition: all 0.4s ease;
}
6. v-for的列表过渡
定义DOM结构,其中,需要使用 transition-group 组件把v-for循环的列表包裹起来:
<div id="app">
<input type="text" v-model="txt" @keyup.enter="add">
<transition-group tag="ul" name="list">
<li v-for="(item, i) in list" :key="i">{{item}}</li>
</transition-group>
</div>