Vue补充
补充内容
ref
DOM的操作- 生命周期
- Vue动画及动画组件
<transition>
ref操作DOM
在之前的时候讲过,Vue不推荐我们直接对DOM进行操作,但是有些操作必须借助于DOM去完成,所以我们Vue内部也提供了两种获取DOM元素的方式
- 通过事件来获取DOM(因为事件里面有“事件的绑定”与“事件的触发者”)
- 通过
ref
属性来获取,在获取当中使用this.$refs.值
完成
今天主要就是对ref
做补充
<body>
<div id="app">
<h2 ref="t1">{{msg}}</h2>
<hr>
<ul>
<li v-for="(item,index) in userList" :key="index" :ref="'li_'+index">{{item}}</li>
</ul>
<hr>
<button type="button" @click="aaa">获取上面的DOM元素</button>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"hello world",
userList:["张三","李四","王五"],
abc:"abc"
},
methods:{
aaa(){
// console.log(this.$refs.t1);
console.log(this.$refs);
//console.log(this.$refs["t1"]);
//通过v-for来渲染生成的ref。它有个特点,每次获取的都都是一个数组
// console.log(this.$refs["li_1"]); //它得到的是一个数组
}
}
})
</script>
重要的一点就是通过v-for
来循环渲染生成的,它每得通过$refs["名称"]
来获取的时候是一个数组,其它的时候则是一个正常DOM对象
跨生命周期的调用方式
我们之前都已经学过了Vue生命周期的四个过程,八个状态,在每个过程当中我们都可以进行相应的操作过程,如我们的beforeCreate()
时是不能进行任何Vue内部的操作的,例如我们在mounted()
之前是不能操作$refs
来获取DOM元素的
<body>
<div id="app">
<h2 ref="aaa">这是一个标题</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
userName:"张三"
},
beforeCreate(){
console.log("beforeCreate---------------");
// console.log(this.userName);
// console.log(this.$refs.aaa);
//按照正常情况下,我们在这里进行data操作与$refs的操作都是不可以的,但是Vue
//为了方便我们处理代码,提供了一个跨生命周期的调用
this.$nextTick(()=>{
//这里面的代码是自动执行的,Vue会在合适的时候自动去执行它们
console.log(this.userName);
console.log(this.$refs.aaa);
})
},
mounted(){
// console.log("mounted---------------");
// console.log(this.userName);
// console.log(this.$refs.aaa);
}
})
</script>
在上面的代码中,我们使用了$nextTick()
这是Vue内部提供的方法,保存我们里面的代码会在合适的时候自动执行
transition过渡
在Vue的内部,要实现过渡动画效果,我们使用是<transition>
组件,它有四个状态
这四个状态分别如下
- 进入之前
v-enter
- 进入之后
v-enter-to
- 离开之前
v-leave
- 离开之后
v-leave-to
这四个状态还形成两个过程
- 进入的过程
v-enter-active
- 离开的过程
v-leave-active
通过这2个过程,4个状态,我们可以设置vue
中的过渡效果,配置<transition>
来使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue过渡</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: deeppink;
}
/*
一个元素由隐藏到显示,再由显示到隐藏会经过哪几个过程
由隐藏到显示
1.显示之前,
2.显示之后,
由显示到隐藏
3.隐藏之前
4.隐藏之后
我们上面的四个状态分别汇总成
进入之前,进入之后,离开之前,离开之后
*/
/*这里代表进入之前,离开以后的状态*/
.fade-enter,.fade-leave-to{
opacity: 0;
}
/* 这里代表进入之后,离开之前的状态 */
.fade-enter-to,.fade-leave{
opacity: 1;
}
/*这里代表进入与离开的状态*/
.fade-enter-active,.enter-leave-active{
transition: all 0.5s linear;
}
</style>
</head>
<body>
<div id="app">
<button type="button" @click="flag=!flag">切换显示与隐藏</button>
<hr>
<!-- 以前要执行过渡效果非常麻烦 -->
<transition name="fade">
<div class="box" v-show="flag">
这是一个盒子
</div>
</transition>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</html>
上面的代码还可以演变成下面的代码,它们可以在不同的过程执行不同的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue过渡</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: deeppink;
}
.fade-enter{
opacity: 0;
}
.fade-enter-to{
opacity: 1;
}
.fade-leave{
transform: scale(1) rotateZ(0deg);
}
.fade-leave-to{
transform: scale(0) rotateZ(360deg);
}
.fade-enter-active{
transition: all 0.5s linear;
}
.fade-leave-active{
transition: all 2s linear;
}
</style>
</head>
<body>
<div id="app">
<button type="button" @click="flag=!flag">切换显示与隐藏</button>
<hr>
<!-- 以前要执行过渡效果非常麻烦 -->
<transition name="fade">
<div class="box" v-show="flag">
这是一个盒子
</div>
</transition>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</html>
注意:<transition>
组件的下面只允许有一个元素,不能有多个。如果是多个元素包括,则要使用<transition-group>
这个组件,必须里面的每个元素必须有key
来进行标记
下面的代码就使用vue和transition来完成的一个轮播效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition实现轮播图</title>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.img-box {
width: 639px;
height: 426px;
border: 1px solid black;
margin: auto;
position: relative;
}
.img-box img {
display: block;
position: absolute;
left: 0px;
top: 0px;
}
.ul-position{
position: absolute;
width: 100%;
display: flex;
justify-content: center;
bottom: 20px;
}
.ul-position>li{
width: 12px;
height: 12px;
background-color: white;
border-radius: 50%;
margin: 0px 10px;
cursor: pointer;
}
.ul-position>li.active{
background-color: red;
}
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-to,.fade-leave{
opacity: 1;
}
.fade-enter-active,.fade-leave-active{
transition: all 0.5s linear;
}
</style>
</head>
<body>
<div id="app">
<div class="img-box">
<transition-group name="fade">
<img v-for="(item,index) in imgList" :key="index" :src="item" alt="" v-show="currentIndex==index">
</transition-group>
<ul class="ul-position">
<li v-for="(item,index) in imgList" :key="index"
:class="{active:currentIndex==index}"
@click="currentIndex = index"></li>
</ul>
</div>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
currentIndex: 0,
imgList: [
"./img/item1.jpg",
"./img/item2.jpg",
"./img/item3.jpg",
"./img/item4.jpg"
]
}
})
</script>
</html>
Vue 的<transition>
组件可以实现过渡的效果,同时还可以配合其它的第三方动画插件来完成,如目前比较流行的一个动画插件库叫Animate.css
Animate.css的使用
Animate.css是一个动画库,它里面会有一些常见的动画效果,它可以配置一些第三方的框架使用,如jQuery
,Vue
,react
都可以的
安装
$ yarn add animate.css
使用
<body>
<div id="app">
<button type="button" @click="flag=!flag">切换显示与隐藏</button>
<hr>
<!-- 以前要执行过渡效果非常麻烦 -->
<transition enter-active-class="animate__animated animate__bounceIn" leave-active-class="animate__animated animate__rotateOut">
<div class="box" v-show="flag">
这是一个盒子
</div>
</transition>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
上面的代码就是一个简单的隐藏与显示的效果,调用了animate.css
动画插件
接下来,我们再将之前所做的轮播图的效果也演示出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition实现轮播图</title>
<link rel="stylesheet" href="./css/animate.css">
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.img-box {
width: 639px;
height: 426px;
border: 1px solid black;
margin: auto;
position: relative;
overflow: hidden;
}
.img-box img {
display: block;
position: absolute;
left: 0px;
top: 0px;
}
.ul-position{
position: absolute;
width: 100%;
display: flex;
justify-content: center;
bottom: 20px;
}
.ul-position>li{
width: 12px;
height: 12px;
background-color: white;
border-radius: 50%;
margin: 0px 10px;
cursor: pointer;
}
.ul-position>li.active{
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="img-box">
<transition-group enter-active-class="animate__animated animate__slideInRight"
leave-active-class="animate__animated animate__slideOutLeft">
<img v-for="(item,index) in imgList" :key="index" :src="item" alt="" v-show="currentIndex==index">
</transition-group>
<ul class="ul-position">
<li v-for="(item,index) in imgList" :key="index"
:class="{active:currentIndex==index}"
@click="currentIndex = index"></li>
</ul>
</div>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
currentIndex: 0,
imgList: [
"./img/item1.jpg",
"./img/item2.jpg",
"./img/item3.jpg",
"./img/item4.jpg"
]
}
})
</script>
</html>
这样就实现了一个滚动的轮播图
transiton的钩子函数
transiton插件在使用的时候它也有它的钩子函数
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
“./img/item4.jpg”
]
}
})
这样就实现了一个滚动的轮播图
transiton的钩子函数
transiton插件在使用的时候它也有它的钩子函数
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
我们只要在<transition>
上面去监听几个事件就可以了