锐客网

  1. 首页 > it技术 > >

【vue】内置的组件

内置的组件

  1. component
  2. transition
  3. transition-group
  4. keep-alive
  5. slot
1 component 【【vue】内置的组件】props：is、 inline-template
可以根据数据动态渲染组件
详细见上一章节的is属性
2 transition 包裹一个元素或动态组件，实现过渡的效果
普通元素示例
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; }

在改变 v-if的值的时候并没有 立即删除元素，这是因为当插入或删除包含在 transition组件中的元素，Vue将会做以下处理
  1. 判断元素是否应用了CSS过渡或动画，在恰当的时机添加/删除CSS类名
  2. 如果过渡组件提供了钩子函数，这些钩子函数将在恰当的时机被调用
  3. 如果没有上述的两个条件，DOM操作在下一帧立即执行
2.1 transition的属性
name：自动生成CSS过渡类名
appear：是否在初始渲染时使用过渡
css：是否使用css过渡类
type：指定过渡事件的类型，侦听过渡何时结束，transition | animation
mode：控制离开/进入过渡的时间序列，out-in | in-out
duration：指定过渡的持续时间，number|{enter:number,leave:number}
仅使用js过渡的元素添加v-bind:css="false"，跳过CSS的检测，避免过渡过程中CSS的影响
2.2 过渡的类名
v取决于transition的name属性
v-enter:进入过渡的开始状态
在元素被 插入之前生效，在元素被 插入之后的下一帧移除
v-enter-active：进入过渡生效时的状态
元素被 插入之前生效，在 过渡/动画完成之后移除。 可以定义过渡的过程时间，延迟和曲线函数
v-enter-to：进入过渡的结束状态
元素被 插入之后下一帧生效(移除v-enter)，在 过渡/动画完成后移除
v-leave：离开过渡的开始状态
离开过渡被触发时立刻生效，下一帧移除
v-leave-active：离开过渡的生效时的状态
离开过渡被触发时立刻生效，在过渡/动画完成之后移除。 可以定义离开过渡的过程时间，延迟和曲线函数
v-leave-to：离开过渡的结束状态
离开过渡被触发之后下一帧生效(移除v-leave)，在过渡/动画完成之后移除
【vue】内置的组件
文章图片

2.3 钩子函数

enter和leave中必须使用 done进行回调
其他有关Vue过渡的介绍见官网
过渡&动画
3 transition-group 多组件过渡
属性：
  • tag：指定标签，默认为span
  • move-class：覆盖移动过渡期间应用的CSS类
  • 除了mode，其他与transition相同
事件与transition相同
详细介绍见官网动画&过渡
4 keep-alive 包裹动态组件，会缓存不活动的组件实例，不销毁
属性
  • include：String|RegExp，缓存指定的组件
  • exclude：String|RegExp，拒绝缓存指定的组件
  • max：number，最多可以缓存多少组件实例
//子组件一 //子组件二 //父组件

在不添加keep-alive时，切换组件时会直接 销毁转出的组件
//父组件 //子组件一 //子组件二同上

使用keep-alive会多两个生命周期钩子
activated：当切换 回组件时调用
deactivated：当切换 出组件时调用
5 slot 作为组件模板之中的内容分发插槽
属性
  • name：命名插槽
  • 绑定值：作用域插槽
vm.$slots和vm.$scopedSlots属性
v-slot指令
插槽(默认，具名，作用域)

    推荐阅读


    上一篇：CSS面试题

    下一篇：从5种网络IO模型到零拷贝