Vue3 常用组件

一、Fragment组件

Vue2 的template 模板中必须要有一个根标签,而我们在Vue3 的模板中不需要使用根标签就能渲染,因为Vue3 在内部会将多个标签包含在一个Fragment 虚拟元素中。

好处就在于可以减少标签的层级,减小内存占用。

二、Teleport组件

该组件能够让HTML结构移动到指定的位置,该标签多用于实现弹窗。

<teleport to="移动位置"> HTML结构 <teleport>

这里的移动位置可以是指定的标签名,id名和class名

我们指定的内容就移动到了body 标签中。

三、 Suspense组件

(一)defineAsyncComponent

当用户网速较慢的时候,等待用户加载完成后所有的组件都会一起展示。

为了对展示进行优化,我们可以使用异步引入组件的方法来决定哪些组件先展示,哪些组件后展示。

异步引入组件:

import { defineAsyncComponent } from 'vue';

const 组件名 = defineAsyncComponent(() => import('组件路径'));

 这样在我们网速慢的时候先展示的就是App 组件中的内容:

 

(二) Suspense组件

但是在页面还未加载完成时,就没有Item组件的位置,页面会抖动。

这时候我们就可以使用Suspense 组件来解决这个问题。

<Suspense>

  <template v-slot:default>

    加载完成的样式

  </template>

  <template v-slot:fallback>

    加载中的样式

  </template>

</Suspense>

<template><h1>h1标签</h1><Suspense><template v-slot:default><Item /></template><template v-slot:fallback><h3>加载中...</h3></template></Suspense><h2>h2标签</h2>
</template>

这样,我们在组件还没加载出来的情况下就能够实现加载中的效果。 

(三)配合async使用

我们在子组件中可以返回一个Promise,在这种情况下,也能够保证子组件内部加载完成过后再展示。

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

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

相关文章

使用cli批量下载GitHub仓库中所有的release

文章目录 1\. 引言2\. 工具官网3\. 官方教程4\. 测试用的网址5\. 安装5.1. 使用winget安装5.2. 查看gh是否安装成功了 6\. 使用6.1. 进行GitHub授权6.1.1. 授权6.1.2. 授权成功6.2 查看指定仓库中的所有版本的release6.2.1. 默认的30个版本6.2.2. 自定义的100个版本6.3 下载特定…

springboot实现在线人数统计

在线人数统计 笔者做了一个网站&#xff0c;需要统计在线人数。 在线有两种&#xff1a; 一、如果是后台系统如果登录算在线&#xff0c;退出的时候或者cookie、token失效的时候就算下线 二、如果是网站前台&#xff0c;访问的时候就算在线 今天我们来讲一下第2种情况&…

大数据HCIE成神之路之数学(3)——概率论

概率论 1.1 概率论内容介绍1.1.1 概率论介绍1.1.2 实验介绍 1.2 概率论内容实现1.2.1 均值实现1.2.2 方差实现1.2.3 标准差实现1.2.4 协方差实现1.2.5 相关系数1.2.6 二项分布实现1.2.7 泊松分布实现1.2.8 正态分布1.2.9 指数分布1.2.10 中心极限定理的验证 1.1 概率论内容介绍…

PostgreSQL基于Citus实现的分布式集群

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

MongoDB相关基础操作(库、集合、文档)

文章目录 一、库的相关操作1、查看数据库2、查看当前库3、创建数据库4、删除数据库 二、集合的相关操作1、查看库中所有集合2、创建集合2.1、显示创建2.2、隐式创建 3、删除集合 三、文档的相关操作1、插入文档1.1、插入单条文档1.2、插入多条文档1.3、脚本方式 2、查询文档3、…

cloud的概念

"Cloud"&#xff08;云&#xff09;通常指的是云计算&#xff08;cloud computing&#xff09;领域。云计算是一种通过网络&#xff08;通常是互联网&#xff09;提供计算资源和服务的模型。这些计算资源包括计算能力、存储空间、数据库、网络、分析能力等。云计算模…

PHP 数据类型转换学习资料

PHP 数据类型转换 在 PHP 中&#xff0c;您可以使用内置的类型转换函数来将一个数据类型转换为另一个数据类型。这些函数可以帮助您在程序中进行数据类型的转换和操作。以下是一些常用的 PHP 数据类型转换函数&#xff1a; 1. 转换为字符串类型 (string) $variable&#xff…

python 就是随便玩玩,生成gif图,生成汉字图片,超级简单

文章目录 主方法调用LetterDrawingWordDoingImage 上图 你也想玩的话&#xff0c;可以直接上码云去看 码云链接 主方法调用 import analysisdata.WordDoingImage as WordDoingImage import analysisdata.LetterDrawing as LetterDrawingif __name__ __main__:# 输入的文本&a…

Python利器:os与chardet读取多编码文件

在数据处理中会遇到读取位于不同位置的文件,每个文件所在的层级不同,而且每个文件的编码类型各不相同,那么如何高效地读取文件呢? 在读取文件时首先需要获取文件的位置信息,然后根据文件的编码类型来读取文件。本文将使用os获取文件路径,使用chardet得到文件编码类型。 …

预约按摩小程序功能及使用指南;

小程序预约按摩功能及使用指南&#xff1a; 1. 注册登录&#xff1a;用户可选择通过账号密码或微信一键登录&#xff0c;便捷注册&#xff0c;轻松管理预约服务。 2. 查找店铺&#xff1a;展示附近的按摩店铺信息&#xff0c;用户可根据需求选择合适的店铺进行预约。 3. 选择服…

[autojs]界面上检测无障碍服务和悬浮窗

"ui"; ui.layout(<vertical><appbar><toolbar title"悬浮窗权限无障碍服务"/></appbar><horizontal><Switch id"无障碍服务" text"无障碍服务" checked"{{auto.service ! null}}" padding…

SMB信息泄露的利用

一、背景 今天分享SMB信息泄露&#xff0c;SMB&#xff08;Server Message Block&#xff09;网络通信协议&#xff0c;早些时候被用于Web链接和客户端与服务器之间的信息通信&#xff0c;现在大部分Web页面使用HTTP协议&#xff0c;在web领域应用较少。另一方面SMB协议还是被…

【运维篇】5.4 Redis 并发延迟检测

文章目录 0.前言Redis工作原理可能引起并发延迟的常见操作和命令并发延迟检测分析和解读监控数据&#xff1a;优化并发延迟的策略 1. 检查CPU情况2. 检查网络情况3. 检查系统情况4. 检查连接数5. 检查持久化 &#xff1a;6. 检查命令执行情况 0.前言 Redis 6.0版本之前其使用单…

Java 算法篇-链表的经典算法:判断回文链表、判断环链表与寻找环入口节点(“龟兔赛跑“算法实现)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 链表的创建 2.0 判断回文链表说明 2.1 快慢指针方法 2.2 使用递归方式实现反转链表方法 2.3 实现判断回文链表 - 使用快慢指针与反转链表方法 3.0 判断环链表说明…

设计模式-迭代器模式-笔记

动机&#xff08;Motivaton&#xff09; 在软件构建过程中&#xff0c;集合对象内部结构常常变化各异。但对于这些集合对象&#xff0c;我们呢希望在不暴露其内部结构的同时&#xff0c;可以让外部客户代码透明地访问其中包含的元素&#xff1b;同时这种“透明遍历”也为“同一…

记一次攻防实战渗透

经典开局一个登录框 由于漏洞应该还未修复。对于数据和相关网址打个码见谅一下 常规思路&#xff08;爆破&#xff09; 常规操作进行一波 尝试弱口令然后开始爆破 对于此种有验证码的爆破&#xff0c;可以借用一个bp插件。 captcha-killer-modified-jdk14.jar 具体使用我就…

游戏报错d3dcompiler_47.dll缺失怎么修复,总结多种修复方法

在使用这些软件和游戏的过程中&#xff0c;我们常常会遇到一些问题&#xff0c;其中之一就是d3dcompiler_47.dll丢失的问题。这个问题可能会导致软件或游戏无法正常运行&#xff0c;给用户带来困扰。本文将详细介绍解决软件游戏d3dcompiler_47.dll丢失的方法&#xff0c;帮助您…

地推团队怎么接一手app拉新项目?这几个接单平台可以试试看

首推平台&#xff1a;“聚量推客” 有粉丝问我&#xff1a; 我在五线小城市做地推&#xff0c;有个10人的地推团队&#xff0c;怎么接到一手靠谱的单子&#xff1f; 其实不止一个粉丝在后台问我&#xff0c;做地推、充场的人都在找单子&#xff0c;做这个行业就没有不缺项目的…

C++学习 --文件

文件操作步骤&#xff1a; 1&#xff0c; 包含头文件#include<fstream> 2&#xff0c; 创建流对象&#xff1a;ofstream ofs 3&#xff0c; 打开文件&#xff1a;ofs.open("文件路径"&#xff0c; 打开方式) 4&#xff0c; 写数据&#xff1a;ofs <<…

2分钟快速安装 `nginx` 和配置 `keepalived`

这是详细的步骤来在 CentOS 7 上安装 nginx 和配置 keepalived。 主服务器&#xff08;IP: 192.168.9.195&#xff09; 安装 Nginx 安装 EPEL 仓库&#xff1a; sudo yum install epel-release -y安装 Nginx&#xff1a; sudo yum install nginx -y启动 Nginx 服务并设置开机…