继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【备战春招】第十一天+vue复习

Niklause
关注TA
已关注
手记 21
粉丝 3
获赞 0

学习课程:前端工程师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里面的,再执行组件里面的。

继续加油!

http://img1.sycdn.imooc.com/63ef8e8000014b1525601440.jpg

http://img2.sycdn.imooc.com/63ef8e800001afd125601440.jpg

http://img1.sycdn.imooc.com/63ef8e800001abb625601440.jpg

http://img1.sycdn.imooc.com/63ef8e810001abb625601440.jpg

http://img3.sycdn.imooc.com/63ef8e810001c65f25601440.jpg

http://img2.sycdn.imooc.com/63ef8e83000170a625601440.jpg















打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP