ref用法 transition transition-group

最新推荐文章于 2024-04-16 17:48:06 发布

Allen·赵

最新推荐文章于 2024-04-16 17:48:06 发布

阅读量495

点赞数

分类专栏： vue2

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/108961911

版权

vue2 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

ref用法

用法1.
vue给我们提供一个操作dom的属性，ref。绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用:

<div ref="test">test</div>
console.log(this.$refs.test)

在这里插入图片描述

看到打印出来就是绑定的dom对象，可以用来执行一些dom操作，比如操作样式，获取属性等:

let testDom = this.$refs.test
testDom.style.height = '200px'
testDom.style.background = 'red'
console.log(testDom.clientHeight)

可以看到如果绑定在普通的dom元素上，与id用法基本一样

用法2.
那肯定还有别的用法，比如循环渲染:

在这里插入图片描述
可以看到是个数组，也很好理解，数组的每一项就是每个li元素

用法3.
ref除了这两个用法，还有另一种用法，绑定在组件标签上:

<body>
    <div id="app">
       <aaa></aaa>
    </div>
    <template id="aaa">  
        <div>
            <button ref="btn" @click="get">get</button>   
            <bbb ref="b"></bbb>
        </div>
    </template>
    <template id="bbb">
        <div>
            <input type="text" v-model="msg">
        </div>
    </template>

</body>
<script src="./base/vue.js"></script>

<script>

    //组件间不仅可以用过$root/$parent/$children来获取对应关系的组件，
    //父组件还可以主动的通过ref为子组件做标记  也可以给dom做标记
    //也会形成ref链，也可以交互，
    Vue.component("bbb",{
        template:"#bbb",
        data(){
            return {
                msg:"hello-b"
            }
        }
    })

    Vue.component("aaa",{
        template:"#aaa",
        methods:{
            get(){
                // this.$children[0].msg = "aaaaa"  //通过viewModel（关系链） 实现的
                this.$refs.b.msg = "aaa"            //通过ref链实现的
                this.$refs.btn.style.background = "yellow"
                console.log(this)
            }
        }
    })

    new Vue({
        el:"#app"
    })
</script>

二

<body>
    <div id="app"> 
        <big-brother></big-brother>     
        <hr> 
        <littel-brother ref="littel"></littel-brother>
    </div>


    <template id="big-brother">   
        <div>
            <p>我是哥哥</p>   
            <p @click="hitLittel">打弟弟</p>
        </div>
    </template>


    <template id="littel-brother">
        <div>
            <p>我是弟弟</p>
            <p v-show="crying">呜呜呜呜呜~~</p>
        </div>
    </template>

</body>
<script src="./base/vue.js"></script>

<script>
    //在兄弟组件之间的通信，可以采用关系链和ref链去使用，解决兄弟之间通信问题。
    Vue.component('big-brother', {
        template:"#big-brother",
        methods:{
            hitLittel(){
                //打弟弟，需要让弟弟哭
                // this.$parent.$children[1].crying = true   //纯粹的关系链实现的
                this.$parent.$refs.littel.crying = true      //记住关系链 + ref链实现的
            }
        }
    })
    Vue.component('littel-brother', {
        template: '#littel-brother',
        data(){
            return {
                crying:false
            }
        }
    })
    new Vue({
        el:"#app"
    })


</script>

transition

第一：
//transition组件主要的作用就是可以给元素在某些特定的时刻添加上特定的类名
//transition标签跟 template/component标签一样，不会渲染额外的标签。

<body>
    <div id="app">
        <aaa></aaa>
    </div>
<template id="aaa">
    <div>  
        <button @click="isShow=!isShow">toggle</button> 
        <transition name="abc">
            <div v-if="isShow" class="box"></div>
        </transition>  
    </div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
    Vue.component("aaa",{
        template:"#aaa",
        data(){
            return {
                isShow:true
            }
        }
    })
    new Vue({
        el:"#app"
    })
</script>

在这里插入图片描述
//可以引入animate.css动画库，可以让一些dom元素实现更加丰富的动画效果。

<link href="./base/animate.css" rel="stylesheet" type="text/css">
<style>
    .box {
        width: 200px;
        height: 200px;
        background: red;
    }

</style>
<body>
    <div id="app">
        <aaa></aaa>
    </div>
    <template id="aaa">
        <div>
            <button @click="isShow=!isShow">toggle</button>    
            <transition
                enter-active-class="animated flip"
                leave-active-class="animated bounceOutRight"
            >
                <div v-if="isShow" class="box"></div>
            </transition>
        </div>
    </template>
</body>
<script src="./base/vue.js"></script>
<script>
    Vue.component("aaa", {
        template: "#aaa",
        data(){
            return {
                isShow:true
            }
        }
    })
    new Vue({
        el: "#app"
    })
</script>

//利用component标签来代替某一个组件，设置is属性为真正组件的名字
//transition组件默认是进入和离开同时发生。
//vue中对于transition提供了过渡模式
//in-out：新元素先进行过渡，完成之后当前元素过渡离开。
//out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
<body style="overflow: hidden;">
    <div id="app">
        <button @click="type='aaa'">A</button>
        <button @click="type='bbb'">B</button>
        <transition
            enter-active-class="animated slideInLeft"
            leave-active-class="animated slideOutRight"
            mode="out-in"
        >
            <component :is="type"></component>
        </transition>   
    </div>
</body>
<script src="./base/vue.js"></script>

<script>
    new Vue({
        el:"#app",
        data:{
            type:"aaa"
        },
        components:{
            "aaa":{
                template:"<h1>AAAAAAAAAAAAAAA</h1>"
            },
            "bbb":{
                template: "<h1>BBBBBBBBBBBBBBB</h1>"
            }
        }
    })
</script>

或者

<link rel="stylesheet" href="./base/animate.css">
<style>
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }

    .b-enter-active{
        animation: aaa 1s;
    }
    .b-leave-active{
        animation: aaa 1s reverse;
    }
    
    @keyframes aaa{
        0%{
            opacity: 0;
            transform:translateX(100px)
        }
        100%{
            opacity: 1;
            transform: translateX(0px);
        }
    } 
    
</style>
<body>
    <div id="app">
        <button @click="isShow=!isShow">click</button>
        <transition name="b" mode="out-in" appear>
            <div v-if="isShow" key="1">我是div</div>
            <div v-else key="2">我是p</div>
        </transition>
    </div>
    
</body>
<script src="./base/vue.js"></script>

<script>
    //oldVdom = {tag:div,content:"1111"}
    //newVdom = {tag:div,content:"2222"}

    new Vue({
        el:"#app",
        data:{
            isShow:true
        }
    })
</script>

transition-group

//transition-group 会渲染出一个额外的span标签出来可以通过tag属性指明渲染的标签（template/component/transition都不会渲染额外标签）

<link rel="stylesheet" href="./base/animate.css">
<style>
    .box {
        width: 200px;
        height: 200px;
        background: red;
    }
    .abc-enter{  /*进入刚开始的时候*/
        opacity: 0;
    }
    .abc-enter-to{  /*进入过程结束的时候*/
        opacity: 1;
    }
    .abc-leave{  /*离开动画开始的时候*/
        opacity: 1;
    }
    .abc-leave-to{ /*离开动画结束的时候*/
        opacity: 0;
    }
    .abc-enter-active,.abc-leave-active{
        transition: all 3s;
    }
</style>
<body>
    <div id="app">
        <aaa></aaa>
    </div>
    <template id="aaa">
        <div>
            <button @click="isShow=!isShow">toggle</button>    
            <transition-group name="abc" tag="div">
                <div class="box" key="1" v-if="isShow"></div>
                <div class="box" key="2" v-if="isShow"></div>
                <div class="box" key="3" v-if="isShow"></div>
            </transition-group>
        </div>
    </template>
</body>
<script src="./base/vue.js"></script>
<script>
    Vue.component("aaa", {
        template: "#aaa",
        data(){
            return {
                isShow:true
            }
        }
    })

    new Vue({
        el: "#app"
    })
</script>

Allen·赵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ref用法 transition transition-group

ref用法用法1.vue给我们提供一个操作dom的属性，ref。绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用:<div ref="test">test</div>console.log(this.$refs.test)看到打印出来就是绑定的dom对象，可以用来执行一些dom操作，比如操作样式，获取属性等:let testDom = this.$refs.testtestDom.style.height = '200px'testDom.
复制链接

扫一扫