Vue基础补充

Love The Way You Lie 2022-12-17 11:56 166阅读 0赞

## Vue补充 ##

> 补充内容
> 
> 1.  `ref`DOM的操作
> 2.  生命周期
> 3.  Vue动画及动画组件`<transition>`

### ref操作DOM ###

在之前的时候讲过，Vue不推荐我们直接对DOM进行操作，但是有些操作必须借助于DOM去完成，所以我们Vue内部也提供了两种获取DOM元素的方式

1.  通过事件来获取DOM（因为事件里面有“事件的绑定”与“事件的触发者”）
2.  通过`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>`组件，它有四个状态

![Transition Diagram][]

这四个状态分别如下

1.  进入之前`v-enter`
2.  进入之后`v-enter-to`
3.  离开之前`v-leave`
4.  离开之后`v-leave-to`

这四个状态还形成两个过程

1.  进入的过程`v-enter-active`
2.  离开的过程`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插件在使用的时候它也有它的钩子函数

“./img/item4.jpg”  
\]  
\}  
\})

\`\`\`

这样就实现了一个滚动的轮播图

#### transiton的钩子函数 ####

transiton插件在使用的时候它也有它的钩子函数

我们只要在`<transition>`上面去监听几个事件就可以了

[Transition Diagram]: /images/20221122/33461a1e285340168e28cd95465979e3.png