Vue基础 - Day03
1. Vue生命周期
如图所示,总共有八个生命周期函数:
1. beforeCreate()
2. created()
3. beforeMount()
4. mounted()
5. beforeUpdate()
6. updated()
7. beforeDestroy()
8. destroyed()
beforeCreate生命周期钩子函数:
初始化尚未完成,data数据,methods方法都未挂在在vue实例上
一般用于页面重定向
beforeCreate() {
console.log('一般用于页面重定向');
console.log(this.msg);
console.log("这个undefined是因为,初始化还没完成呢");
},
created生命周期钩子函数:
初始化已经完成,data数据,methods方法都可以被调用了
是第一个能操作data中数据对象和调用methods方法的生命周期, 一般用于接口请求+数据初始化
methods: {
getClassification() {
axios.post(this.baseUrl + "/weChat/applet/subject/list", { enable: 1 }).then(res => {
this.classificationList = res.data.rows
})
......
}
created() {
this.getClassification()
this.getSwiper()
this.getCourses().then(res => { this.freeCourseList = res.data.rows })
this.getCourses('boutique', 1, 5).then(res => { this.boutiqueCourseList = res.data.rows })
this.getCourses('discount', 1, 5).then(res => { this.discountCourseList = res.data.rows })
this.getFooterHref()
}
beforeMount生命周期钩子函数:
进入运行阶段前;此时虚拟dom尚未挂载,页面元素尚未更新
beforeMount() {
console.log("虚拟dom挂载前,此时页面元素尚未更新");
}
mounted生命周期钩子函数:
dom元素挂载后,如果需要操作dom,可以在此mounted周期执行
mounted() {
console.log("dom元素挂载后,如果需要操作dom,可以在此mounted周期执行");
},
beforeUpdate生命周期钩子函数:
元素发生更新时,元素更新前的阶段;可以执行0次到多次;
beforeUpdate() {
console.log("元素一更新我就打印,但我是更新前就打印了");
}
updated生命周期钩子函数:
元素发生更新时,元素更新完成的阶段;同样可以执行0次到多次;
updated() {
console.log("元素一更新我就打印,但我是更新后才打印");
}
beforeDestroy生命周期钩子函数:
vue销毁前的阶段,一般用来清除定时器、函数等操作。
beforeDestroy() {
console.log("销毁前清除占内存的操作");
}
destroyed生命周期钩子函数:
vue销毁后的阶段,好像没什么用。
this.$nextTick()方法
this.$nextTick()
解释为在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。 也就是说,当dom元素发生改变,重新渲染dom树后,再执行vue.$nextTick()里面的内容。
它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
为了不影响this指向,参数一般为箭头函数。
举例:在DOM加载完成后,进行Swiper轮播图初始化,避免异步影响
this.$nextTick(() => {
// swiper轮播图
var mySwiper = new Swiper('.swiper', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination'
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
speed: 800,
autoplay: true, //自动切换
autoplay: {
delay: 1500, //自动切换的时间间隔,单位ms
disableOnInteraction: false //用户操作swiper之后,是否禁止autoplay
},
spaceBetween: 0
})
})
2. Vue网络请求
①vue-resource
1.X.X 版本使用:vue-resource,它依赖于Vue.js,需要注意引入顺序,必须引入在vue.js后,
现在已几乎弃用,基本只有在维护老版本应用时会用到。
vue-resource
发送GET请求:
this.$http.get()
this.$http.get(this.baseUrl + "/weChat/applet/course/banner/list?number=4").then(res => {
console.log(res);
this.imgSrcList = res.body.data
})
vue-resource
发送POST请求:
this.$http.post()
默认请求参数类型为 application/json
,它有第三个参数:{ emulateJSON: true }
,
用来设置post提交的参数编码类型为 application/x-www-form-urlencoded
this.$http.post(this.baseUrl + "/weChat/applet/course/list/type",
{ type: "free", pageNum: 1, pageSize: 10 }, { emulateJSON: true }).then(res => {
console.log(res);
this.coursesList = res.body.rows
})
②Axios
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求
Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
Axios的引入不需要放在vue.js后,它和vue-resource的返回值相同,都是一个Promise对象
axios 发送GET请求:
axios.get(this.baseUrl + "/weChat/applet/course/banner/list?number=4").then(res => {
console.log(res);
this.imgSrcList = res.data.data
})
axios 发送POST请求:
axios有许多参数,如果需要指定post请求的参数类型为application/x-www-form-urlencoded
的话,需要这么做:
let formUrl = new URLSearchParams()
formUrl.append("type", "free")
formUrl.append("pageNum", 1)
formUrl.append("pageSize", 10)
然后直接将创建的对象写在请求地址后即可:
axios.post(this.baseUrl + "/weChat/applet/course/list/type", formUrl).then(res => {
console.log(res);
this.coursesList = res.data.rows
})
3.Vue动画
①使用CSS创建动画
1.使用 transition 标签将需要过渡的元素包裹起来
<transition>
<div class="box" v-show="flag">{{msg}}</div>
</transition>
<transition name="v2">
<div class="box" v-show="flag">{{msg}}</div>
</transition>
2.使用类名过渡时,需要设置的类名有六个:
v-enter、v-enter-to、v-enter-active
v-leave、v-leave-to、v-leave-active
有多个transition标签时,需要指定name属性。
name 属性用于自动生成 CSS 动画类名
如果 transition 标签元素没有设置 name 属性,则对应的动画类名为 v-XXX
( v-enter等 )
如果设置了 name 属性,则对应的动画类名为 属性值-XXX
( 属性值-enter等 )
当存在多个 tansition 标签时,我们可以通过 name 属性给各个 transition 标签指定不同的 CSS 动画效果
.box {
width: 150px;
height: 30px;
margin: 0 auto;
background-color: rgb(255, 213, 0);
color: rgb(0, 134, 87);
}
.v-enter,
.v2-leave-to {
transform: translateX(-200px);
}
.v-enter-to,
.v-leave,
.v2-enter-to,
.v2-leave {
transform: translateX(0px);
}
.v-enter-active,
.v-leave-active {
transition: all 2s;
}
.v2-enter,
.v-leave-to {
transform: translateX(200px);
}
.v2-enter-active,
.v2-leave-active {
transition: all 2s;
}
3. 创建Vue实例,实现动画效果切换
const vm = new Vue({
el: '#app',
data: {
flag: true,
msg: '这动画老记不住啊'
},
methods: {},
})
或者使用第三方动画库:animate.css
引入动画类库后直接使用它的类名即可。
②使用JS创建动画
定义 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;
}
目前来看舍近求远,一般不建议使用。
③使用v-for创建一个过渡列表
定义过渡样式:
<style>
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateY(10px);
}
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}
</style>
定义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>
定义 VM 中的结构:
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
txt: '',
list: [1, 2, 3, 4]
},
methods: {
add() {
this.list.push(this.txt);
this.txt = '';
}
}
});
<transition-group>
组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性,它会在元素的改变定位的过程中应用。
v-move 和 v-leave-active 结合使用,能够让列表的过渡更加平缓柔和:
v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}