Vue基础回顾(2)

动态组件

keep-alive，被包裹的组件会新增2个生命周期：activated,deactivated,同时也少了2个生命周期：beforeDestroy,destroyed。切换页面只会触发activated,离开页面只会触发deactivated。

component

<component is='组件名'></component>    <!--显示对应组件页面-->

directive

如果一类非常常用而且频繁操作DOM的指令不满足业务需求，我们可以用directive自己定义一个指令

    Vue.directive('组件名称',{inserted:function(el,binding,vnode){        
    //el 当前节点   binding 一个对象包括指令的很多信息  vnode 虚拟节点，可以获取上下文
    //直接function默认是inserted和updated都有
        //第一次执行的操作
    }},
    update:function(){
            //每有变化就会执行的操作
    },
    ......
      )

过渡动画 transition

语法：name-enter/name-enter-active/name-enter-to name-leave/name-leave-active/name-leave-to 还有一个可选属性：mode(out-in) 先执行离开动画再执行进入动画， (in-out) 先执行进入动画再执行离开动画。

<transition name='xxx'></transition>

    .xxx-enter {color: red; opacity:0; font-size:12px; }
    .xxx-enter-active { transition: all ease 2s; }
    .xxx-enter-to {color:black; opacity:1; font-size: 60px;}

    .xxx-leave {color:black; opacity:1; font-size: 60px;}
    .xxx-leave-active {transition: all ease 2s;}
    .xxx-leave-to {color:blue; opacity:0; font-size:12px;}

也可以使用第三方库，例如animate.css

 <transition
      enter-active-class='animate__animated animate__fadeInBottomRight'
      leave-active-class='animate__animated animate__fadeOutBottomLeft'
      mode='out-in'
    >
      <h1 key='0' v-if='idx===0'>我是第一行文字</h1>
      <h1 key='1' v-else-if='idx===1'>我是第二行文字</h1>
      <h1 key='2' v-else>我是第三行文字</h1>
    </transition>
    <button @click='idx=((++idx)%3)'>循环显示</button>

注意：在一个transition里要给多个元素加动画时，要给每个元素加一个Key,否则动画不生效。