【Nuxt3】内置组件介绍

简言

介绍下nuxt3的内置组件用法。

ClientOnly

使用 <ClientOnly> 组件仅在客户端渲染组件。
属性:

  • placeholderTag | fallbackTag — 指定要在服务器端呈现的标记。
  • placeholder | fallback — 指定要在服务器端渲染的内容,并在浏览器挂载 <ClientOnly> 之前显示。

示例:

<template><div><Sidebar /><!-- This renders the "span" element on the server side --><ClientOnly fallbackTag="span"><!-- this component will only be rendered on client side --><Comments /><template #fallback><!-- this will be rendered on server side --><p>Loading comments...</p></template></ClientOnly></div>
</template>

DevOnly

使用 <DevOnly> 组件,仅在开发过程中渲染组件。
Nuxt 提供了 <DevOnly> 组件,用于仅在开发过程中呈现组件。

这些内容不会包含在生产构建中,它有一个fallback插槽可以用于在生产环境替换devOnly的内容。

这在开发时显示辅助开发工具比较有用

<template><div><Sidebar /><DevOnly><!-- this component will only be rendered during development --><LazyDebugBar /><!-- be sure to test these using `nuxt preview` --><template #fallback><div><!-- empty div for flex.justify-between --></div></template></DevOnly></div>
</template>

NuxtClientFallback

Nuxt 提供了 <NuxtClientFallback> 组件,用于在其任何子组件触发 SSR 中的错误时在客户端呈现其内容。

这个是实验性的,需要在nuxt.config.ts配置才可开启

export default defineNuxtConfig({experimental: {clientFallback: true}
})

slots

#fallback:指定插槽渲染失败时在服务器端显示的内容。

示例

  <template><!-- render <span>Hello world</span> server-side if the default slot fails to render --><NuxtClientFallback fallback-tag="span" fallback="Hello world"><BrokeInSsr /></NuxtClientFallback></template>

NuxtPage

需要使用 <NuxtPage> 组件来显示位于 pages/ 目录中的页面。
NuxtPage 是 Nuxt 的内置组件。它允许你显示位于 pages/ 目录中的顶层或嵌套页面。

它相当于vue-router的routerview,并且接收相同的name和route属性

属性

  • name — 会告诉 RouterView 渲染匹配路由记录组件选项中对应名称的组件。
  • route — 已解决所有组件的路由位置。
  • pageKey — 渲染 NuxtPage 组件的key。
  • transition — 为使用 NuxtPage 组件渲染的所有页面定义全局过渡效果。
  • keepalive — 控制使用 NuxtPage 组件渲染的页面的状态保存。

Nuxt 通过扫描和渲染在 /pages 目录中找到的所有 Vue 组件文件,自动解析名称和路由。

示例

一般情况直接使用<NuxtPage />就好。

<template><div><NuxtPage /></div>
</template>
<script lang="ts" setup></script>

NuxtLayout

用于在页面使用layouts目录下的布局。
<NuxtLayout /> 通过 <slot /> 渲染传入内容,然后将其包裹在 Vue 的 <Transition /> 组件周围,以激活布局转换。为使其达到预期效果,建议 <NuxtLayout /> 不是页面组件的根元素。

<template>
<div><NuxtLayout>some page content</NuxtLayout></div>
</template>

默认情况下,他使用的是layouts目录下的default布局。

属性

  • name — 指定要渲染的布局名称,可以是字符串、反应式引用或计算属性。该名称必须与 layouts/ 目录中相应布局文件的名称一致。

示例

default布局

<template><div class="default"><div><h1>这是default布局</h1></div><slot /><slot name="footer"></slot></div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
</script>
<style lang="scss" scoped></style>

使用:

<template><div><NuxtLoadingIndicator color="green" /><NuxtLayout><NuxtPage /><template #footer><div>底部内容</div></template></NuxtLayout></div>
</template>
<script lang="ts" setup></script>

在这里插入图片描述

NuxtLink

Nuxt 提供了 <NuxtLink> 组件,用于处理应用程序中的各种链接。

是 Vue Router 的 <RouterLink> 组件和 HTML 的 <a> 标记的直接替代品。它能智能判断链接是内部链接还是外部链接,并通过可用的优化(预取、默认属性等)进行相应的渲染。

属性

在不使用外部链接时,<NuxtLink> 支持所有 Vue 路由器的 RouterLink 属性:

  • to — 任何 URL 或 Vue 路由器中的路由位置对象。
  • custom — 自定义导航工作方式,与vue-router的custom属性相同。
  • exactActiveClass : 指定点击后的类样式。其作用与 Vue 路由器的 exact-active-class prop 在内部链接上的作用相同。默认为 Vue 路由器的默认 “router-link-exact-active”)。
  • replace — 与 Vue Router 在内部链接上的replace属性功能相同。
  • ariaCurrentValue — 与 Vue Router 的 aria-current-value prop 在内部链接上的作用相同.
  • activeClass — 其作用与 Vue Router 的 active-class prop 在内部链接上的作用相同。默认值为 Vue 路由器的默认值("router-link-active)。
  • href — to 的别名。如果与 to 一起使用,href 将被忽略。
  • noRel — 如果设置为 true,则不会在链接中添加 rel 属性。
  • external — 强制链接以 a 标记而不是 Vue Router RouterLink 的形式呈现。
  • prefetch — 启用后,将预取视口中链接的中间件、布局和有效载荷(使用 payloadExtraction 时)。由实验性的 crossOriginPrefetch 配置使用。
  • noPrefetch — 禁用预取。
  • prefetchedClass — 用于预取链接的类。
  • target — 应用于链接的目标属性值。
  • rel — 用于链接的 rel 属性值。外部链接默认为 “noopener noreferrer”。

示例

<template><NuxtLink to="https://twitter.com/nuxt_js" target="_blank">Nuxt Twitter</NuxtLink><!-- <a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener noreferrer">...</a> --><NuxtLink to="https://discord.nuxtjs.org" target="_blank" rel="noopener">Nuxt Discord</NuxtLink><!-- <a href="https://discord.nuxtjs.org" target="_blank" rel="noopener">...</a> --><NuxtLink to="https://github.com/nuxt" no-rel>Nuxt GitHub</NuxtLink><!-- <a href="https://github.com/nuxt">...</a> --><NuxtLink to="/contact" target="_blank">Contact page opens in another tab</NuxtLink><!-- <a href="/contact" target="_blank" rel="noopener noreferrer">...</a> -->
</template>

NuxtLoadingIndicator

在页面导航之间显示进度条。

属性

  • color — 加载条的颜色。可将其设置为 false,以关闭明确的颜色样式。
  • height — 加载条高度,默认3px。
  • duration — 加载条的持续时间,毫秒(默认为 2000)。
  • throttle — 限制出现和隐藏的时间,毫秒数(默认 200)。
  • estimatedProgress — 默认情况下,Nuxt 会在接近 100% 时退出。你可以提供一个自定义函数来自定义进度估算,这是一个接收加载条(上图)持续时间和已用时间的函数。它应该返回一个介于 0 和 100 之间的值。

您可以使用 useLoadingIndicator 可组合挂钩到底层指标实例,这样就可以自己触发开始/结束事件。

示例

    <NuxtLoadingIndicator color="green" />

NuxtErrorBoundary

<NuxtErrorBoundary> 组件处理在其默认槽中发生的客户端错误。

slots

#error:指定出错时要显示的后备内容。

示例

  <template><NuxtErrorBoundary><!-- ... --><template #error="{ error }"><p>An error occurred: {{ error }}</p></template></NuxtErrorBoundary></template>

NuxtWelcome

<NuxtWelcome> 组件用于在使用启动模板制作的新项目中向用户致意。
它包括 Nuxt 文档、源代码和社交媒体账户的链接。

没屁用

示例

<template><NuxtWelcome />
</template>

NuxtIsland

Nuxt 提供了 <NuxtIsland> 组件,用于呈现非交互式组件,无需任何客户端 JS。
在渲染island组件时,island组件的内容是静态的,因此客户端无需下载 JS。
更改island组件道具会触发island组件的重新获取,从而再次重新渲染。

仅服务器组件在引擎盖下使用 <NuxtIsland>

这是一个提高性能的组件,如果你的组件内容只需要在服务端加载运行一次就行,然后在客户端只显示,不做后续交互,即可使用它。

它是实验性的组件 ,需要以下配置

// nuxt.config.ts
export default defineNuxtConfig({experimental: {componentIslands: true}
})

属性

  • name — 要渲染的组件名称。
  • lazy — 使组件不阻塞。
  • props — 要发送给组件进行渲染的属性。
  • source — 调用island 渲染的远程源。
  • dangerouslyLoadClientComponents — 需要从远程源加载组件。

强烈不建议启用危险加载客户端组件(dangerouslyLoadClientComponents),因为远程服务器的 javascript 不可信。

slots

如果声明了插槽,插槽可以传递给岛组件。
由于提供插槽的是父组件,因此每个插槽都是交互式的。

#fallback:指定在岛屿加载前(如果组件是懒惰的)或 NuxtIsland 无法获取组件时要渲染的内容。

示例

<template><NuxtIsland name="Hello" />
</template>

NuxtImg

Nuxt 提供了一个<NuxtImg> 组件来处理自动图像优化。

<NuxtImg> 是本地 标签的直接替代品。

  • 使用内置提供程序优化本地和远程图像
  • 将 src 转换为提供程序优化的 URL
  • 根据宽度和高度自动调整图片大小
  • 在提供尺寸选项时生成响应尺寸
  • 支持本地懒加载和其他 <img> 属性

详细内容请参考:NuxtImage

使用

要使用 <NuxtImg>,必须安装并启用 Nuxt Image 模块:

npx nuxi@latest module add image

<NuxtImg> 可直接输出原生 img 标记(周围没有任何封装)。使用它就像使用 标签一样:

<NuxtImg src="/nuxt-icon.png" />

NuxtPicture

Nuxt 提供了一个 <NuxtPicture> 组件来处理自动图像优化。
<NuxtPicture> 是原生 <picture> 标签的直接替代品。
<NuxtPicture> 的用法与 <NuxtImg> 几乎相同,但它也允许在可能的情况下提供 webp 等现代格式。

要使用 <NuxtPicture>,必须安装并启用 Nuxt Image 模块:

npx nuxi@latest module add image

Teleport

<Teleport> 组件可将组件传送到 DOM 中的不同位置。
和vue的teleport组件一样。

示例

<template><button @click="open = true">Open Modal</button><Teleport to="body"><div v-if="open" class="modal"><p>Hello from the modal!</p><button @click="open = false">Close</button></div></Teleport>
</template>
<template><ClientOnly><Teleport to="#some-selector"><!-- content --></Teleport></ClientOnly>
</template>

结语

结束了。

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

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

相关文章

【无标题】nodejs+mogoodb数据库写注册接口

描述 本篇文章主要记录使用nodejs express搭建服务器&#xff0c;并链接mogoodb数据来书写简单的后台接口&#xff1b;前端项目使用的vue2的一个酒店管理项目。阅读本文章&#xff0c;可以了解如何连接mogoodb数据库&#xff0c;和一些对数据库进行操作的命令。前端如何进行跨…

RISC-V特权架构 - 模式切换与委托

RISC-V特权架构 - 模式切换与委托 1 导致模式切换的常见动作2 异常处理规则3 异常处理时模式切换3.1 在U模式下&#xff0c;发生异常3.2 在S模式下&#xff0c;发生异常3.3 在M模式下&#xff0c;发生异常 4 系统调用时模式切换5 中断处理时模式切换 本文属于《 RISC-V指令集基…

图像处理环境配置opencv-python

下载python&#xff0c;配置pip使用清华源下载镜像&#xff1a; pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple 切换到python目录下&#xff0c;右击cmd&#xff0c;执行pip升级指令: python -m pip install --upgrade pip 下载opencv&#x…

西圣、万魔、倍思开放式耳机值不值得买?测评对比探讨!

自开放式耳机问世以来&#xff0c;便凭借其独特魅力赢得了众多音乐爱好者的青睐。它不仅佩戴起来舒适无比&#xff0c;还能让用户随时聆听周围的环境声音&#xff0c;保持与外界的沟通。同时&#xff0c;在卫生方面也有着不俗的表现。相较于传统的入耳式耳机&#xff0c;这些优…

uniapp使用npm命令引入font-awesome图标库最新版本并解决APP和小程序不显示图标的问题

uniapp使用npm命令引入font-awesome图标库最新版本 图标库网址&#xff1a;https://fontawesome.com/search?qtools&or 命令行&#xff1a; 引入 npm i fortawesome/fontawesome-free 查看版本 npm list fortawesome在main.js文件中&#xff1a; import fortawesome/fo…

嵌入式Linux系统调用执行基本流程

内核态与用户态 什么是系统调用 系统调用是怎么实现的 库函数write 库函数扩展汇编宏 int 0x80中断 调用对应的中断处理函数 检索系统调用函数表 最终执行sys_write 内核态与用户态数据交互 内核态与用户态 早期工程师们在操作系统上编写程序的时候,自己写个程序可以访问别人…

3.5、文本显示(Text/Span)

创建文本 Text 可通过以下两种方式来创建: string 字符串 效果图 Text(我是一段文本)引用 Resource 资源 资源引用类型可以通过 $r 创建 Resource 类型对象,文件位置为 /resources/base/element/string.json。 引用的资源位于:src/main/resources/base/element/string…

红酒:按年份分类,探究不同类型红酒的品质

在红酒的世界里&#xff0c;年份是一个至关重要的因素&#xff0c;它对红酒的品质和价值有着深远的影响。云仓酒庄雷盛红酒深知这一点&#xff0c;从酿造的首年起&#xff0c;就严格把控每一个环节&#xff0c;力求为消费者提供品质的红酒。 首先&#xff0c;让我们了解一下什么…

飞企互联-FE企业运营管理平台 druid路径 弱口令漏洞复现

0x01 产品简介 飞企互联-FE企业运营管理平台是一个基于云计算、智能化、大数据、物联网、移动互联网等技术支撑的云工作台。这个平台可以连接人、链接端、联通内外,支持企业B2B、C2B与O2O等核心需求,为不同行业客户的互联网+转型提供支持。 0x02 漏洞概述 飞企互联-FE企业…

ctf刷题记录2(更新中)

因为csdn上内容过多编辑的时候会很卡&#xff0c;因此重开一篇&#xff0c;继续刷题之旅。 NewStarCTF 2023 WEEK3 Include &#x1f350; <?phperror_reporting(0);if(isset($_GET[file])) {$file $_GET[file];if(preg_match(/flag|log|session|filter|input|data/i, $…

QT----opencv4.8.0编译cuda版本,QTcreater使用

目录 1 编译opencv4.8.02 验证能否加载GPU cuda12.1 opencv4.8.0 vs2019 cmake3.29 1 编译opencv4.8.0 打开cmake&#xff0c;选择opencv480路径&#xff0c;build路径随意 点击configure后&#xff0c;选择这些选项&#xff0c;opencv_word&#xff0c;cuda全选&#xff0c;…

Java环境变量配置说明

1、右键点击“此电脑”&#xff0c;选择“属性”项。 2、点击“高级系统设置”&#xff0c;在弹出的系统属性框中&#xff0c;选择“高级”选项卡&#xff08;默认即显示该选项卡&#xff09;&#xff0c;点击“环境变量”。 3、在弹出的“环境变量”框&#xff0c;中选择下方…

酷开科技不断深耕智能电视领域,用酷开系统带给消费者更多可能性

在这个网络快速发展的时代&#xff0c;电视行业也发生了巨大变革。与以往单纯的“看”电视不同&#xff0c;人们不再满足于现有的状态&#xff0c;消费者对电视娱乐的追求更加丰富&#xff0c;这也就带给智能电视产业无限的发展可能。酷开科技瞄准这一产业趋势&#xff0c;不断…

K8S - Service简介和 1个简单NodePort例子

大纲图 流量方向 如上图&#xff0c; 当用户or 别的service 从k8s 集群外部访问 集群内的services 流量方向有两种 一种是垂直方向&#xff0c; 通过域名 -> Load Balancer -> gateway -> services , 在k8s 一般是通过ingress 来实现&#xff0c; 而ingress 不是本文…

面试经典150题——删除链表的倒数第 N 个结点

1. 题目描述 2. 题目分析与解析 这个题目整体来讲还是比较简单的&#xff0c;因此直接给出解题思路&#xff1a; 遍历链表计数 计算要删除的节点的位置 创建虚拟头节点 创建指针指向虚拟头节点 移动指针到要删除的节点的前一个节点 删除节点 返回头节点 3. 代码实现 …

IDEA new ui 找不到evaluate

问题 idea升级新版本之后&#xff0c;发现熟悉的evaluate不见了&#xff0c;只能通过快捷键启动&#xff0c;未免太麻烦了&#xff0c;如何像旧版一样添加图标直接点呢&#xff1f; 解决方案 打开debug窗口&#xff0c;在这个地方右键&#xff0c;然后选择add actions 搜索…

LLM端侧部署系列 | 如何将阿里千问大模型Qwen部署到手机上?实战演示(下篇)

引言 简介 编译Android可用的模型 转换权重 生成配置文件 模型编译 编译apk 修改配置文件 绑定android library 配置gradle 编译apk 手机上运行 安装 APK 植入模型 效果实测 0. 引言 清明时节雨纷纷&#xff0c;路上行人欲断魂。 小伙伴们好&#xff0c;我是《小…

VAR模型(二)结婚率的影响因素分析

本文研究分析了普通本专科毕业人数、城乡居民人民币储蓄存款年底余额对结婚率的影响。以计量经济学中VAR模型为主要分析模型,建立了结婚率的多元回归模型。分析了普通本专科毕业人数、城乡居民人民币储蓄存款年底余额和结婚率现状。并且对未来结婚率进行了预测。 1.理论模型和…

C语言面试题之化栈为队

化栈为队 实例要求 C语言实现实现一个MyQueue类&#xff0c;该类用两个栈来实现一个队列&#xff1b;示例&#xff1a; MyQueue queue new MyQueue();queue.push(1); queue.push(2); queue.peek(); // 返回 1 queue.pop(); // 返回 1 queue.empty(); // 返回 false说明&…

NCI SEER breast cancer美国国立癌症研究所数据库乳腺癌生存分析和乳腺癌预测模型(2024年新项目)

​作者Toby&#xff0c;来源公众号&#xff1a;python生物信息学,美国国立癌症研究所数据库乳腺癌生存分析和乳腺癌预测模型 NCI美国国立癌症研究所(NationalCancerInstitute,NCI) 美国国立癌症研究所&#xff08;NCI&#xff09;是美国国家卫生研究院&#xff08;NIH&#xf…