动态组件、递归组件、Vue实现动画效果

1.动态组件

1.1 动态组件的使用情况

在一个页面内需要根据不同的导航栏状态显示不同的内容时候，可以使用vue中的动态组件方式来根据状态显示渲染页面；

1.2 实现方式

使用template标签的is属性绑定vue中data的一个字段；该字段的值是组件的名字，字段改变，则页面的template便标签is属性改变，页面也随之改变；

1.2 代码展示

<div id="app">
    <div class="d1" style="text-align:center;">
        <button @click="name='main1'">主页</button>
        <button @click="name='login'">登录</button>
        <button @click="name='user'">个人</button>
        <!-- 第一种方法 -->
        <main1 v-show="name==='main1'"></main1>
        <login v-show="name==='login'"></login>
        <user v-show="name==='user'"></user>
        <!-- 第二种方法 component动态组件,is属性绑定的是name字段，那么字段是组件名字 -->
        <component :is="name"></component>
    </div>
</div>

Vue.component('main1', {
    template: `<div>这是主页</div>`
})
Vue.component('login', {
    template: `<div>这是登录</div>`
})
Vue.component('user', {
    template: `<div>这是用户</div>`
})

new Vue({
    el: '#app',
    data: {
        name: 'main1'
    },
    methods: {

    },
})

2.递归组件

2.1 递归组件的使用场景与使用方法

在渲染树叉型结构的数据的时候，最好需要使用递归组件的方式来渲染页面；

使用方法：原理与函数的递归相同，与之类比，可以将传入组件的数据看作为参数；在函数内部在使用组件标签对，使用v-bind传入不同的数据；

2.2 代码演示

<div id="app">
    <my-com :child-list="list">

    </my-com>
</div>

<template id="s1">
    <ul>
        <li v-for="item,i in childList">
            <img src="./M009-Arrow.png" @click="change(i)" :class="open[i]?'active':''" v-if="item.list">
            <div v-else class="placeBox">
            
            </div>
            {{item.title}}

            <!-- 使用递归组件的时候要注意:数据源不一样,这里使用的是item.list;
                自定义传递属性和根组件使用的传递属性保持一致，其实就是在不同的地方给形参传递不同的实参数 
            -->
            <my-com :child-list="item.list" v-show="open[i]"></my-com>
        </li>  
    </ul>
</template>

Vue.component('myCom',{
    template:'#s1',
    props:['childList'],
    data(){
        return{
            open:[]
        }
    },
    methods: {
        change(i){
            console.log(this.open[i]);
            this.$set(this.open,i,!this.open[i])
        }
    },
})

new Vue({
    el:'#app',
    data:{
        list:[]
    },
    methods:{
    
    },
    created() {
        fetch('./data.json').then(res=>{
            return res.json();
        }).then(res=>{
            console.log(res);
            this.list = res;
        })
    },
})

3.Vue动画效果

3.1 vue动画效果使用方法

vue动画效果是将需要设置显示或者隐藏效果的标签对写在vue提供transition标签对中，然后在css中设置.v-enter .v-enter-active .v-enter-to 元素的入场动画，.v-leave .v-leave-active .v-leave-to 元素的离场动画；

 .v-enter(.v-leave)   设置transition标签对中的标签在显示(隐藏)之前的样式

.v-enter-active(.v-leave-active)  设置transition标签对中的标签在显示(隐藏)的过程的事件等

.v-enter-to(.v-leave-to)    设置transition标签对中的标签在显示(隐藏)之后的样式

transition与template标签对一样，内部只能有一个根标签；

当页面中只有一个transition标签对时，可以使用.v-enter等这种默认的写法；

但是如果有两个及以上的transition标签对时，可以对transition标签对添加name属性；然后在使用 .name值-enter  这种写法(其余五相同)；

3.2 代码演示

.v-enter{
    /* 标签在显示之前的样式 */
    opacity: 0;
}
.v-enter-active{
    /* 标签显示的过程,一般设置过渡事件 */
    transition: 1s;
}
.v-enter-to{
    /* 标签显示之后的样式 */
    opacity: 1;
}
.v-leave{
    /* 标签在隐藏之前的样式 */
    opacity: 1;
    transform: rotate(0) scale(1);
}
.v-leave-active{
    /* 标签隐藏的过程,一般设置过渡事件 */
    transition: 1s;
}
.v-leave-to{
    /* 标签隐藏之后的样式 */
    opacity: 0;
    transform: rotate(360deg) scale(0.1);
}

.demo-enter,
.demo-leave-to {
    opacity: 0;
    transform: translateX(1200px);
}

.demo-enter-active,
.demo-leave-active {
    transition: 1s;
}

.demo-enter-to,
.demo-leave {
    opacity: 1;
    transform: translateX(0);
}

<div id="app">
    <button @click="bool=!bool">显示/隐藏</button>
    <!-- 1.把显示和隐藏的元素放入transition标签(vue)里面,并且设置为插槽内容 -->
    <transition>
        <h4 v-show="bool">
            vue动画   用于标签显示/隐藏的动画效果
        </h4>
    </transition>

    <transition name="demo">
        <h3 v-show="bool">通过给transition添加name属性,区分和其他的过渡动画的属性 </h3>
    </transition>
</div>

new Vue({
    el:'#app',
    data:{
        bool:true,
    }
})

3.3 添加动画效果总结

1.transition    css过渡动画 一般通过鼠标悬停或者其他操作来显示动画效果.主要是来更改标签样式

2.关键帧动画    可以实现动画过程中的每一帧的动画效果

3.js动画      定时器显示和requestAnimationFrame 请求帧动画实现

4.vue动画     用于标签显示/隐藏的动画效果