vue3——(模板应用,组件)

模板应用

Vue3 的模板应用和之前的版本基本一致,但是在一些关键点上有所不同。

Composition API

Vue3 引入了 Composition API,这是一种全新的 API 设计风格,可以更好地组织代码,提高代码的复用性和可读性。与之前的 Options API 相比,Composition API 更加灵活,并且可以将相关代码组合在一起,使得代码更加清晰和易于维护。

Composition API(组合式 API):
详细分析:Composition API 是 Vue3 中的全新API设计风格,可以更好地组织代码,提升代码的复用性和可读性。与 Options API 相比,Composition API 更加灵活,可将相关代码组合在一起,使代码更清晰易于维护。

<script setup>
// 定义一个响应式数据
const count = ref(0);// 定义一个方法
const increment = () => {count.value++;
};
</script><template><div><p>{{ count }}</p><button @click="increment">递增</button></div>
</template>

Setup 函数

Vue3 中使用 Setup 函数来代替之前的 created 和 data 属性,Setup 函数用于初始化组件的数据和方法。在 Setup 函数中,可以访问 props、context、attrs 等属性,并且直接返回需要的数据和方法,这样可以使得组件的结构更加清晰和简洁。

Setup 函数:
详细分析:Setup 函数取代了 Vue3 中的 created 和 data 属性,用于初始化组件数据和方法,可以访问props、context、attrs等属性。Setup函数返回需要的数据和方法,使组件结构更清晰简洁。

<script setup>
import { ref } from 'vue';// 定义一个响应式数据
const message = ref('你好,Vue3!');
</script><template><p>{{ message }}</p>
</template>

 

Teleport

Vue3 引入了 Teleport 功能,可以让组件在 DOM 上的任何位置渲染,这样可以避免一些布局上的问题,比如弹窗组件在父组件中嵌套太多层导致样式混乱等。

Teleport(传送门):
详细分析:Vue3中的 Teleport 功能允许组件在DOM中的任何位置渲染,避免布局问题,像是嵌套导致样式冲突等。

<template><teleport to="body"><div><p>这段内容将被渲染到 body 元素中</p></div></teleport>
</template>

Fragments

Vue3 支持使用 Fragments,可以在模板中直接使用多个根元素,而不需要包裹在一个父元素中。这样可以更加灵活地组织模板代码,使得代码更加简洁和易于维护。

Fragments(片段):
详细分析:Vue3支持使用 Fragments,允许模板中直接使用多个根元素,而无需包裹在父元素中,使得模板组织更加灵活,代码更加简洁。

<template><><div>条目 1</div><div>条目 2</div><div>条目 3</div></>
</template>

 

组件

组件注册:

在Vue3中,全局注册组件可以使用Vue.createApp().component()方法,局部注册组件可以在组件选项中使用components属性。全局注册的组件可在整个应用程序中使用,局部注册的组件只能在父组件中使用。

例子:

// 全局注册组件
const app = Vue.createApp({});
app.component('my-component', {// 组件选项
});// 局部注册组件
export default {components: {'my-component': {// 组件选项}}
}

组件通信

组件之间可以通过props和events实现通信。父组件通过props向子组件传递数据,子组件通过触发事件来与父组件通信。Props可以是静态或动态数据,而events则可以携带数据传递给父组件。

例子:

// 父组件向子组件传递数据
<my-component :message="parentMessage" />// 子组件触发事件与父组件通信
<button @click="$emit('child-event', eventData)">触发事件</button>

组件生命周期

Vue3中的组件生命周期钩子函数包括:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted等。这些生命周期函数可以在不同阶段执行特定逻辑或操作。

例子:

export default {beforeCreate() {console.log('组件将要被创建');},mounted() {console.log('组件已挂载到DOM');},unmounted(){console.log('组件被销毁');}
}

动态组件 

使用<component>元素,并将其is属性绑定到一个数据属性,这个数据属性的值是所希望动态加载的组件的名称。当数据属性的值发生变化时,Vue会自动加载对应的组件。

<template><div><button @click="toggleComponent">Toggle Component</button><component :is="currentComponent"></component></div>
</template><script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';export default {data() {return {currentComponent: 'FirstComponent'};},methods: {toggleComponent() {this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';}},components: {FirstComponent,SecondComponent}
};
</script>

在这个示例中,我们有两个组件FirstComponentSecondComponent,当用户点击按钮时,会切换显示这两个组件。currentComponent数据属性决定当前显示的组件,通过点击按钮来切换这个属性的值,从而实现动态组件的效果。

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

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

相关文章

golang netpoller揭秘

golang netpoller是网络IO模型的核心部分&#xff0c;利用了操作系统提供的事件通知机制&#xff0c;如Linux的epoll、BSD的kqueue或者windows的IOCP。这些机制允许应用程序监视多个文件描述符&#xff08;在网络编程中&#xff0c;通常是 socket&#xff09;&#xff0c;并在其…

LLM优化:开源星火13B显卡及内存占用优化

1. 背景 本qiang~这两天接了一个任务&#xff0c;部署几个开源的模型&#xff0c;并且将本地经过全量微调的模型与开源模型做一个效果对比。 部署的开源模型包括&#xff1a;星火13B&#xff0c;Baichuan2-13B, ChatGLM6B等 其他两个模型基于transformers架构封装&#xff0…

【Linux】Centos7安装部署asterisk,搭建 SIP服务器

1、安装环境依赖 yum install -y make gcc zlib-devel perl wget yum install -y gcc gcc-c autoconf libtool automake make yum install -y openssl-devel &#xff08;以上需要联网安装&#xff0c;离线安装各种依赖需要进一步研究&#xff09; openssl version Open…

表单提交出现问题却没有报错

最近搞毕设提交表单传给后台总是出现错误&#xff0c;有时候可以运行成功&#xff0c;有时候运行不了但是没有报错&#xff0c;以为是jQuery导入的问题尝试换了jQuery的其他导入方式没有解决&#xff0c;后来发现前端页面的表单要防止默认操作&#xff01;&#xff01;&#xf…

CMUS狮身人面像(六)-调整语音识别准确性

调整语音识别准确性 精度差的原因测试数据库设置运行测试 语音识别的准确性并不总是很高。 首先&#xff0c;重要的是要了解您的准确性是否只是低于预期&#xff0c;还是总体上非常低。如果总体精度非常低&#xff0c;则您很可能错误配置了解码器。如果低于预期&#xff0c;可…

qt学习篇---C++基础学习

本学习笔记学习下面视频总结&#xff0c;感兴趣可以去学习。讲的很详细 【北京迅为】嵌入式学习之QT学习篇_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1tp4y1i7EJ/?spm_id_from333.337.search-card.all.click&vd_source8827cc0da16223b9f2ad8ae7111de9e2 目录 C…

【K8s】工作以来遇到的K8s相关问题、故障

工作以来遇到的有关K8S相关问题及故障 deployments 资源 2副本情况下&#xff0c;一个springboot的pod能访问&#xff0c;一个不能&#xff08;端口不通&#xff09;在K8S运维(多人管理) 不知道谁在链路加了个跨域配置&#xff0c;导致前端打不开图片某些安全部门演练时经常在…

Linux深入理解内核 - 内存寻址

目录 引论&#xff0c;三个地址 硬件中的分段 段描述符 快速访问段描述符 分段单元 Linux GDT Linux LDT 硬件中的分页 PAE 硬件高速缓存 TLB Linux中的分页 页表类型定义pgd_t、pmd_t、pud_t和pte_t pteval_t&#xff0c;pmdval_t&#xff0c;pudval_t&#xff0…

k8s pod 镜像拉取策略

在 Kubernetes (k8s) 中&#xff0c;Pod 容器镜像的拉取策略通过 imagePullPolicy 属性来控制。这一策略决定了 kubelet 如何以及何时从容器镜像仓库中拉取镜像。以下是三种主要的镜像拉取策略及其详细说明&#xff1a; Always: 说明: 这是默认的拉取策略。当设置为 Always 时&…

PDCA循环:持续精进的工具

文章目录 一、什么是PDCA二、PDCA的应用场景三、PDCA在信息系统项目管理中的应用 一、什么是PDCA PDCA循环是由美国质量管理专家沃特阿曼德休哈特&#xff08;Walter A. Shewhart&#xff09;在20世纪30年代提出的&#xff0c;最初用于制造业的质量管理。休哈特博士在构想PDCA…

【C++题解】1418. 求一个5位数的各个位之和

问题&#xff1a;1418. 求一个5位数的各个位之和 类型&#xff1a;基本运算、拆位求解 题目描述&#xff1a; 从键盘读入一个 5 位的正整数&#xff0c;请求出这个 5 位数的各个位之和。 输入&#xff1a; 一个 5 位的正整数 n 。 输出&#xff1a; 这个 5 位数的各个位之…

2385. 感染二叉树需要的总时间

2385. 感染二叉树需要的总时间 题目链接&#xff1a;2385. 感染二叉树需要的总时间 代码如下&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr)…

Aiseesoft Blu-ray Player for Mac:蓝光播放器

Aiseesoft Blu-ray Player for Mac是一款功能强大且易于使用的蓝光播放器&#xff0c;专为Mac用户打造。它以其卓越的性能和简洁的操作界面&#xff0c;为用户带来了全新的高清蓝光播放体验。 Aiseesoft Blu-ray Player for Mac v6.6.50激活版下载 这款软件支持播放任何高质量的…

ArcGIS Pro3.0软件破解版安装教程

软件名称&#xff1a;ArcGIS Pro 3.0 安装环境&#xff1a;Windows 软件大小&#xff1a;7.3GB 硬件要求&#xff1a;CPU2GHz&#xff0c;内存4G(或更高) 百度云下载链接 &#xff1a; https://pan.baidu.com/s/1CXy1MSwdQXdVnJoV2X422A 提 取 码 &#xff1a;r0w1 教学内…

AI图书推荐:ChatGPT写论文的流程与策略

论文一直是任何学术学位的顶峰。它展示了学生在研究领域的兴趣和专业知识。撰写论文也是一个学习经验&#xff0c;为学术工作以及专业研究角色做好准备。但是&#xff0c;论文工作总是艰苦的&#xff0c;通常是充满乐趣和创造性的&#xff0c;但有时也是乏味和无聊的。生成式人…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-6.4

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院

开发环境 技术架构&#xff1a;前后端分离 开发语言&#xff1a;C#.net6.0 开发工具&#xff1a;vs2022,vscode 前端框架&#xff1a;Vue,Ant-Design 后端框架&#xff1a;百小僧开源框架 数 据 库&#xff1a;sqlserver2019 系统特性 麻zui、护理、PACU等围术期业务全覆…

FreeRTOS学习——FreeRTOS队列(上)

本篇文章记录我学习FreeRTOS队列的相关知识&#xff0c;主要包括队列简介、队列的结构体、队列创建等知识。 队列是为了任务与任务、任务与中断之间的通信而准备的&#xff0c;可以在任务与任务、任务与中断之间传递消息&#xff0c;队列中可以存储有限的、大小固定的数据项目。…

Android 在attrs.xml添加属性时出现 Found item Attr/****** more than one time

Android 在attrs.xml添加属性时出现 Found item Attr/****** more than one time 问题描述解决办法方式一方式二 小结 问题描述 在Android应用开发过程中&#xff0c;经常需要自定义控件&#xff0c;并且定义控件的属性&#xff0c;方便灵活的修改控件的显示样式&#xff0c;提…

HCIP-Datacom-ARST必选题库_无线【道题】

单选题 26/1327、 如图所示,漫游前数据流显的转发为STA-HAP-上层网络,转发方式为直接转发,并且在AP上配置了家乡代理经过三层漫游 以后,数据的转发流量走向是? STA-FAP-FAC-HAC-HAP-上层网络 BSTA-FAP-FAC-HAC-上层网络 STA-FAP-FAC-上层网络 STA-FAP-FAC-HAC-HAP-HAC-上…