生命周期
-
定义:
从vue实例创建、运行、销毁期间伴随的各种各样的事件。 -
生命周期钩子函数
生命周期函数 = 生命周期事件 = 生命周期钩子 -
生命周期图示
axios
created() {
let url = new URLSearchParams()
url.append('type', 'free')
url.append('pageSize', 10)
url.append('pageNum', 1)
axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', url).then(res => {
// console.log(res);
this.imgSrc = res.data.rows[0].bannerFileUrlPc
})
axios.get('http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=5').then(res => {
// console.log(res.data.data);
this.imgSrc1 = res.data.data[0].imgUrlPc
})
}
vue动画
- 使用过渡类名
.v-enter {
transform: translateX(500px);
}
.v-enter-to {
transform: translateX(0);
}
.v-enter-active {
transition: all 3s;
}
.v-leave {
transform: translateX(0);
}
.v-leave-to {
transform: translateX(500px);
}
.v-leave-active {
transition: all 3s;
}
- 使用第三方css动画库
引入第三方动画库
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
-
钩子函数
定义 transition 组件以及三个钩子函数:
<div id='app'>
<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>
</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;
}