菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育
标题: 冯文直-前端-20230209 [打印本页]
作者: 。5962 时间: 2023-2-11 15:01
标题: 冯文直-前端-20230209
一、今日学习内容：
一、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属性
二、今日问题：无
三、解决方案：无
| 欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) |
Powered by Discuz! X3.4 |