【备战春招】第九天+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这六个类名定义动画或者过渡的属性。

继续加油！