携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情
- 内置组件
- Vue.js内部提供的组件，比如v-slot
- 动态组件
- 适用于多个组件频繁切换的处理操作
<component>用于将一个“元组件”渲染为动态组件，以is属性值决定渲染哪个组件- 案例：用于实现多个组件的快速切换，例如选项卡切换效果
- is属性会在每次切换组件时，Vue都会创建一个新的组件实例
- keep-alive组件
- 主要用于保留组件状态或避免组件重新渲染
- include属性用于指定哪些组件会被缓存，具有多种设置方式
v-bind写法：
正则表达式写法：
- exclude属性用于指定哪些组件不会被缓存，同样有三种书写方式
- max属性用于设置最大缓存个数：距离本次操作最远的会被清除
- 主要用于保留组件状态或避免组件重新渲染
- 过渡组件
- 用于在Vue插入、更新或者移除DOM时，提供多种不同方式的应用过渡、动画效果
- 过渡组件-transition组件
- 用于给元素和组件添加进入/离开过渡
- 条件渲染（使用v-if）
- 条件展示（使用v-show）
- 动态组件
- 组件根节点
- 组件提供了6个class，用于设置过渡的具体效果
- 入场动画类名：
- v-enter 入场前状态
- v-enter-to
- v-enter-active
- 出场动画类名：
- v-leave 即将离场前的状态
- v-leave-to 离场目标状态（即离场后完全显示状态）
- v-leave-active
- name属性
- 给组件设置name属性，可用于给多个元素、组件设置不同的过渡效果，这时需要将v-更改为对应name-的形式
- 例如：
<transition name = "demo">的对应类名前缀为：- demo-enter
- demo-leave
- 通过appear属性，可以让组件在初始渲染时实现过渡（即刚开始刷新时）
- 用于给元素和组件添加进入/离开过渡
- 过渡组件-自定义过渡类名
- 自定义类名比普通类名优先级更高，在使用第三方CSS动画库时非常有用
- 用于设置自定义过渡类名名的属性如下：
- enter-class 入场初始状态的类名
- enter-active-class 入场过程的类名
- enter-to-class 入场最终过程的类名
- leave-class
- leave-active-class
- leave-to-class
- 用于设置初始过渡类名的属性如下：
- appear-class
- appear-to-class
- appear-active-class
- Animate.css是一个第三方CSS动画库，通过设置类名给元素添加各种动画效果，需要添加两个下划线
- 使用注意：animate__前缀与compat版本
- 基础类名设置：animate__animated
- 过渡组件- transition-group组件
<transition-group>用于给列表统一设置过渡动画- tag属性用于设置容器元素，默认为
- 过渡会应用于内部元素，而不是容器
- 子节点必须有独立的key，动画才能正常工作
- 当列表元素变更导致元素位移，可以通过.v-move类名设置移动时的效果，在transition中没有
本期的内容就到这里啦！让我们明天一起继续学习Vue.js吧!
