Vue3中的新的内置组件
在vue2中的内置组件:
动态路由中的 component :作用:动态显示路由的挂载点,使用 is 属性动态显示组件 ;
keep-alive :作用:使被包裹的组件保留状态,避免被重新渲染 ;
路由中的router-link :作用:和 超链接类似,使用 to 属性制定 url 跳转页面 ;
router-view :路由出口 ;
vue3的新的内置组件:
Fragment 组件 :
描述:在 vue2.x 中组件模板必须要一个根标签;但是在 vue3.x 中不再需要一个根标签,它会自 动创建一个 Fragment ;在代码中是不显示的,可以在 vue.develop.js 插件中看到 ;
Suspense 组件:
作用: 加载异步组件的时候,渲染一些其他内容
场景: 加载异步组件的时候渲染 加载中
把组件转换成异步组件的方式:
import { defineAsyncComponent } from 'vue';
const Child = defineAsyncComponent(() => import('./Child.vue'));
Teleport 组件
作用: 将指定 DOM 内容移动到指定的某个节点里面(可以理解为将组件挂载到指定节点上面)
使用场景: 弹框、播放器组件的定位
Vue3中的新的内置组件的更多相关文章
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- 通俗易懂了解Vue内置组件keep-alive内部原理
1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...
- Vue内置组件[回顾]
1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...
- Django:内置组件Content-Type
12.Django组件之Content_Type 1.帮助我们生成了一张表,里面有所有表名.这样不再自建表在表中填表名,用Foreignkey获取 2.为了让我们快速进入插入数据,填写一个字段Gene ...
- vue-learning:33 - component - 内置组件 - 过渡组件transition
vue内置过渡组件transition 目录 什么是过渡 基本过渡或动画实现的语法 css过渡动画:transition / animation js过渡:特定事件钩子函数 各种情形下的过渡实现,使用 ...
- 阅读vue源码-----内置组件篇(keep-alive)
1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:&l ...
- Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色
1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...
- form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
- Python中匿名函数与内置高阶函数详解
大家好,从今天起早起Python将持续更新由小甜同学从 初学者的角度 学习Python的笔记,其特点就是全文大多由 新手易理解 的 代码与注释及动态演示 .刚入门的读者千万不要错过! 很多人学习pyt ...
- vue第十一单元(内置组件)
第十一单元(内置组件) #课程目标 熟练掌握component组件的用法 熟练使用keep-alive组件 #知识点 #1.component组件 component是vue的一个内置组件,作用是:配 ...
随机推荐
- SpringBoot全局异常处理及自定义异常
首先定义自定义返回类,如果自己项目中已经有了自定义返回类只需要将后面的代码做相应的修改即可: import io.swagger.annotations.ApiModelProperty; impor ...
- 【ActiveJdbc】03
一.查询API 简单条件筛选: List<Person> list = Person.where("name = 'John'") 动态参数条件: List<Pe ...
- 最小二乘法的矩阵正则化改进——“岭回归”和“LASSO回归”算法
看代码过程中发现了一个很奇怪的概念,叫做"最小二乘法的矩阵正则化",这个词汇十分的陌生,虽然最小二乘法是知道的,但是用了矩阵正则化的最小二乘法是个什么东西呢? 相关代码见: 强化学 ...
- 【转载】 python鸭子类型与protocol
版权声明:本文为CSDN博主「yuanzhoulvpi」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/yuan ...
- 白鲸调度系统助力国内头部券商打造国产信创化 DataOps 平台
导读 国内某头部券商是国内排名前三的全国性大型综合证券公司.作为证券行业领头羊之一,该券商一直高度重视核心系统的自主可控以及网络信息安全.早些时候,其已经完成了信创化数据库改造和OA系统适配,接下来的 ...
- Android网页投屏控制从入门到放弃
背景 业务需要采集在app上执行任务的整个过程,原始方案相对复杂,修改需要协调多方人员,因而考虑是否有更轻量级的方案. 原始需求: 记录完成任务的每一步操作(点击.滑动.输入等) 记录操作前后的截图和 ...
- 基于 token 的登陆系统的实现
这是一段防爬代码块,我不介意文章被爬取,但请注明出处 console.log("作者主页:https://www.cnblogs.com/Go-Solo"); console.lo ...
- 使用 prefetchComponents 进行组件预取
title: 使用 prefetchComponents 进行组件预取 date: 2024/8/17 updated: 2024/8/17 author: cmdragon excerpt: 摘要: ...
- T113s工业套件简述
T113s工业套件简述 提示 T113开发交流QQ群:120575746 此开发板的任何问题都可以在我们的论坛交流讨论 https://forums.100ask.net/c/aw/ 硬件简述 10 ...
- CF650D Zip-line
CF650D Zip-line 大概题面: 给定一个长度为 \(n\) 的序列以及\(m\)个操作,每个操作形如" \(a_i,b_i\) ",表示将序列中第 \(a_i\) 个数 ...