当前位置： 首页 > article >正文

Vue.js 的介绍与组件开发初步

article 2026/5/8 5:44:16

Vue.js 的介绍与组件开发初步

  • Vue.js 的介绍与组件开发初步
    • 引言
    • 第一部分：Vue.js 基础入门
      • 1.1 什么是 Vue.js？
      • 1.2 搭建 Vue.js 开发环境
        • 安装 Node.js 和 npm
        • 安装 Vue CLI
        • 创建新项目
        • 运行示例
      • 1.3 第一个 Vue.js 示例
    • 第二部分：Vue.js 组件开发基础
      • 2.1 组件的作用域与作用域穿透
      • 2.2 组件的生命周期钩子
      • 2.3 组件的事件系统
    • 第三部分：Vue.js 的组件开发的进阶特性
      • 3.1 组件的状态管理
      • 3.2 组件的插槽
      • 3.3 组件的多语言（说的更好听一点：国际化）支持
    • 第四部分：Vue.js 的实际应用开发
      • 4.1 开发一个简单的待办事项列表
        • 父组件（App.vue）
        • 子组件（TodoItem.vue）
    • 第五部分：总结与扩展
      • 5.1 总结
      • 5.2 扩展学习

Vue.js 的介绍与组件开发初步

引言

随着互联网的快速发展，前端技术也在不断进步。在众多的前端框架中，Vue.js 以其简洁、高效和易用性备受欢迎。无论是个人开
发者还是企业团队，Vue.js 都成为了构建用户界面的理想选择。本文将详细介绍 Vue.js 的基本概念，并深入探讨组件开发的相关
知识，帮助读者快速上手并掌握 Vue.js 的核心技能。

第一部分：Vue.js 基础入门

1.1 什么是 Vue.js？

Vue.js 是一个用于构建用户界面的 JavaScript 框架。它遵循 MVVM（Model-View-ViewModel）模式，使得数据绑定更加简洁和高效
。与传统的 MVC 架构不同，Vue.js 将视图和 ViewModel 结合在一起，从而简化了代码结构。

1.2 搭建 Vue.js 开发环境

安装 Node.js 和 npm

首先需要安装 Node.js 和 npm（Node Package Manager），这是前提条件

具体如何安装可以参考作者的这篇文章：
Node.js 和 npm安装教程

安装 Vue CLI

Vue CLI 是一个官方的脚手架工具，能够快速创建和管理 Vue 项目。

npm install -g vue-cli-service
创建新项目

使用 Vue CLI 创建一个新的 Vue 项目：

vue create my-vue-app
cd my-vue-app
npm run dev
运行示例

打开浏览器，访问 http://localhost:8080，即可看到运行中的 Vue 应用。

1.3 第一个 Vue.js 示例

<!DOCTYPE html>
<html>
<head><title>Vue.js 入门</title><script src="https://unpkg.com/vue@2"></script>
</head>
<body><div id="app">{{ message }}</div><script>var app = new Vue({el: '#app',data: {message: 'Hello, Vue.js!'}});</script>
</body>
</html>

这个简单的示例展示了如何使用 Vue 实现数据绑定。通过 {{ }} 指令，视图中的内容会根据数据的变化自动更新。

第二部分：Vue.js 组件开发基础

2.1 组件的作用域与作用域穿透

在组件中，data 属性默认作用于当前组件的范围。如果需要将属性传递给父组件，可以使用 v-bind 或者 : 操作符。

<!-- 父组件 -->
<child-component :message="parentMessage"></child-component><!-- 子组件 -->
<script>export default {props: ['message']}
</script>

2.2 组件的生命周期钩子

了解 Vue 组件的生命周期对于优化性能至关重要。

// 生命周期函数
export default {beforeCreate() { /* 初始化前 */ },created() { /* 初始化后 */ },mounted() { /* 挂载 DOM 后 */ },updated() { /* 更新后 */ },destroyed() { /* 销毁前 */ }
}

2.3 组件的事件系统

通过自定义事件，组件之间可以实现高效的通信。

<!-- 触发事件 -->
this.$emit('custom-event', 'event-data')<!-- 监听事件 -->
@custom-event="handleEvent"

第三部分：Vue.js 的组件开发的进阶特性

3.1 组件的状态管理

对于复杂应用，推荐使用 Vuex 进行状态管理。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++}}
})

3.2 组件的插槽

插槽允许父组件向子组件传递内容，增强了组件的灵活性。

<!-- 父组件 -->
<child-component><template slot="header"><h1>Header</h1></template>
</child-component><!-- 子组件 -->
<slot name="header"></slot>

3.3 组件的多语言（说的更好听一点：国际化）支持

通过 vue-i18n，可以轻松实现国际化的组件开发。

import Vue from 'vue'
import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({locale: 'zh-CN', // 设置默认语言messages: {'en-US': { ... },'zh-CN': { ... }}
})

第四部分：Vue.js 的实际应用开发

4.1 开发一个简单的待办事项列表

父组件（App.vue）
<template><div id="app"><h1>待办事项</h1><input v-model="newTodo" placeholder="输入新任务"><button @click="addTodo">添加</button><ul><li v-for="(todo, index) in todos" :key="index">{{ todo.text }}<button @click="removeTodo(index)">删除</button></li></ul></div>
</template><script>
export default {data() {return {newTodo: '',todos: []}},methods: {addTodo() {if (this.newTodo.trim()) {this.todos.push({ text: this.newTodo })this.newTodo = ''}},removeTodo(index) {this.todos.splice(index, 1)}}
}
</script>
子组件（TodoItem.vue）
<template><li class="todo-item">{{ text }}<button @click="deleteTodo">删除</button></li>
</template><script>
export default {props: ['text', 'index'],methods: {deleteTodo() {this.$emit('delete', this.index)}}
}
</script>

第五部分：总结与扩展

5.1 总结

  • 组件化开发使代码结构更清晰。
  • Vue 提供了丰富的生命周期钩子，便于控制组件的行为。
  • 使用 Vuex 进行状态管理，可以提升应用的可维护性。

5.2 扩展学习

  • 深入理解响应式原理，优化数据绑定性能。
  • 学习 Vue Router 实现前后台路由功能。
  • 探索 Nuxt.js 或 Vue CLI 快速开发脚手架。

通过以上内容的学习和实践，开发者可以熟练掌握 Vue 组件的开发技巧，并能够构建出高效、可维护的 Web 应用。

相关文章：

Vue.js 的介绍与组件开发初步

Vue.js 的介绍与组件开发初步 Vue.js 的介绍与组件开发初步引言第一部分&#xff1a;Vue.js 基础入门1.1 什么是 Vue.js&#xff1f;1.2 搭建 Vue.js 开发环境安装 Node.js 和 npm安装 Vue CLI创建新项目运行示例 1.3 第一个 Vue.js 示例 第二部分&#xff1a;Vue.js 组件开发基…...

编程日记 2026/5/3 17:04:32

XCCL、NCCL、HCCL通信库

XCCL提供的基本能力 XCCL提供的基本能力 不同的XCCL 针对不同的网络拓扑&#xff0c;实现的是不同的优化算法的&#xff08;不同CCL库最大的区别就是这&#xff09; 不同CCL库还会根据自己的硬件、系统&#xff0c;在底层上面对一些相对应的改动&#xff1b; 但是对上的API接口…...

编程日记 2026/5/6 5:47:25

Python教学:文档处理及箱线图等

代码1&#xff1a; import os import pandas as pd import numpy as py import os.path from os import listdir import openpyxl from openpyxl import Workbook import re import matplotlib.pyplot as plt # 导入matplotlib的绘图模块&#xff0c;用于可视化 cwdos.getcwd…...

编程日记 2026/2/26 9:24:11

【Redis】安装配置Redis超详细教程 / Linux版

Linux安装配置Redis超详细教程 安装redis依赖安装redis启动redis停止redisredis.conf常见配置设置redis为后台启动修改redis监听地址设置工作目录修改密码监听的端口号数据库数量设置redis最大内存设置日志文件设置redis开机自动启动 学习视频&#xff1a;黑马程序员Redis入门到…...

编程日记 2026/4/29 17:45:58

【大数据技术】教程05：本机DataGrip远程连接虚拟机MySQL/Hive

本机DataGrip远程连接虚拟机MySQL/Hive datagrip-2024.3.4VMware Workstation Pro 16CentOS-Stream-10-latest-x86_64-dvd1.iso写在前面 本文主要介绍如何使用本机的DataGrip连接虚拟机的MySQL数据库和Hive数据库，提高编程效率。 安装DataGrip 请按照以下步骤安装DataGrip软…...

编程日记 2026/4/29 17:45:59

springboot 启动原理

目标&#xff1a; SpringBootApplication注解认识了解SpringBoot的启动流程 了解SpringFactoriesLoader对META-INF/spring.factories的反射加载认识AutoConfigurationImportSelector这个ImportSelector starter的认识和使用 目录 SpringBoot 启动原理SpringBootApplication 注…...

编程日记 2026/5/7 19:17:23

llama.cpp GGUF 模型格式

llama.cpp GGUF 模型格式 1. Specification1.1. GGUF Naming Convention (命名规则)1.1.1. Validating Above Naming Convention 1.2. File Structure 2. Standardized key-value pairs2.1. General2.1.1. Required2.1.2. General metadata2.1.3. Source metadata 2.2. LLM2.2.…...

编程日记 2026/5/7 9:23:26

使用Pytorch训练一个图像分类器

一、准备数据集 一般来说&#xff0c;当你不得不与图像、文本或者视频资料打交道时&#xff0c;会选择使用python的标准库将原始数据加载转化成numpy数组&#xff0c;甚至可以继续转换成torch.*Tensor。 对图片而言&#xff0c;可以使用Pillow库和OpenCV库对视频而言&#xf…...

编程日记 2026/5/6 22:29:19

PythonStyle MVC 开发框架

在 Python 中&#xff0c;MVC&#xff08;Model - View - Controller&#xff0c;模型 - 视图 - 控制器&#xff09;是一种常见的软件设计模式&#xff0c;它将应用程序分为三个主要部分&#xff0c;各自承担不同的职责&#xff0c;以提高代码的可维护性、可扩展性和可测试性。…...

编程日记 2026/2/25 16:34:38

HTTP协议的无状态和无连接

无连接 ①无连接的含义 这里所说的无连接并不是指不连接&#xff0c;客户与服务器之间的HTTP连接是一种一次性连接&#xff0c;它限制每次连接只处理一个请求&#xff0c;当服务器返回本次请求的应答后便立即关闭连接&#xff0c;下次请求再重新建立连接。这种一次性连接主要考…...

编程日记 2026/5/4 11:13:28

毫秒级响应的VoIP中的系统组合推荐

在高并发、低延迟、毫秒级响应的 VoIP 场景中&#xff0c;选择合适的操作系统组合至关重要。以下是针对 Ubuntu linux-lowlatency、CentOS Stream kernel-rt 和 Debian 自定义 PREEMPT_RT 的详细对比及推荐&#xff1a; 1. 系统组合对比 特性Ubuntu linux-lowlatencyCentO…...

编程日记 2026/2/22 13:19:33

PWN--格式化字符串

简介 ‌格式化字符串‌是指在编程过程中&#xff0c;通过特殊的占位符将相关对应的信息整合或提取的规则字符串。格式化字符串包括格式化输入和格式化输出&#xff0c;其本质是程序员调用相关格式化字符串的操作协议规定。错误的或不当的信息配置可能导致程序运行失效或产生未…...

编程日记 2026/2/19 2:56:45

tf.Keras (tf-1.15)使用记录2-基于tf.keras.layers创建层

tf.keras.layers是keras的主要网络创建方法&#xff0c;里面已经有成熟的网络层&#xff0c;也可以通过继承的方式自定义神经网络层。 在keras的model定义中&#xff0c;为了保证所有对数据的操作都是可追溯、可保存、可反向传播&#xff0c;需要保证对数据的任何操作都是基于t…...

编程日记 2025/11/30 13:36:28

面试经典150题——栈

文章目录 1、有效的括号1.1 题目链接1.2 题目描述1.3 解题代码1.4 解题思路 2、2.1 题目链接2.2 题目描述2.3 解题代码2.4 解题思路 3、最小栈3.1 题目链接3.2 题目描述3.3 解题代码3.4 解题思路 4、逆波兰表达式求值4.1 题目链接4.2 题目描述4.3 解题代码4.4 解题思路 5、基本…...

编程日记 2025/5/20 2:23:09

FBX SDK的使用：读取Mesh

读取顶点数据 要将一个Mesh渲染出来&#xff0c;必须要有顶点的位置&#xff0c;法线&#xff0c;UV等顶点属性&#xff0c;和三角面的顶点索引数组。在提取这些数据之前&#xff0c;先理解FBX SDK里面的几个概念&#xff1a; Control Point 顶点的位置&#xff0c;就是x,y,z…...

编程日记 2026/3/4 23:22:40

EtherCAT主站IGH-- 49 -- 搭建xenomai系统及自己的IGH主站

EtherCAT主站IGH-- 49 -- 搭建xenomai系统及自己的IGH主站 0 Ubuntu18.04系统IGH博客、视频欣赏链接一 移植xenomai系统1,下载安装工具包2,下载linux内核及xenomai2.1,下载linux内核2.2,下载xenomai2.3,下载补丁ipipe2.4,解压缩包3,打补丁4,配置内核5,编译内核6,安装编译好的内…...

编程日记 2025/10/11 4:27:07

Java控制台登录系统示例代码

实现一个简单的登录系统需要包括用户输入用户名和密码、验证用户信息等功能。以下是一个简单的Java控制台登录系统示例代码。这个系统使用一个简单的用户信息存储方式&#xff08;如数组或哈希表&#xff09;&#xff0c;并提供基本的登录验证功能。 示例代码 import java.ut…...

编程日记 2025/12/24 3:26:12

S4 HANA明确税金汇差科目(OBYY)

本文主要介绍在S4 HANA OP中明确税金汇差科目(OBYY)相关设置。具体请参照如下内容&#xff1a; 1. 明确税金汇差科目(OBYY) 以上配置点定义了在外币挂账时&#xff0c;当凭证抬头汇率和税金行项目汇率不一致时&#xff0c;造成的差异金额进入哪个科目。此类情况只发生在FB60/F…...

编程日记 2026/5/5 12:47:27

Web-3.0（Solidity）基础教程

Solidity 是 以太坊智能合约编程语言&#xff0c;用于编写 去中心化应用&#xff08;DApp&#xff09;。如果你想开发 Web3.0 应用&#xff0c;Solidity 是必学的。 Remix - Ethereum IDE&#xff08;在线编写 Solidity&#xff09; 特性Remix IDEHardhat适用场景适合 初学者 …...

编程日记 2026/4/15 14:52:46

深入理解linux中的文件（上）

1.前置知识&#xff1a; &#xff08;1&#xff09;文章 内容 属性 &#xff08;2&#xff09;访问文件之前&#xff0c;都必须打开它&#xff08;打开文件&#xff0c;等价于把文件加载到内存中&#xff09; 如果不打开文件&#xff0c;文件就在磁盘中 &#xff08;3&am…...

编程日记 2026/4/30 0:37:35

背包问题和单调栈

背包问题&#xff08;动态规划&#xff09; 动态五步曲 dp数组及下标索引的含义递推公式dp数组如何初始化遍历顺序打印dp数组 01背包&#xff1a;n种物品&#xff0c;有一个,二维数组遍历顺序可以颠倒&#xff0c;&#xff08;滚动数组&#xff09;一维数组遍历顺序不可颠倒…...

编程日记 2026/5/6 8:52:21

Airflow：深入理解Apache Airflow Task

Apache Airflow是一个开源工作流管理平台&#xff0c;支持以编程方式编写、调度和监控工作流。由于其灵活性、可扩展性和强大的社区支持&#xff0c;它已迅速成为编排复杂数据管道的首选工具。在这篇博文中&#xff0c;我们将深入研究Apache Airflow 中的任务概念&#xff0c;探…...

编程日记 2026/4/29 17:51:00

WebSocket——环境搭建与多环境配置

一、前言&#xff1a;为什么要使用多环境配置&#xff1f; 在开发过程中&#xff0c;我们通常会遇到多个不同的环境&#xff0c;比如开发环境&#xff08;Dev&#xff09;、测试环境&#xff08;Test&#xff09;、生产环境&#xff08;Prod&#xff09;等。每个环境的配置和需…...

编程日记 2026/3/2 0:58:42

93，【1】buuctf web [网鼎杯 2020 朱雀组]phpweb

进入靶场 页面一直在刷新 在 PHP 中&#xff0c;date() 函数是一个非常常用的处理日期和时间的函数&#xff0c;所以应该用到了 再看看警告的那句话 Warning: date(): It is not safe to rely on the systems timezone settings. You are *required* to use the date.timez…...

编程日记 2026/4/29 17:51:06

ChatGPT怎么回事？

纯属发现&#xff0c;调侃一下~ 这段时间deepseek不是特别火吗&#xff0c;尤其是它的推理功能&#xff0c;突发奇想&#xff0c;想用deepseek回答一些问题&#xff0c;回答一个问题之后就回复服务器繁忙&#xff08;估计还在被攻击吧~_~&#xff09; 然后就转向了GPT&#xf…...

编程日记 2026/4/29 17:46:00

机器学习day7

自定义数据集 使用pytorch框架实现逻辑回归并保存模型&#xff0c;然后保存模型后再加载模型进行预测&#xff0c;对预测结果计算精确度和召回率及F1分数 代码 import numpy as np import torch import torch.nn as nn import torch.optim as optimizer import matplotlib.pyp…...

编程日记 2026/3/14 7:01:01

本地部署DeepSeek教程（Mac版本）

第一步、下载 Ollama 官网地址&#xff1a;Ollama 点击 Download 下载 我这里是 macOS 环境 以 macOS 环境为主 下载完成后是一个压缩包&#xff0c;双击解压之后移到应用程序&#xff1a; 打开后会提示你到命令行中运行一下命令&#xff0c;附上截图&#xff1a; 若遇…...

编程日记 2026/4/30 23:58:39

2月3日星期一今日早报简报微语报早读

2月3日星期一&#xff0c;农历正月初六&#xff0c;早报#微语早读。 1、多个景区发布公告&#xff1a;售票数量已达上限&#xff0c;请游客合理安排行程&#xff1b; 2、2025春节档总票房破70亿&#xff0c;《哪吒之魔童闹海》破31亿&#xff1b; 3、美宣布对中国商品加征10…...

编程日记 2026/5/7 17:50:56

202周日复盘（159）本周回顾

1、当日总结。 定价相关内容&#xff0c;学习与思考。 第一性原理&#xff0c;分析游戏成本的构成。 ------------- 2、周总结 大思路&#xff0c;细节设计都有进展&#xff0c;每天都挖坑与加工。 a 学习游戏思想 任天堂游戏研发四大标准&#xff0c;创新&#xff0c;直…...

编程日记 2026/3/13 5:09:56

Linux基础 ——tmux vim 以及基本的shell语法

Linux 基础 ACWING y总的Linux基础课&#xff0c;看讲义作作笔记。 tmux tmux 可以干嘛&#xff1f; tmux可以分屏多开窗口&#xff0c;可以进行多个任务&#xff0c;断线&#xff0c;不会自动杀掉正在进行的进程。 tmux – session(会话&#xff0c;多个) – window(多个…...

编程日记 2026/5/2 12:48:10