在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中的新的内置组件的更多相关文章

  1. Vue基础(环境配置、内部指令、全局API、选项、内置组件)

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  2. 通俗易懂了解Vue内置组件keep-alive内部原理

    1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...

  3. Vue内置组件[回顾]

    1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...

  4. Django:内置组件Content-Type

    12.Django组件之Content_Type 1.帮助我们生成了一张表,里面有所有表名.这样不再自建表在表中填表名,用Foreignkey获取 2.为了让我们快速进入插入数据,填写一个字段Gene ...

  5. vue-learning:33 - component - 内置组件 - 过渡组件transition

    vue内置过渡组件transition 目录 什么是过渡 基本过渡或动画实现的语法 css过渡动画:transition / animation js过渡:特定事件钩子函数 各种情形下的过渡实现,使用 ...

  6. 阅读vue源码-----内置组件篇(keep-alive)

    1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:&l ...

  7. Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色

    1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...

  8. form-create教程:给内置组件和自定义组件添加事件

    本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...

  9. Python中匿名函数与内置高阶函数详解

    大家好,从今天起早起Python将持续更新由小甜同学从 初学者的角度 学习Python的笔记,其特点就是全文大多由 新手易理解 的 代码与注释及动态演示 .刚入门的读者千万不要错过! 很多人学习pyt ...

  10. vue第十一单元(内置组件)

    第十一单元(内置组件) #课程目标 熟练掌握component组件的用法 熟练使用keep-alive组件 #知识点 #1.component组件 component是vue的一个内置组件,作用是:配 ...

随机推荐

  1. 【MySQL】全库调整表大小写语句

    统一修改字段成小写+下划线的命名规则: V1上线后,重新看SQL调整的较可行的写法: # = = = = = = = = = = = = = = = 统一更改全库所有字段大小写脚本SQL(会删除字段原 ...

  2. 【Vue】07 Webpack Part3 Loader

    Loader是Webpack的核心概念: 除了JS文件以外我们还有CSS,图片,包括一些ES6规范的代码 或者是TypeScript各种前端类型的文件 但是最终必须统一转换成JS文件,Webpack本 ...

  3. Windows11重置后出现Windows.old文件夹无法删除,报错C:\Windows.old\WINDOWS\System32\WDI - 目录不是空的。Win11系统Windows.old能删除吗?Windows.old怎么删

    问题: Windows11重置后出现Windows.old文件夹无法删除,报错C:\Windows.old\WINDOWS\System32\WDI - 目录不是空的. 网上的各种方法均不奏效: ht ...

  4. Accurately computing running variance —— 已知两个数列各自的均值和方差,如何快速求出两个数列拼合后的均值和方差(续)

    原内容来自: https://www.johndcook.com/blog/standard_deviation/ 计算公式: 该种计算方式可以只保存历史数据的平方和,与历史数据的和. 相关前文: 已 ...

  5. IPython notebook(Jupyter notebook)指定IP和端口运行

    1.  使用conda  安装  jupyter conda install jupyter 2. 在服务器端不打开浏览器,指定 端口, IP ,  运行jupyter notebook 这里假设端口 ...

  6. 为python安装扩展模块时报错——error: invalid command 'bdist_wheel'

    具体过程: devil@hp:~/lab$ ./bazel-bin/python/pip_package/build_pip_package /tmp/dmlab_pkg2022年 10月 03日 星 ...

  7. Vector源码解读

    1.背景 阅读源码是提高编程技能的有效方式... 面试中也经常问到源码相关的问题..... 2.源码解读 在解读Vector时大家可以先解读ArrayList,因为这个两个的逻辑几乎是一样的.... ...

  8. 解锁GraphRag.Net的无限可能:手把手教你集成国产模型和本地模型

    在上次的文章中,我们已经详细介绍了GraphRag的基本功能和使用方式.如果你还不熟悉,建议先阅读前面的文章 通过前两篇文章,相信你已经了解到GraphRag.Net目前只支持OpenAI规范的接口, ...

  9. 【客户案例】白鲸开源WhaleStudio助力某证券公司打造全面数据解决方案:探析DataOps平台革新与应用

    背景 近年来随着国际形势的变化,信创产业成为我国国家战略的一部分.一直以来,一直以来,全球 ICT 产业底层标准.架构.产品.生态等要素均由国外公司或机构制定和控制,使我国 ICT 产业乃至广大用户面 ...

  10. SMU 2024 spring 天梯赛自主训练1

    SMU 2024 spring 天梯赛自主训练1 7-1 宇宙无敌大招呼 - SMU 2024 spring 天梯赛自主训练1 (pintia.cn) #include <bits/stdc++ ...