Vue动态组件、过渡动画

穿缩框

异步组件

Vue.component('qf-button',function(resolve,reject){
  setTimeout(()=>{
        resolve({
          template:`
           <div>hello </div>
          `    
        })
  },2000)
})

Vue动态组件

动态组件 也是内置组件

• 使用包裹的组件，不会死掉，也就是不会进入销毁阶段

• 这个内置组件，经常根据条件显示指定的组件

• 被所包裹的组件，没有销毁阶段即没有beforeDestroy/destroyed，但是又新增了两个生命周期deactivated/activated

• activated当组件被激活时触发该生命周期，“激活”也叫做”进入前台“。

• deactivated当组件被休眠时触发该生命周期，“休眠”也叫“进入后台”

• created/mounted/activated被的组件，这三个生命周期要灵活使用

• beforeDestroy/destroyed/deactivated也要注意

自定义指令

• 在当前项目中，有一类非常常用的与Dom相关的功能，我们建议使用Vue.directive()封装自定义指令

• 语法：使用Vue.directive()全局封装或者directives选项来局部封装

过渡动画

• 过渡动画：一般在做用户体验开发时才用得到。一般用于给元素的显示、隐藏、列表变化添加动画
• 技术：两个内置组件
• 做法：把包裹在目标元素，用name属性并指定动画名称即可
• 如何定义动画名字：
• .x-enter / .x-enter-active /.x-enter-to /.x-leave /.x-leave-active / .x-leave-to x就是动画名称，用在
• 上述六个类名，有四个时刻，两个过程，工作中一般只考虑两个过程 ，不考虑四个时刻
• 如何使用第三方css动画，我们以animate.css为例来讲解。
  • enter-active-class 该用于指定进入动画的css类名
  • leave-active-class 该属性用于指定离开动画的css类名
• 对多个元素做动画
  • 记得要加key不然不是vue3不会执行
  • 还可以添加mode属性mode="in-out"先进后出，mode="out-in"先出后进