【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>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/705709.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot -【BeanPostProcessor】基础使用及应用场景

SpringBoot -【BeanPostProcessor】基础使用及应用场景

BeanPostProcessor应用与优化 1. 引言 在现代软件开发中&#xff0c;企业开发面临着越来越复杂的系统架构和业务需求。随着项目规模的扩大和技术栈的增多&#xff0c;需要更高效的工具来应对这些挑战&#xff0c;并确保代码的可维护性和扩展性。 在这样的背景下&#xff0c;Be…
阅读更多...
滴滴在合规宽限期内不能出车,滴滴平台会怎么处罚

滴滴在合规宽限期内不能出车,滴滴平台会怎么处罚

滴滴合规宽限期内违规出车&#xff0c;平台严惩不贷&#xff01; 滴滴合规政策回顾 滴滴出行作为国内领先的出行平台&#xff0c;始终致力于为用户提供安全、合规的出行服务。为了保障乘客权益&#xff0c;滴滴对司机和车辆都有严格的合规要求。在合规宽限期内&#xff0c;滴…
阅读更多...
MySQL的SQL语句

MySQL的SQL语句

1.MySQL连接 连接命令一般是这样写的 mysql -h$ip -P$port -u$user -p比如:mysql -h127.0.0.1 -P3306 -uroot -p -h 指定连接的主机地址&#xff1b;-P 指定连接端口号&#xff1b;-u 指定用户名 -p指定用户名密码 2.SQL分类 DDL(Data Definition Language) 数据定义语言&…
阅读更多...
动态规划的时间复杂度优化

动态规划的时间复杂度优化

作者推荐 视频算法专题 本文涉及知识点 动态规划汇总 优化动态规划的时间复杂度&#xff0c;主要有如下几种&#xff1a; 一&#xff0c;不同的状态表示。 比如&#xff1a;n个人&#xff0c;m顶帽子。 第一种方式&#xff1a;dp[i][mask] ,i表示前i个人已经选择帽子&…
阅读更多...
再见，Visual Basic——曾经风靡一时的编程语言

再见，Visual Basic——曾经风靡一时的编程语言

2020年3月&#xff0c;微软团队宣布了对Visual Basic&#xff08;VB&#xff09;的“终审判决”&#xff1a;不再进行开发或增加新功能。这意味着曾经风光无限的VB正式退出了历史舞台。 VB是微软推出的首款可视化编程软件&#xff0c;自1991年问世以来&#xff0c;便受到了广大…
阅读更多...
国际生物发酵产品技术展2024-齐力控股

国际生物发酵产品技术展2024-齐力控股

参展企业介绍 齐力控股集团凭借在此领域多年的生产经验&#xff0c;为客户提供各种优质的产品。齐力控股集团与世界同步的生产宗旨&#xff0c;确立完整的角色定位和明确方向&#xff0c;向大众传递本公司的营销特点和服务模式。本公司是一家集科研、生产为一体的现代企业&…
阅读更多...
如何进行Appium实现移动端UI自动化测试？

如何进行Appium实现移动端UI自动化测试？

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Appium是一个开源跨平台移动应用自动化测试框架。 既然只是想学…
阅读更多...
瑞_Redis_Redis客户端

瑞_Redis_Redis客户端

文章目录 1 Redis客户端1.1 Redis命令行客户端1.2 图形化桌面客户端1.2.1 资源准备1.2.2 安装1.2.3 建立连接 &#x1f64a; 前言&#xff1a;本文章为瑞_系列专栏之《Redis》的基础篇的Redis客户端章节。由于博主是从B站黑马程序员的《Redis》学习其相关知识&#xff0c;所以本…
阅读更多...
Spring11、整合Mybatis

Spring11、整合Mybatis

11、整合Mybatis 步骤&#xff1a; 导入相关jar包 junit <dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version> </dependency> mybatis <dependency><groupId>org.my…
阅读更多...
Qt QWidget 简约美观的加载动画 第二季

Qt QWidget 简约美观的加载动画 第二季

&#x1f603; 第二季来啦 &#x1f603; 简约的加载动画,用于网络查询等耗时操作时给用户的提示. 这是最终效果: 一共只有三个文件,可以直接编译运行 //main.cpp #include "LoadingAnimWidget.h" #include <QApplication> #include <QVBoxLayout> #i…
阅读更多...
如何保护企业免受人工智能网络钓鱼攻击

如何保护企业免受人工智能网络钓鱼攻击

文章目录 前言一、生成式人工智能带来了新的网络安全威胁二、人工智能将使网络钓鱼攻击变得更加危险三、企业如何阻止人工智能驱动的网络钓鱼四、网络钓鱼模拟确保责任感和适应性前言 网络钓鱼是网络犯罪分子社会工程武器库中的超级武器。网络钓鱼尤其危险，因为它是网络犯罪分…
阅读更多...
Redis 管道详解

Redis 管道详解

Redis 管道 关键词&#xff1a;Pipeline Pipeline 简介 Redis 是一种基于 C/S 模型以及请求/响应协议的 TCP 服务。通常情况下&#xff0c;一个 Redis 命令的请求、响应遵循以下步骤&#xff1a; 客户端向服务端发送一个查询请求&#xff0c;并监听 Socket 返回&#xff08…
阅读更多...
美创科技荣获“2023年网络安全国家标准优秀实践案例”

美创科技荣获“2023年网络安全国家标准优秀实践案例”

近日&#xff0c;全国网络安全标准化技术委员会正式公布2023年网络安全国家标准优秀实践案例获奖名单。 杭州美创科技股份有限公司&#xff08;以下简称&#xff1a;美创科技&#xff09;申报的“GB/T 20281-2020《信息安全技术 防火墙安全技术要求和测试评价方法》在政企领域数…
阅读更多...
【监督学习之支持向量机（SVM）】

【监督学习之支持向量机（SVM）】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 简述概要知识图谱基本原理支持向量线性SVM与非线性SVM优化问题软间隔与正则化SVM的应用实现 简述概要 了解监督学习-支持向量机&#xff08;SVM&#xff09; 知识图谱 支持向量机&#xff08;Support Vector Machine&…
阅读更多...
visual stdio 使用ATL简单使用COM组件

visual stdio 使用ATL简单使用COM组件

先试用visual stdio创建ATL项目 选择第一个创建ATL简单对象 ProgId也需要添加一下&#xff0c;默认创建完之后添加方法 STDMETHODIMP AddNumber(LONG __num, LONG* result);添加定义 STDMETHODIMP_(HRESULT __stdcall) CATLSimpleObject::AddNumber(LONG __num, LONG* r…
阅读更多...
LASSO算法

LASSO算法

LASSO (Least Absolute Shrinkage and Selection Operator) 是一种回归分析的方法&#xff0c;它能够同时进行变量选择和正则化&#xff0c;以增强预测准确性和模型的解释性。LASSO通过在损失函数中加入一个L1惩罚项来实现这一点。该惩罚项对系数的绝对值进行约束。 基本概念 …
阅读更多...
【深度学习笔记】深度卷积神经网络——AlexNet

【深度学习笔记】深度卷积神经网络——AlexNet

深度卷积神经网络&#xff08;AlexNet&#xff09; 在LeNet提出后&#xff0c;卷积神经网络在计算机视觉和机器学习领域中很有名气。但卷积神经网络并没有主导这些领域。这是因为虽然LeNet在小数据集上取得了很好的效果&#xff0c;但是在更大、更真实的数据集上训练卷积神经网…
阅读更多...
数学建模论文、代码百度网盘链接

数学建模论文、代码百度网盘链接

1.[2018中国大数据年终总决赛冠军] 金融市场板块划分与轮动规律挖掘与可视化问题 2.[2019第九届MathorCup数模二等奖] 数据驱动的城市轨道交通网络优化策略 3.[2019电工杯一等奖] 露天停车场停车位的优化设计 4.[2019数学中国网络数模一等奖] 基于机器学习的保险业数字化变革…
阅读更多...
关于timeline的详细解析

关于timeline的详细解析

关于timeline的详细解析 初始化画布 在echarts中有一个组件叫timeline他与echart中的其他图表结合起来 能很好的展现一段时间内各种数据的变化趋势 接下来我将用官网案例去逐步展示一下关于timeline中的各种详细配置 首先我们创建好vue的组件结构先尝试一些简单的小demo看看…
阅读更多...
Spark集群搭建的三种方式详解

Spark集群搭建的三种方式详解

国科大学习生活&#xff08;期末复习资料、课程大作业解析、学习文档等&#xff09;: 文章专栏&#xff08;点击跳转&#xff09; 大数据开发学习文档&#xff08;分布式文件系统的实现&#xff0c;大数据生态圈学习文档等&#xff09;: 文章专栏&#xff08;点击跳转&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023