Vue补充
补充内容
refDOM的操作- 生命周期
- 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>上面去监听几个事件就可以了
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
