学习课程:前端工程师2022版-vue基础入门
lesson26:列表动画2-6 列表动画-慕课网体系课 (imooc.com)
lesson27:状态动画2-7 状态动画-慕课网体系课 (imooc.com)
lesson28:Mixin混入的基础语法(1)1-1 Mixin 混入的基础语法(1)-慕课网体系课 (imooc.com)
讲师:Dell老师
今天继续昨天的课程安排,学习了列表动画、状态动画和Mixin混入的基础语法(1)。
如果要做列表动画,那么外面包裹的标签为<transition-group></transition-group>。它的入场出场动画的类名v-enter和v-leave的六个类名。所以它的使用和之前单元素组件的方法一样。但是它多了一个v-move的类名,作用是使之前存在的列表项在做运动时也能拥有动画属性。
状态动画则是通过方法来实现。方法中定义目标值,用当前值和目标值进行比较直到相等。中间可以通过setInterval定时器设定间隔时间和数据操作。
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被 “混合” 进入该组件本身的选项。
mixin 本质上就是一个 Object 对象,它和 vue 实例上的属性一致,包含 data、methods、computed、watch、生命周期函数等等.
想要混入定义好的 mixin,只需要通过组件的 mixins 属性传入想要混入的 mixin 数组即可我们在定义 mixin 时会出现属性名重复的情况。
组件 data、methods 优先级高于mixin data、methods优先级;生命周期函数,先执行mixin里面的,再执行组件里面的。
继续加油!