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的一个内置组件,作用是:配 ...
随机推荐
- 【Java】Generic 泛型
Generic 泛型 为什么需要泛型? 集合容器再设计阶段/声明阶段不能确定这个容器实际存储的是什么类型的对象 JDK5 以前只能把元素设计为Object基类 在JDK5之后用泛型来约束对象类型 除了 ...
- 如何使用强化学习算法解决15-puzzle问题,即所谓的“十五谜题”推盘游戏
相关: https://medium.com/@amshali/15-puzzle-with-reinforcement-learning-8bcfc1aa54e7 什么是15-puzzle问题? 数 ...
- baselines算法库common/vec_env/vec_env.py模块分析
common/vec_env/vec_env.py模块内容: import contextlib import os from abc import ABC, abstractmethod from ...
- Cython将Numpy数组转为自定义结构体
技术背景 前面我们写过几篇关于Cython的文章,例如Cython计算谐振势.Cython与C语言的结合.Cython调用CUDA Kernel函数.Cython有着非常Pythonic的编程范式,又 ...
- Codeforces Round 964 (Div. 4)
Codeforces Round 964 (Div. 4) A送分 B 大意:两个人两张牌 随机翻 求a翻出来的牌比b大的可能 #include <cstdio> #include < ...
- .NET MAUI 里,为什么 FlexLayout 这么难用?
管中窥豹,可见一斑 Layout: FlexLayout:
- 什么是状态机?用C语言实现进程5状态模型
前言 状态机在实际工作开发中应用非常广泛,在刚进入公司的时候,根据公司产品做流程图的时候,发现自己经常会漏了这样或那样的状态,导致整体流程会有问题,后来知道了状态机这样的东西,发现用这幅图就可以很清晰 ...
- .NET 9 优化,抢先体验 C# 13 新特性
前言 微软即将在 2024年11月12日发布 .NET 9 的最终版本,而08月09日发布的.NET 9 Preview 7 是最终发布前的最后一个预览版.这个版本将与.NET Conf 2024一同 ...
- udp协议及包格式
UDP协议也是互联网基础协议之一.它和TCP一样同属于传输层当中的一个协议. 不过UDP协议是一个面向无连接的协议(TCP是向面连接的协议).一个UDP连接的建立,不必象TCP协议那样需要服务器端侦听 ...
- Ubuntu 安装 libwebkitgtk-1.0-0
在 Ubuntu 上安装完 PDI 后启动 spoon.sh 时提示安装 libwebkitgtk-1.0-0.由于 apt 官方源中不包含此软件包,因此要添加该软件包的源,以及源对应的 gpg 公钥 ...