一.生命周期
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期
详解 8个
初始化尚未完成,data数据和methods方法都为挂在vue实例上
beforeCreate(){}
能操作data数据的生命周期 一般用于接口请求+数据初始化
created(){}
虚拟元素挂在前,此页面元素尚未更新
beforeMount(){}
dom元素挂载后,如果需要操作dom,可以在此生命周期执行
mounted(){}
执行0-到多次
beforUpdate(){}
updated(){}
还未讲
销毁之前
beforeDestroy(){},
销毁之后
destroyed(){}
vue请求
<script src="./lib/vue-resource-1.3.4.js"></script>它的请求方式
url 的组成 地址 协议(http https)+主机(公网IP 域名)+路径+参数
get
this.$http.get('http://1.117.81.216:8086/weChat/applet/course/banner/list?number=4').then(
res => {console.log(res) })
post
this.$http.post('http://1.117.81.216:8086/weChat/applet/course/list/type', { }, { emulateJSON: true }).then(
res => {
console.log(res)})
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>的请求
get
axios.get('http://1.117.81.216:8086/weChat/applet/course/banner/list?number=4').then(
res => {
// console.log(res)
}
)
post
let formurl = new URLSearchParams()
formurl.append('type', 'free')
formurl.append('pageSize', 10)
formurl.append('pageNum', 1) */
post请求
axios.post('http://1.117.81.216:8086/weChat/applet/course/list/type', formurl).then(
res => {
console.log(res)
this.courseList = res.data.rows
}
)
动画 六步
.v-enter{
transform: translateX(-200px);
}
/* 最后 */
.v-enter-to{
transform: translateX(0px);
}
/* 中间过程 */
.v-enter-active{
transition: all 2s;
}
/* 离开 */
.v-leave{
transform: translateX(0px);
}
/* 离开最后 */
.v-leave-to{
transform: translateX(200px);
}
/* 过程 */
.v-leave-active{
transition: all 2s;
}