class 6: vue.js 3 组件化开发

  • 组件化开发实际上就是问题拆解,分而治之。将页面拆分为一个个小的功能块,每个功能块负责完成属于自己的独立功能,这使得整个页面的管理和维护就变得非常容易了
  • 组件化可以简化开发进程,代码复用率更高,并有利于后期维护
  • 使用Vue.createApp()函数时需要接收一个对象作为参数,改对象本质上就是一个组件,属于Vue.js 3的根组件。Vue.js 3的应用程序由一个个独立可复用的小组件构成,最终会被抽象成一颗组件树

接下来我们来注册一个全局组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"></div><template id="my-app"><div class="comps-b"><input type="text" v-model="message"><h4> {{ message }}</h4></div><div class="comps-a"><h4>{{ title }}</h4><p>{{ desc }}</p><button @click="btnClick">按钮单击</button></div></template><script src="./js/vue.js"></script><script>const App = {template: '#my-app',data() {return {message: 'Hello World',title: '标题',desc: '内容显示区域...'}},methods: {btnClick() {console.log('按钮发生点击');}}}Vue.createApp(App).mount('#app')</script>
</body>
</html><style>.comps-a,.comps-b {border: 1px solid #999;}
</style>
  • 在Vue.js 3中,注册组件分成如下两种:
  1. 全局组件:在任何其他组件中都可以使用的组件
  2. 局部组件:只有在注册的组件中才能使用的组件

注册全局组件需要通过全局创建的Vue实例(app)来使用app.component方法,传入组件名称和组件对象来进行注册

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"></div><template id="my-app"><div class="comps-b"><input type="text" v-model="message"><h4> {{ message }}</h4></div><!-- 使用全局组件 --><component-a></component-a></template><!-- component-a 全局组件的模板 --><template id="component-a"><div class="comps-a"><h4>{{ title }}</h4><p>{{ desc }}</p><button @click="btnClick">按钮单击</button></div></template><script src="./js/vue.js"></script><script>const App = {template: '#my-app',data() {return {message: "Hello World"}}}const app = Vue.createApp(App) // 创建一个Vue实例// 用app注册一个component-a全局组件app.component('component-a', {template: '#component-a', // 引入第一步定义的模板data() {return {title: '标题',desc: '内容显示区域...'}},methods: {btnClick() {console.log('按钮发生点击');}}})app.mount('#app')</script>
</body>
</html><style>.comps-a,.comps-b {border: 1px solid #999;}
</style>
  • 上面的例子中,首先将classcomps-b<div>元素抽取到idcomponent-a的模板中;接着调用app.component方法注册一个全局组件,该方法需要接收两个参数:全局组件名称和组件对象。组件对象中的template属性绑定的是idcomponent-a的模板,该组件对象中定义了datamethods属性还定义了对应的变量和方法,可以提供给idcomponent-a的模板使用;然后把注册好的component-a组件放到根组件的模板上使用,这样就完成了一个全局组件的注册和使用
  • 这样实现的效果与最上面的全局组件实现的效果一致

也可以再提取出一个component-b全局组件来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"></div><template id="my-app"><!-- 使用全局组件 --><component-b></component-b><component-a></component-a></template><!-- component-a 全局组件的模板 --><template id="component-a"><div class="comps-a"><h4>{{ title }}</h4><p>{{ desc }}</p><button @click="btnClick">按钮单击</button></div></template><!-- component-b 全局组件的模板 --><template id="component-b"><div class="comps-b"><input type="text" v-model="message"><h4>{{ message }}</h4></div></template><script src="./js/vue.js"></script><script>const App = {template: '#my-app'}const app = Vue.createApp(App) // 创建一个Vue实例// 用app注册一个component-a全局组件app.component('component-a', {template: '#component-a', // 引入第一步定义的模板data() {return {title: '标题',desc: '内容显示区域...'}},methods: {btnClick() {console.log('按钮发生点击');}}})// 再注册一个component-b全局组件app.component('component-b', {template: '#component-b',data() {return {message: "Hello World"}}})app.mount('#app')</script>
</body>
</html><style>.comps-a,.comps-b {border: 1px solid #999;}
</style>
  • 这也能实现相同的效果,这说明Vue.js 3中可以支持注册多个全局组件

组件是有命名规范的。推荐使用短横线隔开命名法(kebab-case),也就是a-b-c这种命名,不要出现大写字母

  • 随着项目越来越复杂,我们需要采用组件化的方式进行开发,这意味着每个组件都会有自己的模板、脚本逻辑和样式等。虽然我们可以将它们抽离到单独的JavaScriptCSS文件中,但它们依然会分离,而且引入全局作用域下的JavaScript文件很容易出现命名冲突,也不支持ES6语法的转换等
  • 为了解决上面这些问题,Vue.js 3的开发模式推荐使用.vue单文件组件(Single-File Components, SFC)来编写Vue.js组件,然后使用webpack、vite或Rollup等构建工具对其进行打包转换

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

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

相关文章

动态规划-最大子数组和

最大子数组和 题目描述 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。子数组是数组中的一个连续部分。 53. 最大子数组和 - 力扣&#xff08;LeetCode&#xff09; 示例…

在Nginx上部署前端Vue项目,超级简单!!

Nginx&#xff08;engine x&#xff09; 是一个高性能的HTTP和反向代理web服务器&#xff0c;同时也是一个IMAP/POP3/SMTP代理服务器。 Nginx因其高性能、可扩展性、灵活性和免费开源等优势&#xff0c;在现代Web架构中得到了广泛应用。无论是作为Web服务器直接提供服务&…

Elasticsearch 索引模板

文章目录 前言Elasticsearch 索引模板1. 作用2. 示例3. 查询索引模板4. 测试 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的…

validationtools中按键测试选项光标移除

最近处理一个问题&#xff0c;设备有方向键盘&#xff0c;做cit中的按键测试&#xff0c;发现按方向键第一次按键不能触发该键值&#xff0c;而是让屏幕第一个按钮获取焦点&#xff0c;然后再次按键&#xff0c;则其他正常。问题&#xff1a;进入界面第一次按键就要响应对应按键…

html+css+js网页设计 故宫7个页面 ui还原度100%

htmlcssjs网页设计 故宫7个页面 ui还原度100% 网页作品代码简单&#xff0c;可使用任意HTML编辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1…

sqlite3的db.interrupt方法深入解析

在Node.js环境中&#xff0c;sqlite3库是一个广受欢迎的轻量级数据库库&#xff0c;它为开发者提供了一个简洁的API来与SQLite数据库进行交互。在处理长时间运行或复杂的数据库查询时&#xff0c;有时可能需要中断这些查询。sqlite3库提供了db.interrupt方法来实现这一功能。本…

Anaconda安装和环境配置教程(深度学习准备)

目录 1.下载选择 2.prompt配置 3.虚拟环境配置 4.检查是不是安装成功 5.安装jupter 6.关闭anaconda重新进入 7.总结 1.下载选择 我第一次使用的这个官网上面的邮箱的方式下载的&#xff0c;但是这个方式真的特别慢&#xff0c;于是用了这个清华的镜像网站&#xff0c;网…

K8S日志收集

本章主要讲解在 Kubernetes 集群中如何通过不同的技术栈收集容器的日志&#xff0c;包括程序直接输出到控制台日志、自定义文件日志等。 一、有哪些日志需要收集 为了更加方便的处理异常&#xff0c;日志的收集与分析极为重要&#xff0c;在学习日志收集之前&#xff0c;需要知…

GitLab 是什么?GitLab使用常见问题解答

GitLab 是什么 GitLab是由GitLab Inc.开发&#xff0c;使用MIT许可证的基于网络的Git仓库管理工具开源项目&#xff0c;且具有wiki和issue跟踪功能&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的web服务。 ​GitLab 是由 GitLab Inc.开发&#xff0c…

从0开始训练基于自己声音的AI大模型(基于开源项目so-vits-svc)

写在前面&#xff1a; 本文所使用的技术栈仅为&#xff1a;Python 其他操作基于阿里云全套的可视化平台&#xff0c;只需要熟悉常规的计算机技术即可。 目录 Step 1:注册及登录阿里云主机 Step 2:找到大模型项目 Step 3:创建大模型环境实例 Step 4:进入Ai_singer教程 Step…

代码随想录:动态规划41-44

300.最长递增子序列 题目 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7…

C语言之猜数字小游戏

哈喽&#xff0c;大家好&#xff01;我是冰淇淋加点糖。今天我们来用前面所学的知识来开发一个猜数字的小游戏&#xff0c;锻炼我们的编程能力和编程思维。 猜数字小游戏功能简介 1.随机生成一个1-100的数字。 2.玩家用户开始猜数字。 > 猜大了&#xff0c;提醒猜大了…

[米联客-XILINX-H3_CZ08_7100] FPGA程序设计基础实验连载-27浅谈XILINX BRAM的基本使用

软件版本&#xff1a;VIVADO2021.1 操作系统&#xff1a;WIN10 64bit 硬件平台&#xff1a;适用 XILINX A7/K7/Z7/ZU/KU 系列 FPGA 实验平台&#xff1a;米联客-MLK-H3-CZ08-7100开发板 板卡获取平台&#xff1a;https://milianke.tmall.com/ 登录“米联客”FPGA社区 http…

C#/WinForm 演示遗传算法

一、一览 二、遗传算法流程 种群初始&#xff1a;随机生成一组N个DNA&#xff0c;每个DNA上都有S个基因&#xff0c;每个DNA都有自己的r值&#xff08;适度值&#xff09;。r最大的DNA为种群最优。 选择操作&#xff1a;将每个DNA的r值占总体的比例作为新一代选取的概率&#…

2024 【Delphi 12】苹果ios开发环境配置(五星保姆级)

目录 一、创建证书 1. 创建证书签名请求&#xff1a;&#xff08;在苹果电脑上操作&#xff09;&#xff1a; .certSigningRequest 文件 2. 创建证书&#xff1a;在苹果的 开发者网站 上操作 重复以上步骤并下载对应的证书文件如下&#xff1a; 3. 创建标识符&#xff08;…

Debezium+Kafka:Oracle 11g 数据实时同步至 DolphinDB 运维手册

目前我们已经支持基于开源技术 Debezium Kafka&#xff0c;从 Mysql 和 Oracle 11g 实时同步数据到 DolphinDB 中。由于当前方案涉及到四个程序的部署&#xff0c;而且具体的 Source 同步任务和 Sink 同步任务还需要额外管理&#xff0c;在运维上具有一定难度。 本文将基于 O…

前端框架的演变与选择

目录 前端框架的演变与选择 1. 什么是前端框架&#xff1f; 2. 前端框架的演变 2.1 早期的Web开发 2.2 JavaScript库的兴起 2.3 MVC架构的引入 3. 现代前端框架概览 3.1 React 3.2 Vue.js 3.3 Angular 4. 其他值得关注的前端框架 4.1 Svelte 4.2 Ember.js 5. 如何…

【大数据】生活中三大数据的概念及其关系

数据库、数据结构和大数据之间存在密切的关联,它们共同构成了计算机科学和信息技术领域中的重要组成部分。以下是对这三者之间关系的详细阐述: 1. 数据库与数据结构的关联 数据结构是数据库的基础:数据库用于存储和管理大量数据,而这些数据的组织方式正是基于数据结构。数…

Ecology10中的CAS身份认证问题

单点登录&#xff08;SSO&#xff09;是一种身份验证解决方案&#xff0c;可让用户通过一次性用户身份验证登录多个应用程序和网站。实现SSO的方式有很多种&#xff0c;比如Kerberos、SAML、OAuth2、JWT、OpenID、CAS、LDAP等。 CAS CAS (Central Authentication Service) 最初…

西中区2024年度安全知识竞赛活动方案

为有效预防安全生产事故的发生&#xff0c;深化西中区全体员工对安全生产的认识&#xff0c;切实提升全体人员的安全意识和自我保护能力&#xff0c;夯实安全知识基础&#xff0c;丰富安全文化内涵&#xff0c;推动安全生产工作更加规范化、系统化&#xff0c;根据西中区安全生…