手记

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

学习课程:前端工程师2022版-vue基础入门

lesson22:基础知识点查缺补漏

1-13 基础语法知识点查缺补漏-慕课网体系课 (imooc.com)

lesson23:使用vue实现基础的CSS过渡与动画效果

2-1 使用 Vue 实现基础的 CSS 过渡与动画效果-慕课网体系课 (imooc.com)

lesson24:使用transition标签实现单元素组件的过渡和动画效果(1)

2-2 使用 transition 标签实现单元素组件的过渡和动画效果(1)-慕课网体系课 (imooc.com)

讲师:Dell老师


v-once指令表示标签/组件只渲染一次;渲染一次后,如果数据变化,标签/组件的内容不会跟随变化。

ref指令表示标签、组件设置该属性后,可以通过“this.$refs.xxx”的形式获取到该标签的dom节点、该组件的引用。

provide指令表示祖先组件,通过provide,可以向子孙组件注入依赖;inject指令表示孙子组件,通过inject,可以在可用的注入内容中搜索需要使用的内容;二者配合,可以实现祖先组件向子孙组件传值(一次性的)。

基础的CSS动画效果的实现:在style里面定义好动画效果,data中返回一个对象,对象的属性名为类名。在标签上绑定类名为返回的对象。对象中可以有多个属性,对应多个动画效果。过渡同理,style里面定义好过渡效果,data返回的对象属性把过渡和起始状态样式类名添加进去,通过方法改变对应属性的布尔值,从而达到过渡效果。还有一种办法就是元素类名为过渡属性的类名,v-bind绑定style属性为data里定义的对象,对象的属性则为需要设置的样式。通过改变对象属性的值同样可以达到效果。

第三种方法就是在需要做动画的元素外边通过transition标签包裹起来,此时只需要在style中定义动画,通过

.v-enter-from、.v-enter-to、.v-enter-active、.v-leave-from、.v-leave-to、.v-leave-active这六个类名定义动画或者过渡的属性。

继续加油!


0人推荐
随时随地看视频
慕课网APP