一、今日学习内容： 一、Vue组件-插槽（slot） 1、什么是插槽 插槽就是：在子组件中放一个"坑", 以后由父组件来"填" 2、匿名插槽:没有名字的插槽 3、具名插槽：是给插槽起一个名字，<slot> 元素有一个特殊的 attribute：name； 一个不带 name 的slot，会带有隐含的名字 default； 在使用时可以通过slot="name"方式, 指定当前内容用于替换哪一个插槽 4、作用域插槽：带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据 5、v-slot指令 v-slot指令只能用在template标签上 可以使用#号替代v-slot 二、生命周期 生命周期：每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程； 1、生命周期函数：是一些钩子函数（回调函数），在某个时间会被Vue源码内部进行回调； 通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段； 生命周期钩子 = 生命周期函数 = 生命周期事件son 生命周期三个阶段 三大阶段：初始化显示、更新显示、销毁Vue实例 beforeCreate() 实例创建前：数据和模板均未获取到 created() 实例创建后: 最早可访问到 data 数据，但模板未获取到 beforeMount() 数据挂载前：模板已获取到，但是数据未挂载到模板上。 mounted() 数据挂载后：数据已挂载到模板中 更新阶段的钩子函数： beforeUpdate() 模板更新前：data 改变后，更新数据模板前调用 updated()模板更新后：将 data 渲染到数据模板中 销毁阶段的钩子函数： beforeDestroy() 实例销毁前 destroyed() 实例销毁后 activated和deactivated 当配合vue的内置组件 <keep-alive> ⼀起使⽤的时候,才会调⽤下⾯此⽅法 三、Vue特殊特性ref Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面 在Vue中如果想要拿到DOM元素我们可以通过ref来获取 ref使用： 1.在需要获取的元素上添加ref属性. 例如: <p ref="mypp">我是段落</> 2.在使用的地方通过 this.$refs.xxx获取, 例如 this.$refs.myppp ref特点 ref添加到元素DOM上, 拿到的就是元素DOM ref添加到组件上, 拿到的就是组件 四、Vue动画 1.如何给Vue控制的元素添加过渡动画 单元素或者组件实现过渡动画，可以使用 transition 内置组件来完成动画； 1.2 进入和离开都分为三个阶段 v-enter：定义进入过渡的开始状态。 在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。 在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线 函数。 v-enter-to：定义进入过渡的结束状态。 在元素被插入之后下一帧生效 (与此同时 v-ente被移除)，在过渡/动画完成之后移除。 v-leave：定义离开过渡的开始状态。 在离开过渡被触发时立刻生效，下一帧被移除。 v-leave-active：定义离开过渡生效时的状态。 在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟 和曲线函数。 v-leave-to：离开过渡的结束状态。 在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡/动画完成之后移除 当transition组件中的元素显示时会自动查找.v-enter/.v-enter-active/.v-enter-to类名 当transition组件中的元素隐藏时会自动查找.v-leave/ .v-leave-active/.v-leave-to类名 1.3 我们只需要在.v-enter和.v-leave-to中指定动画动画开始的状态 在.v-enter-active和.v-leave-active中指定动画执行的状态 即可完成过渡动画 初始动画设置：appear属性 二、今日问题：无 三、解决方案：无
| 
