当前位置: 首页 > 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;你可以方便地访问萤石云平台上的…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...