Vue：过度效果、动画效果、key值、插槽、动态组件、实例的属性

最新推荐文章于 2023-12-15 13:50:23 发布

洪布斯

最新推荐文章于 2023-12-15 13:50:23 发布

阅读量394

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45631813/article/details/103498275

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

vue过渡效果：

transition标签对，用来放置即将要发生动画或过渡效果的标签

默认使用六个类名，设置效果，类名以v-开头

如果需要设置多个效果，需要给transition添加name属性，那么六个类名一律 nameValue-开头

        /*  设置标签即将显示时的初始位置 */
        .v-enter {
            left: -100%;
        }

        /* 设置标签显示时的结束位置，可忽略不写 */
        .v-enter-to {
            left: 0;
        }

        /* 设置动画或者过渡的时间 */
        .v-enter-active {
            transition: .5s;
        }

        /* 设置动画即将消失时的初始位置，可忽略不写 */
        /*.v-leave {*/
        /*left: 0;*/
        /*}*/
        /* 设置动画消失时的位置 */
        .v-leave-to {
            left: 100%;
        }

        /* 设置动画或者过渡的时间效果 */
        .v-leave-active {
            transition: .5s;
        }

特殊的template标签对，用来存储指令属性，而不占用标签

仅仅是个指令容器标签，浏览器不会渲染

        <transition>
            <template v-if="isShow">
                <side-bar></side-bar>
            </template>
        </transition>

动画效果：

    <style>
        p {
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: red;
            color: #fff;
        }

        @keyframes fadeIn {
            0% {
                transform: translateY(-100px);
                opacity: 0;
            }

            50% {
                transform: translateY(100px);
                opacity: 0.5;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            0% {
                transform: translate(-100px);
                opacity: 1;
            }

            50% {
                transform: translate(100px);
                opacity: 0.5;
            }

            100% {
                transform: translate(0);
                opacity: 0;
            }
        }

        .slide-enter-active {
            animation: fadeIn 1s both;
        }

        .slide-leave-active {
            animation: fadeOut 1s both;
        }
    </style>
</head>

<body>

    <div id="demo">
        <button @click="isShow = !isShow"> 切换 </button>

        <transition name="slide">
            <p v-if="isShow"> 普通的标签，即将出现动画效果 </p>
        </transition>

        <!-- 调用第三方的动画库 -->
        <transition enter-active-class="" leave-active-class="">

        </transition>
    </div>

    <script>
        var vue = new Vue({
            el: '#demo',
            data: {
                isShow: false
            }
        })
    </script>

</body>

key值：

v-if 或者 v-for 在进行标签显示/隐藏/排序时，会重复利用已经存在的标签，而不是创建新标签

组件也是重复使用的

通过key值给标签增加标记

<body>
    <div id="demo">
        <button @click=" info= 'username' ">用户名</button>
        <button @click=" info= 'password' "> 密码 </button>
        <template v-if="info === 'username'">
            <input type="text" placeholder="请输入用户名" key="user" />
        </template>
        <template v-else>
            <input type="text" placeholder="请输入密码" key="pass">
        </template>

        <ul>
            <!-- 标签重新排序时，内容变化，但是标签排序不变，加key值之后，标签内容都变化 -->
            <li v-for="(ins, index) in 4" :key="'ins' + index">
                {{ ins }}
            </li>
        </ul>
    </div>
    <script>
        var vue = new Vue({
            el: '#demo',
            data: {
                info: 'username'
            }
        })
    </script>
</body>

vue组件--插槽：

<body>
    <div id="demo">
        <!-- 组件中的原始内容，默认会被组件的模板内容所替代 -->
        <my-com>
            <h2 slot="h2"> 标题标签 </h2>
            <p slot="p2"> 普通的标签 </p>
            <section>普通的section标签</section>
            <main> 普通的main标签 </main>
        </my-com>

        <!-- vue中的数据传递：父往子传，子往父传，非父子传 -->
        <my-tab>
            <!-- 
                父组件的使用范围，即将使用子组件中的变量
                 其实是，组件的原始内容，使用组件的模板变量
             -->
            <h3> 用到组件的变量呢 </h3>
            <!--
                老版本写法 slot-scope属性，值自定义，
                slot标签对所设置的属性及其属性值，会自动被aa接收
            -->
            <p slot-scope="aa"> {{aa.msg}} </p>
            <!--
                新版本写法
                通过特殊的template标签对，以及v-slot指令，通过属性值接收slot标签对中的属性及其属性值
                v-slot 简写为#

                匿名标签slot 默认的name属性是default，可忽略不写
                作为作用域插槽存在时，通过v-slot:default接收数据
             -->

            <template #default="mm"> {{mm}}</template>
            <template #head="ccc"> {{ ccc }} </template>
        </my-tab>
    </div>

    <!--
    slot标签对，用来存储组件的没有设置slot属性的原始内容，没有设置属性，被称为匿名插槽
    具有name属性的slot标签对，用来存储组件原始内容中设置有对应slot属性值的标签，被称为具名插槽
    -->
    <script id="my-com" type="text/html">
        <div class="my-com">
            <h1> 组件的大标题 </h1>
            <slot name="h2"></slot>
            <slot name="p2"> </slot>
            <slot></slot>
        </div>
    </script>

    <script id="my-tab" type="text/html">
        <div class="my-tab">
            <h2> 作用域插槽的标题 </h2>
            <p> {{num}} </p>
            <slot :msg="num"></slot>
            <slot name="head" :bb="num"></slot>
        </div>
    </script>


    <script>
        var vue = new Vue({
            el: '#demo',
            data: {

            },
            components: {
                myCom: {
                    template: '#my-com',
                    data() {
                        return {

                        }
                    }
                },
                myTab: {
                    template: '#my-tab',
                    data() {
                        return {
                            num: 12
                        }
                    }
                }
            }

        })
    </script>

</body>

vue组件--动态组件：

<body>
    <div id="demo">
        <button @click="show = 'my-com' "> 选项1 </button>
        <button @click="show = 'my-tab' "> 选项2 </button>
        <button @click="show = 'my-aaa' "> 选项3 </button>
        <!--
        动态组件，通过特殊的component标签以及is属性，设置组件显示
        任意自定义标签，只要具有特殊的is属性，标记组件的
    -->
        <component :is="show"></component>
    </div>

    <script id="mycom" type="text/html">
        <div class="my-com">
            <h1> com组件 </h1>
        </div>
    </script>

    <script id="my-tab" type="text/html">
        <div class="my-tab">
            <h1> tab组件 </h1>
        </div>
    </script>

    <script id="my-aaa" type="text/html">
        <div class="my-aaa">
            <h1> aaa组件 </h1>
        </div>
    </script>

    <script>
        var vue = new Vue({
            el: '#demo',
            data: {
                show: 'my-com'
            },
            components: {
                myCom: {
                    template: '#mycom',
                    data() {
                        return {

                        }
                    }
                },
                myTab: {
                    template: '#my-tab',
                    data() {
                        return {

                        }
                    }
                },
                myAaa: {
                    template: '#my-aaa',
                    data() {
                        return {

                        }
                    }
                }
            }
        })
    </script>
</body>

vue实例的属性：

<body>
    <div id="demo">
        <h3 ref="h3"> h3标签 </h3>
        <my-com ref="coms"></my-com>
    </div>
    <script id="mycom" type="text/html">
        <div class="mycom">
            <h2 ref="h2"> 组件 </h2>
        </div>
    </script>
    <script>
        var vue = new Vue({
            el: '#demo',
            mounted() {
                // vue实例属性一律$开头
                console.log('-----分割线-----');
                // 获取实例或组件的根元素
                console.log(this.$el);
                // 获取组件或实例范围中具有ref属性的标签或组件 reference 参考
                console.log(this.$refs);
                // 获取组件中所有的子组件
                console.log(this.$children);
                console.log(this.$refs.coms === this.$children[0]);
            },
            components: {
                myCom: {
                    template: '#mycom',
                    mounted() {
                        console.log('子组件')
                        console.log(this.$el);
                        console.log(this.$refs);
                        // 获取父组件
                        console.log(this.$parent);
                        // 获取插槽
                        console.log(this.$slots);
                    }
                }
            }
        })
    </script>
</body>