【Vue3】插槽使用和animate使用
插槽使用
- 插槽slot
- 匿名插槽
- 具名插槽
- 插槽作用域
- 简写
- 动态插槽
- transition动画组件
- 自定义过渡class类名
- 如何使用animate动画库组件
- 动画生命周期
- appear
- transition- group过渡列表
插槽slot
- 插槽就是子组件中提供给父组件使用的一个占位符
- 父组件可以在这个占位符智能填充任何模板代码,填充的内容会在替换子组件的slot标签
匿名插槽
- 子组件
<template><div class="main"><h1>子组件</h1><slot></slot></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
</script><style scoped></style>
- 父组件
<template><div class="main"></div><Aslot><template v-slot><div>匿名插槽</div></template></Aslot>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
import Aslot from './components/slot.vue';
</script><style scoped></style>
具名插槽
- 子组件
- 父组件
插槽作用域
- 作用域插槽其实就是带数据的插槽,即带参数的插槽,
- 简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用
- 父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。
- 子组件
<template><div class="main"><slot></slot><h1>子组件</h1><div v-for="(item, index) in data" :key="index">//父组件需要什么值,就传递什么值<slot :data="item" :index="index"></slot></div></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
//定义要给父组件的内容
const data = reactive([{ name: '1', age: 1 },{ name: '2', age: 2 },
]);
</script><style scoped></style>
- 父组件
<template><div class="main"></div><Aslot><template v-slot="{ data, index }"><div>{{ data }}--{{ index }}</div></template></Aslot>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
import Aslot from './components/slot.vue';
</script><style scoped></style>
简写
<template><div class="main"></div><Aslot>//v-slot变成# <template #centerslot><div>具名插槽</div></template><template #default="{ data }"><div>{{ data.name }}--{{ data }}</div></template></Aslot>
</template>
动态插槽
transition动画组件
- vue提供transition的封装组件,在下列情形下,可以给任何元素和组件添加进入/离开过渡
- 条件渲染(v-if)
- 条件展示(v-show)
- 动态组件
- 组件根节点
-
在进入和离开的过渡中,会有6个class的切换
-
name提供类名
<template><div class="main"><!-- transition,动画组件 --><transition name="box"><div v-if="isblooen" class="box-bg">动画盒子</div></transition><button @click="change">切换1</button></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
let isblooen = ref('true');
const change = () => {isblooen.value = !isblooen.value;
};
</script>
//在进入和离开的过渡中,会有6个class的切换
<style scoped lang="less">
.box-bg {width: 200px;height: 200px;border: 1px solid #00f;
}
//显示之前,第一个字母和上面name一致
.box-enter-from {width: 0px;height: 0px;background: #777;
}
//动画开始
.box-enter-active {background: #777;transition: all 10s ease;
}
//动画结束
.box-enter-to {width: 200px;height: 200px;background: #777;
}
//隐藏之前
.box-leave-from {
}
//隐藏中
.box-leave-active {
}
//隐藏后
.box-leave-to {
}
</style>
自定义过渡class类名
<template><div class="main"><!-- transition,动画组件 --><transition name="box"><div v-if="isblooen" class="box-bg">动画盒子</div></transition><!-- 写法2 自定义过渡class类名--><transitionname="box"enter-form-class="e-form"enter-active-class="e-active"enter-to-class="e-to"><div v-if="isblooen" class="box-bg">动画盒子</div></transition><button @click="change">切换1</button></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
let isblooen = ref('true');
const change = () => {isblooen.value = !isblooen.value;
};
</script><style scoped lang="less">
.box-bg {width: 200px;height: 200px;border: 1px solid #00f;
}
//显示之前
.box-enter-from {width: 0px;height: 0px;background: #777;
}
//写法2,自定义类名
.e-form {width: 0px;height: 0px;background: #777;
}
//动画开始
.box-enter-active {background: #777;transition: all 10s ease;
}
.e-active {background: #755577;transition: all 10s ease;
}
//动画结束
.box-enter-to {width: 200px;height: 200px;background: #777;
}
.e-to {width: 200px;height: 200px;background: #766677;
}
//隐藏之前
.box-leave-from {
}
//隐藏中
.box-leave-active {
}
//隐藏后
.box-leave-to {
}
</style>
如何使用animate动画库组件
- 安装: npm install animate.css
- 官方文档地址
- 步骤2,导入动画库
- 步骤三,使用
- leave-active-class是6个class的动画类名
动画生命周期
appear
- 通过这个属性可以设置初始节点,就是页面加载完成就开始动画对应的三个状态
- 相当于一进来,动画就开始执行
<template><div class="main"><transitionappearappear-class="animate__animated animate__backInLeft"appear-active-class="animate__animated animate__backInRight"appear-to-class="animate__animated animate__backOutUp"><div v-if="isblooen" class="box-bg">动画盒子</div></transition><button @click="change">切换1</button></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
import 'animate.css';let isblooen = ref('true');
const change = () => {isblooen.value = !isblooen.value;
};
</script><style scoped lang="less">
.box-bg {width: 200px;height: 200px;border: 1px solid #00f;
}
//显示之前
.box-enter-from {width: 0px;height: 0px;background: #777;
}
.e-form {width: 0px;height: 0px;background: #777;
}
//动画开始
.box-enter-active {background: #777;transition: all 10s ease;
}
.e-active {background: #755577;transition: all 10s ease;
}
//动画结束
.box-enter-to {width: 200px;height: 200px;background: #777;
}
.e-to {width: 200px;height: 200px;background: #766677;
}
//隐藏之前
.box-leave-from {
}
//隐藏中
.box-leave-active {
}
//隐藏后
.box-leave-to {
}
</style>
transition- group过渡列表
- 相当于transition-group包裹的内容,可以给他们添加,删除,初始化增加动画效果
<template><div class="main"><!-- appear-active-class是初始化动画enter-active-class是添加是动画leave-active-class是删除时动画--><transition-groupappearappear-active-class="animate__animated animate__backInDown"enter-active-class="animate__animated animate__backInDown"leave-active-class="animate__animated animate__lightSpeedInRight"><div v-for="(item, index) in list" :key="index">{{ item }}</div></transition-group><button @click="add">添加</button><button @click="del">删除</button></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
import 'animate.css';
const list = reactive<number>([1, 2, 3, 4, 5, 6]);
//增加
const add = () => {list.push(9);
};
//删除
const del = () => {list.pop();
};
</script><style scoped></style>
相关文章:

【Vue3】插槽使用和animate使用
插槽使用 插槽slot匿名插槽具名插槽插槽作用域简写 动态插槽transition动画组件自定义过渡class类名如何使用animate动画库组件动画生命周期appear transition- group过渡列表 插槽slot 插槽就是子组件中提供给父组件使用的一个占位符父组件可以在这个占位符智能填充任何模板代…...

HarmonyOS—低代码开发Demo示例
接下来为大家展示一个低代码开发的JS工程的Demo示例,使用低代码开发如下华为手机介绍列表的HarmonyOS应用/服务示例。 1.删除模板页面中的控件后,选中组件栏中的List组件,将其拖至中央画布区域,松开鼠标,实现一个List组…...
Spring体系下解决请求统一加解密之ResponseBodyAdvice和RequestBodyAdvice
在日常写项目中经常一般正规的项目都需要将信息加密后返回前端,前端进行解密后再展示出来给用户,这样做的目的无一不是为了安全,在Java开发中,如何简单快速的完成这个功能呢,这里就需要用到这两个接口ResponseBodyAdvi…...
C# 经典:ref 和 out 的区别详解
在C#中,ref和out关键字用于按引用传递变量,它们在变量传递、输出参数、返回值以及异常处理等方面有一些重要区别。本文将详细阐述这些差异。 1. 变量传递 ref和out关键字都可以用于方法的参数传递。它们的主要区别在于如何处理变量的引用。 ref关键字…...
Linux 系统添加虚拟内存的方法
https://cloud.189.cn/t/6nqy2m3YnUN3 (访问码:ic3i) 云服务器 群晖NAS 切换到 root 模式 sudo su 或者 sudo -i #群晖/volume2 是你添加的硬盘挂载路径 不一定是 volume2 有可能是 volume1 #如果你只有1快硬盘 volume2 改成 volume1 …...
PHP 函数四
一 fgets(resource $stream, ?int $length null) 从文件指针中读取一行。 返回字符串,如果文件指针中没有更多的数据了则返回 false。错误发生时返回 false。 $stream 为文件资源,必须指向fopen()或fscokopen()成功打开的文件。文件打开之后&#x…...
【Android】反编译APK及重新打包
1.下载 APK 反编译工具 首先,需要下载一个 APK 反编译工具,例如 Apktool。可以在官网(https://apktool.org/docs/install)上下载最新版本的 Apktool,也可以使用包管理器来安装。 2.反编译 APK 文件 将要修改包名的 …...

下载huggingface数据集到本地并读取.arrow文件遇到的问题
文章目录 1. 524MB中文维基百科语料(需要下载的数据集)2. 下载 hugging face 网站上的数据集3. 读取 .arrow 文件报错代码4. 纠正后代码 1. 524MB中文维基百科语料(需要下载的数据集) 2. 下载 hugging face 网站上的数据集 要将H…...

.NET高级面试指南专题十一【 设计模式介绍,为什么要用设计模式】
设计模式是软件工程中常用的解决特定问题的通用设计方法。它们提供了经过验证的解决方案,可用于解决在软件开发过程中经常遇到的一些常见问题。设计模式不是一种具体的编程语言特性或语法,而是一种通用的设计思想或模板,可以帮助开发人员设计…...
【Web】关于jQuery萌新必须要知道的那些基础知识
目录 DOM对象和jQuery包装集对象 jQuery选择器 jQuery操作元素的属性,样式,内容 jQuery创建元素和添加元素,删除元素和遍历元素 jQuery-ready加载事件 jQuery绑定事件 jQuery中ajax的使用 DOM对象和jQuery包装集对象 DOM对象…...

第 1 章 微信小程序与云开发从入门到实践从零开始做小程序——开发认识微信小程序
小北的参考工具书 小程序开发的图书并不少,这本书仍然值得你拥有! 首先,这是一本全栈小程序开发教程,循序渐进,由浅入深,介绍了小程序开发你想了解的方方面面,包括近其小程序开发的各种新技术应…...

数据隐私安全趋势
在当今社交媒体和开源开发的世界中,共享似乎已成为社会常态。毕竟,我们都被教导分享就是关怀。这不仅适用于个人,也适用于公司:无论是有意在社交媒体帐户和公司网站上,还是无意中通过员工的行为,公司可能会…...

学习磁盘管理
文章目录 一、磁盘接口类型二、磁盘设备的命名三、fdisk分区四、自动挂载五、扩容swap六、GPT分区七、逻辑卷管理八、磁盘配额九、RAID十、软硬链接 一、磁盘接口类型 IDE、SATA、SCSI、SAS、FC(光纤通道) IDE, 该接口是并口。SATA, 该接口是串口。SCS…...

C语言从入门到精通(一) - C语言开发神器CLion
clion安装配置 下载安装 下载 安装 运行clion clion设置 配置快捷键 配置快捷键为eclipse模式 [可以选择自己喜欢的快捷键模式] 添加cygwin编译器 下载cygwin Cygwin Installation Cygwin是一个在windows平台上运行的类UNIX模拟环境,是Cygnus Solutions公司开发的…...

【办公类-16-10-02】“2023下学期 6个中班 自主游戏观察记录(python 排班表系列)
背景需求: 已经制作了本学期的中4班自主游戏观察记录表 【办公类-16-10-01】“2023下学期 中4班 自主游戏观察记录(python 排班表系列)-CSDN博客文章浏览阅读398次,点赞10次,收藏3次。【办公类-16-10-01】“2023下学…...
SpringBooot之RestTemplate接口返回多层泛型导致java.util.LinkedHashMap cannot be cast to异常
统一泛型返回对象 Data public class Res<T> implements Serializable {private static final long serialVersionUID 6558796578827818466L;private Integer code; //状态码private String msg; //返回消息private T data; //数据 }data里包裹的泛型对象假设是DZPJ D…...
【新三板年报文本分析】第二辑:从pdf链接的列表中批量下载年报文件
第一辑中已经获取了新三板年报的pdf链接,使用request库进行批量下载。 send_headers为requests的headers,不需要做变动。 在for循环中读取每一行数据的链接数据,创建一个空pdf,将链接指向的pdf文件写入空pdf文件。 for循环内容…...

Jessibuca 插件播放直播流视频
jessibuca官网:http://jessibuca.monibuca.com/player.html git地址:https://gitee.com/huangz2350_admin/jessibuca#https://gitee.com/link?targethttp%3A%2F%2Fjessibuca.monibuca.com%2F 项目需要的文件 1.播放组件 <template ><div i…...

【Docker】03 容器操作
文章目录 一、流转图二、基本操作2.1 查看本地容器进程2.2 启动容器2.2.1 交互式启动容器2.2.2 后台启动容器 2.3 进入容器2.4 停止启动重启容器2.5 退出容器2.6 删除容器2.7 提交容器(打包成镜像)2.8 拷贝文件2.8.1 拷贝容器内文件到宿主机2.8.2 拷贝宿…...

【HarmonyOS】鸿蒙开发之Stage模型-基本概念——第4.1章
Stage模型-基本概念 名词解释 AbilityStage:应用组件的“舞台“ UIAbility:包含UI界面的应用组件,是系统调度的基本单元 WindowStage:组件内窗口的“舞台“ Window:用来绘制UI页面的窗口 HAP:Harmony Ability Package(鸿蒙能力类型的包) HSP:Harmony Sh…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令: return <value>;在收到客户端连接后,立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量(如 $time_iso8601、$remote_addr 等)&a…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...

AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...

Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...