Vue（三）

Vue生命周期

Vue在被创建时都要经过一系列初始化过程，这个初始化过程是Vue的生命周期，以下图是官方文档的图，展示了实例的生命周期

 

Vue在被创建时整个初始化过程中会运行一些叫生命周期钩子的函数

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

插槽（伴随着组件使用，单纯改变内容）

    <div id="app">
        <my-com>
            <div slot="left">左插槽</div>
            <div>Vue</div>
            <div slot="right">右插槽</div>
        </my-com>
    </div>

js部分（不难看出只是在模板里加了一个slot标签就能使用插槽，我们定义两个插槽一左一右）

        const myCom = {
            template: `
            <div>
                <div>组件</div>
                <div class='left'>
                    <slot name="left">left slot</slot>
                </div>
                <div class='right'>
                    <slot name="right">right slot</slot>
                </div>
            </div>
            `,
        }
        new Vue({
            el: '#app',
            components: {
                myCom
            }
        })

作用域插槽（用于需要特定条件，列如循环等...）

    <div id="app">
        <my-com :lists="lists">
            <template slot-scope="prop">
               <li>{{prop.list.title}}</li>
            <template/>
        </my-com>
    </div>

js部分

        const myCom = {
            template: `
            <div>
                <div>组件</div>
                <div>
                    <ul>
                        <slot v-for="list in lists" :list="list">{{list.title}}</slot>
                    </ul>
                </div>
            </div>
            `,
            props:['lists'],
        }
        new Vue({
            el: '#app',
            components: {
                myCom
            },
            data:{
                lists:[
                    {title:'吃饭'},
                    {title:'睡觉'},
                    {title:'玩游戏'},
                    {title:'喝酒'},
                    {title:'上班'},
                ]
            }
        })

动态组件

按钮点击切换不同组件

    <div id="app">
        <component :is="comname"></component> 
        <button @click="comname = 'userName'">userName</button>
        <button @click="comname = 'passWord'">passWord</button>
    </div>

js部分

        const userName = {
            template: `
            <div>
                <label for="">userName</label>
                <input type="text">
            </div>            
            `,
        }
        const passWord = {
            template: `
            <div>
                <label for="">passWord</label>
                <input type="password">
            </div>            
            `,
        }
        new Vue({
            el: '#app',
            components: {
                userName,
                passWord
            },
            data:{
                comname :'userName'
            }
        })

但是有一个问题，输入文本内容后，切换组件文本内容不能缓存，只是只需要在模板上加一个keep-alive标签即可

    <div id="app">
        <keep-alive>
            <component :is="comname"></component> 
        </keep-alive>
        <button @click="comname = 'userName'">userName</button>
        <button @click="comname = 'passWord'">passWord</button>
    </div>

过渡动画

当进入/离开的过渡中，会有6个class类名切换

1. v-enter：定义进入过渡的开始状态
2. v-enter-active：定义进入过渡生效时的状态
3. v-enter-to：定义进入过渡的结束状态
4. v-leave:定义离开过渡的开始状态
5. v-leave-active：定义离开过渡生效时的状态
6. v-leave-to：定义离开过渡的结束状态

下面做个简单的动画过渡例子

css部分

        .v-enter{
            transform:translateX(-100%)
        }
        .v-enter-to{
            transform:translateX(0)
        }
        .v-leave{
            transform:translateX(0)
        }
        .v-leave-to{
            transform:translateX(-100%)
        }
        .v-leave-active,.v-enter-active{
            transition: all ease 0.5s;
        }

html部分

    <div id="app">
        <transition>
            <user-name v-if="flag"></user-name>
        </transition>
        <button @click="flag=!flag">点击</button>
    </div>

js部分

        const userName = {
            template: `
            <div>
                <label for="">userName</label>
                <input type="text">
            </div>            
            `,
        }
        const passWord = {
            template: `
            <div>
                <label for="">passWord</label>
                <input type="password">
            </div>            
            `,
        }
        new Vue({
            el: '#app',
            components: {
                userName,
                passWord
            },
            data:{
                comname :'userName',
                flag:true
            },
        })

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式

• in-out：新元素先进行过渡，完成之后当前元素过渡离开
• out-in：当前元素先进行过渡，完成之后新元素过渡进入

        <transition mode="out-in">
            <component :is="comname"></component>
        </transition>

transition组件支持取名的，加个name属性,改了名字之后的6个class类名v-开都要换成newtran开头，列如：.v-enter-to => .newtran-enter-to

        <transition mode="out-in" name="newtran">
            <component :is="comname"></component>
        </transition>