当前位置: 首页 > news >正文

Vue.js 组件开发

Vue.js 是一个渐进式的JavaScript框架,主要用于构建用户界面。它采用了组件化的开发方式,使得前端开发更加高效、灵活且易于维护。组件是Vue.js的核心概念之一,理解和掌握组件的开发,有助于我们高效地构建现代Web应用。

本文将涵盖Vue.js的组件开发基础,提供实际操作案例,并通过丰富的示例来提升阅读趣味性,帮助读者迅速掌握Vue.js组件开发。

1. 什么是组件?

在Vue.js中,组件是具有独立功能的自定义元素。组件可以接收输入(props)并向外输出事件(event),类似于函数。通过组件化的方式,可以将复杂的界面拆解为简单的独立部分,从而使得代码更为清晰易读。

1.1 组件的优点

  • 可复用性:组件可以在多个地方复用,提高开发效率。
  • 可维护性:每个组件都是独立的,便于管理和维护。
  • 可测试性:独立的组件可以单独进行测试。
  • 易于协作:团队可以将不同的组件分配给不同的开发者,同时进行开发。

2. 环境搭建

在开始组件开发之前,我们需要搭建一个基础的Vue.js开发环境。我们将使用Vue CLI来快速创建我们的Vue应用项目。

2.1 安装 Node.js 和 Vue CLI

  1. 首先确保你的环境中安装了Node.js,可以通过终端运行以下命令来检查:

    node -v
    
  2. 接下来,安装Vue CLI:

    npm install -g @vue/cli
    

2.2 创建Vue项目

使用Vue CLI 创建新的Vue项目:

vue create vue-component-example

在项目创建过程中,选择默认设置或手动选择您需要的功能。项目创建完成后,进入项目目录:

cd vue-component-example

然后启动开发服务器:

npm run serve

访问 http://localhost:8080,您应该可以看到默认的 Vue.js 示例页面。

3. 创建第一个组件

在本节中,我们将创建一个简单的Vue组件,并在主应用中使用它。

3.1 组件目录结构

在 src/components 目录下创建一个名为 HelloWorld.vue 的文件。这个文件就是我们要创建的第一个组件。

<template><div class="hello"><h1>{{ message }}</h1><p>这是我的第一个组件!</p></div>
</template><script>
export default {name: 'HelloWorld',data() {return {message: 'Hello, Vue.js!',};},
};
</script><style scoped>
.hello {text-align: center;
}
</style>

3.2 在主应用中使用组件

在 src/App.vue 文件中引入并使用我们刚刚创建的 HelloWorld 组件。

<template><div id="app"><HelloWorld /></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';export default {name: 'App',components: {HelloWorld,},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

3.3 查看效果

在浏览器中刷新页面,你应该能够看到“Hello, Vue.js!”和相关的文字。

4. 组件的props

组件可以通过props接收来自父组件的数据。这有助于组件之间进行数据传递。

4.1 创建带有props的组件

我们修改之前的 HelloWorld.vue 组件,使其通过 props 接收一个消息。

在 HelloWorld.vue 中进行以下修改:

<template><div class="hello"><h1>{{ message }}</h1><p>这是我的第一个组件!</p></div>
</template><script>
export default {name: 'HelloWorld',props: {message: {type: String,required: true,},},
};
</script><style scoped>
.hello {text-align: center;
}
</style>

4.2 在父组件中传递props

然后,在 src/App.vue 中传递一个 message prop 给 HelloWorld 组件:

<template><div id="app"><HelloWorld message="欢迎来到Vue.js组件开发!" /></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';export default {name: 'App',components: {HelloWorld,},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

4.3 查看效果

再次刷新页面,现在应看到来自 props 的消息“欢迎来到Vue.js组件开发!”。

5. 组件的事件

组件可以通过 $emit 方法向父组件发送事件,这是组件间通信的重要方式。

5.1 创建一个按钮组件

我们将创建一个计数器组件,当用户点击按钮时,增加计数。

在 src/components 目录下创建一个名为 Counter.vue 的新组件:

<template><div><h2>当前计数: {{ count }}</h2><button @click="increment">增加</button></div>
</template><script>
export default {name: 'Counter',data() {return {count: 0,};},methods: {increment() {this.count += 1;this.$emit('count-updated', this.count);},},
};
</script><style scoped>
div {text-align: center;
}
button {padding: 10px 20px;font-size: 16px;
}
</style>

5.2 在父组件中接收事件

我们修改 src/App.vue 文件来接收来自 Counter 组件的事件,并在页面上显示当前计数。

<template><div id="app"><Counter @count-updated="updateCount" /><h2>外部计数: {{ externalCount }}</h2></div>
</template><script>
import Counter from './components/Counter.vue';export default {name: 'App',components: {Counter,},data() {return {externalCount: 0,};},methods: {updateCount(newCount) {this.externalCount = newCount;},},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

5.3 查看效果

刷新页面,您将看到一个按钮。如果单击它,外部计数将随着点击次数而增加。

6. 插槽(Slots)

插槽是Vue中实现组件内容分发的机制。可以使用插槽将父组件的内容传递给子组件。

6.1 创建带插槽的组件

创建一个新组件 Card.vue 以展示插槽的用法:

<template><div class="card"><h3>{{ title }}</h3><slot></slot></div>
</template><script>
export default {name: 'Card',props: {title: {type: String,required: true,},},
};
</script><style scoped>
.card {border: 1px solid #ccc;padding: 20px;margin: 10px;border-radius: 5px;
}
</style>

6.2 在父组件中使用插槽

将 Card 组件添加到 src/App.vue 中,利用插槽传递内容:

<template><div id="app"><Card title="第一个卡片"><p>这是第一张卡片的内容。</p></Card><Card title="第二个卡片"><p>这是第二张卡片的内容。</p></Card></div>
</template><script>
import Card from './components/Card.vue';export default {name: 'App',components: {Card,},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

6.3 查看效果

刷新页面,你会看到两个卡片,每个卡片都有不同的插槽内容。

7. 组件样式

Vue支持多种样式管理方式,包括内联样式、块样式、Scoped样式等,使得组件的样式独立且可管理。

7.1 Scoped样式

当你在组件中使用<style scoped>时,样式将仅适用于该组件,不会影响到其它组件。

7.2 组合和继承样式

可以使用CSS预处理器如Sass或Less(通过Vue CLI配置)来更好地管理样式。下面是一个简单的例子:

<style lang="scss" scoped>
.card {border: 1px solid #ccc;padding: 20px;margin: 10px;border-radius: 5px;& h3 {color: blue;}& p {color: gray;}
}
</style>

通过上述内容,我们深入了解了Vue.js组件的开发,包括组件的基本定义、prop、事件、插槽以及样式管理。组件是Vue.js的核心概念之一,灵活运用组件可以极大提高代码的可读性和维护性。

在实际开发中,组件可以结合Vue路由、状态管理(如Vuex)等,使得应用结构更加清晰。希望通过这篇操作指南,能够帮助读者更好地理解和应用Vue.js组件开发,构建出高效且优雅的Web应用。

相关文章:

Vue.js 组件开发

Vue.js 是一个渐进式的JavaScript框架&#xff0c;主要用于构建用户界面。它采用了组件化的开发方式&#xff0c;使得前端开发更加高效、灵活且易于维护。组件是Vue.js的核心概念之一&#xff0c;理解和掌握组件的开发&#xff0c;有助于我们高效地构建现代Web应用。 本文将涵…...

【Lcode 随笔】C语言版看了不后悔系列持续更新中。。。

文章目录 题目一&#xff1a;最长回文子串题目描述&#xff1a;示例输入与输出&#xff1a;题目分析&#xff1a;解题思路&#xff1a;示例代码&#xff1a;深入剖析&#xff1a; 题目二&#xff1a;合并K个有序链表题目描述&#xff1a;示例输入与输出&#xff1a;题目分析&am…...

排序--希尔排序

希尔排序介绍 希尔排序核心思想就是:1,分组;2,直接插入排序:越有序越快 希尔排序就是多次利用直接插入排序的一个排序算法. 希尔排序的算法思想:间隔式分组,利用直接插入排序让组内有序,然后缩小分组再次排序,直到组数为1希尔排序的理论基础就是直接插入排序越有序越快; 希尔排…...

【教程】57帧! Mac电脑流畅运行黑神话悟空

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 1、先安装CrossOver。网上有许多和谐版&#xff0c;可自行搜索。&#xff08;pd虚拟机里运行黑神话估计够呛的&#xff09; 2、运行CrossOver&#xf…...

『大模型笔记』Docker如何清理Build Cache!

Docker如何清理Build Cache! 文章目录 一. docker system df1. 镜像(Images)2. 容器(Containers)3. 本地卷(Local Volumes)4. 构建缓存(Build Cache)5. 总结二. 构建缓存(Build Cache)删除有什么影响1. 镜像构建速度变慢2. 磁盘空间被释放3. 不会影响已构建和运行的…...

如何使用 Python 读取数据量庞大的 excel 文件

使用 pandas.read_excel 读取大文件时&#xff0c;的确会遇到性能瓶颈&#xff0c;特别是对于10万行20列这种规模的 .xlsx 文件&#xff0c;常规的 pandas 方法可能会比较慢。 要提高读取速度&#xff0c;关键是找到更高效的方式处理 Excel 文件&#xff0c;特别是在 Python 的…...

c语言200例 067

大家好&#xff0c;欢迎来到无限大的频道 今天给大家带来的是c语言200例 题目要求&#xff1a; 设计一个共用体类型&#xff0c;使其成员包含多种数据类型&#xff0c;根据不同的数据类型&#xff0c;输出不同的结果 要设计一个共用体&#xff08;union&#xff09;类型&…...

RabbitMQ的高级特性-死信队列

死信(dead message) 简单理解就是因为种种原因, ⽆法被消费的信息, 就是死信. 有死信, ⾃然就有死信队列. 当消息在⼀个队列中变成死信之后&#xff0c;它能被重新被发送到另⼀个交换器 中&#xff0c;这个交换器就是DLX( Dead Letter Exchange ), 绑定DLX的队列, 就称为死信队…...

Python 复制PDF中的页面

操作PDF文档时&#xff0c;复制其中的指定页面可以帮助我们从PDF文件中提取特定信息&#xff0c;如文本、图表或数据等&#xff0c;以便在其他文档中使用。复制PDF页面也可以实现在不同文件中提取页面&#xff0c;以创建一个新的综合文档。 本文将介绍如何使用Python 在同一文档…...

Sql Developer日期显示格式设置

默认时间格式显示 设置时间格式&#xff1a;工具->首选项->数据库->NLS->日期格式: DD-MON-RR 修改为: YYYY-MM-DD HH24:MI:SS 设置完格式显示&#xff1a;...

IP地址与智能家居能够碰撞出什么样的火花呢?

感应灯、远程遥控空调&#xff0c;自动感应窗帘——智能家居已经在正逐步走入我们的生活&#xff0c;为我们带来前所未有的便捷与舒适体验。而在这一进程中&#xff0c;IP地址又能够与智能家居碰撞出什么样的火花呢&#xff1f; 一、IP地址&#xff1a;智能家居的连接基石 智…...

人工智能技术在电磁场与微波技术专业的应用

在人工智能与计算电磁学的融合背景下&#xff0c;电磁学的研究和应用正在经历一场革命。计算电磁 学是研究电磁场和电磁波在不同介质中的传播、散射和辐射等问题的学科&#xff0c;它在通信、雷达、无 线能量传输等领域具有广泛的应用。随着人工智能技术的发展&#xff0c;这一…...

The First项目报告:探索Yield Guild Games运行机制与发展潜力

在探索数字娱乐与金融融合的全新疆域中&#xff0c;GameFi&#xff08;游戏化金融&#xff09;以其独特的魅力引领了一场前所未有的变革。这一创新概念&#xff0c;最初由MixMarvel的CSO Mary Ma在2019年底乌镇大会的远见卓识中首次提出&#xff0c;它将去中心化金融&#xff0…...

完成UI界面的绘制

绘制UI 接上文&#xff0c;在Order90Canvas下创建Image子物体&#xff0c;图片资源ui_fish_lv1&#xff0c;设置锚点&#xff08;CountdownPanelImg同理&#xff09;&#xff0c;命名为LvPanelImg,创建Text子物体&#xff0c;边框宽高各50&#xff0c; &#xff0c;重名为LvT…...

iot网关是什么?iot网关在工业领域的应用-天拓四方

一、IoT网关的定义 IoT网关&#xff0c;即物联网网关&#xff0c;是物联网&#xff08;IoT&#xff09;系统中的重要组成部分。它主要实现感知网络与通信网络&#xff0c;以及不同类型感知网络之间的协议转换&#xff0c;既能够支持广域互联&#xff0c;也能满足局域互联的需求…...

从碎片到整合:EasyCVR平台如何重塑城市感知系统的视频数据生态

随着城市化进程的加速&#xff0c;城市感知系统作为智慧城市的重要组成部分&#xff0c;正逐步成为提升城市管理效率、保障公共安全、优化资源配置的关键手段。EasyCVR视频汇聚融合平台&#xff0c;凭借其强大的数据整合、智能分析与远程监控能力&#xff0c;在城市感知系统中扮…...

java socket bio 改造为 netty nio

公司早些时候接入一款健康监测设备&#xff0c;由于业务原因近日把端口暴露在公网后&#xff0c;每当被恶意连接时系统会创建大量线程&#xff0c;在排查问题是发现是使用了厂家提供的服务端demo代码&#xff0c;在代码中使用的是java 原生socket&#xff0c;在发现连接后使用独…...

进程、线程、协程详解:并发编程的三大武器

在现代计算机科学中,并发编程是一个核心概念,而进程、线程和协程是实现并发的三种主要方式。本文将深入探讨这三种概念,分析它们的特点、优缺点,以及适用场景。 1. 进程 (Process) 1.1 定义 进程是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的…...

探索5 大 Node.js 功能

目录 单线程 Node.js 工作线程【Worker Threads】 Node.js 进程 进程缺点 工作线程 注意 集群进程模块【Cluster Process Module】 内部发生了什么&#xff1f; 为什么要使用集群 注意&#xff1a; 应用场景&#xff1a; 内置 HTTP/2 支持 这个 HTTP/2 是什么&…...

EZUIKit.js萤石云vue项目使用

EZUIKit.js 是萤石云&#xff08;Ezviz&#xff09;提供的一款用于Web端的视频播放和控制的JavaScript库。它允许开发者在网页上轻松集成视频监控、对讲、录像回放等功能&#xff0c;适用于安防监控、智能家居等场景。通过EZUIKit.js&#xff0c;你可以方便地访问萤石云平台上的…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...