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

vue3 基本使用

news 来源：原创 2025/5/7 7:20:49

Vue 3 提供了多种方式来构建用户界面，包括选项式 API 和 Composition API。下面我将详细介绍 Vue 3 的基本使用和语法，主要集中在选项式 API 上，因为这对于初学者来说更容易上手。

1. 创建 Vue 项目

如果你还没有一个 Vue 项目，可以参考之前提到的方法使用 Vue CLI 创建一个新的项目：

vue create my-vue-app

选择默认配置或根据需要手动选择特性。然后进入项目目录并启动开发服务器：

cd my-vue-app
npm run serve

2. 基本结构

典型的 Vue 项目结构如下：

public/：存放静态资源。
```
src/
```
：源代码目录。
- assets/：放置图片等静态资源。
- components/：存放可复用的组件。
- App.vue：根组件。
- main.js：入口文件，负责初始化应用。

3. 单文件组件 (SFC)

在 Vue 中，单文件组件（Single File Component, SFC）是一种特殊的文件格式 .vue，它允许在一个文件中定义模板、脚本和样式。

示例：HelloWorld.vue

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><style scoped>
.hello {color: #42b983;
}
</style>

这里，<template> 标签定义了 HTML 模板，<script> 标签包含了 JavaScript 逻辑，而 <style> 标签则用于定义样式。scoped 属性确保样式只应用于当前组件。

4. 数据绑定

文本插值

使用双大括号 {{ }} 进行文本插值。

<span>Message: {{ message }}</span>

v-bind 绑定属性

使用 v-bind 或其简写 : 来动态设置元素的属性。

<img :src="imageSrc" alt="Image">

v-model 双向数据绑定

对于表单输入元素，v-model 实现双向数据绑定。

<input v-model="inputValue" type="text">
<p>你输入的是: {{ inputValue }}</p>

5. 事件处理

使用 v-on 或其简写 @ 来监听 DOM 事件，并调用方法。

<button @click="handleClick">点击我</button>

在 <script> 部分定义方法：

methods: {handleClick() {alert('按钮被点击了！');}
}

6. 条件渲染与列表渲染

v-if 和 v-show 用于条件性地显示元素。
v-for 用于循环渲染列表。

示例：

<ul><li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
</ul>

在 <script> 中定义数据：

data() {return {items: [{ text: 'Item 1' },{ text: 'Item 2' },{ text: 'Item 3' }]};
}

7. 计算属性与侦听器

计算属性：通过 computed 定义，基于依赖进行缓存。
侦听器：通过 watch 监听数据变化并执行函数。

示例：

export default {data() {return {firstName: 'John',lastName: 'Doe'};},computed: {fullName() {return `${this.firstName} ${this.lastName}`;}},watch: {fullName(newVal, oldVal) {console.log(`fullName changed from ${oldVal} to ${newVal}`);}}
};

8. 组件通信

Props：父组件向子组件传递数据。
Events：子组件向父组件发送消息。
Provide/Inject：祖先组件向后代组件提供数据。

示例：

父组件 ParentComponent.vue

<template><ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from parent'};},methods: {handleChildEvent(message) {console.log('Received from child:', message);}}
};
</script>

子组件 ChildComponent.vue

<template><div><p>{{ message }}</p><button @click="sendToParent">Send to Parent</button></div>
</template><script>
export default {props: ['message'],methods: {sendToParent() {this.$emit('childEvent', 'Hello from child');}}
};
</script>

9. 路由

对于单页应用(SPA)，你需要使用 vue-router 来管理不同页面之间的导航。

安装 vue-router：

npm install vue-router@next

配置路由：

创建 router/index.js 文件：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];const router = createRouter({history: createWebHistory(),routes
});export default router;

在 main.js 中引入并使用路由器：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');

vue3 基本使用

Vue 3 提供了多种方式来构建用户界面，包括选项式 API 和 Composition API。下面我将详细介绍 Vue 3 的基本使用和语法，主要集中在选项式 API 上，因为这对于初学者来说更容易上手。 1. 创建 Vue 项目如果你还没有一个 Vue 项目，…...

编程日记 2025/5/7 7:20:49

Redis自学之路—高级特性(实现消息队列)（七）

目录简介 Redis的Key和Value的数据结构组织全局哈希表渐进式rehash 发布和订阅操作命令 publish 发布消息 subscribe 订阅消息 psubscribe订阅频道 unsubscribe 取消订阅一个或多个频道 punsubscribe 取消订阅一个或多个模式查询订阅情况-查看活跃的频道查询…...

编程日记 2025/5/7 7:03:20

ROS基本框架2——在ROS开发中创建并使用自定义消息（C++版本）

ROS基本框架2——在ROS开发中创建并使用自定义消息（C++版本） code review! 参考笔记 1.ROS基本框架1——编写简单的发布者和订阅者（C++和Python版本） 2.ROS基本框架2——在ROS开发中创建并使用自定义消息（C++版本）文章目录 ROS基本框架2——在ROS开发中创建并使用自定义…...

编程日记 2025/4/26 4:13:32

计算机的错误计算（一百七十二）

摘要探讨 MATLAB 对于算式的计算误差。例1. 在 MATLAB 中计算的值。直接贴图吧： 这样，MATLAB 的输出中只有3位正确数字，有效数字的错误率为 (16-3)/16 81.25% . 因为16位的正确输出为 0.2971242332737277e-18（ISReals…...

编程日记 2025/4/15 21:55:08

贵州大学oj平台高级语言第九次作业（四）

题目：链表的基础操作题目描述链表是软件中一种最基本的数据结构，它是用链式存储结构实现数据存储的线性表。它较顺序表(如数组)而言在插入和删除数据时不必移动其后的大批量元素。现在给你一些整数，然后会频繁地插入和删除其中的某些元素&a…...

编程日记 2025/5/6 10:59:44

手机卡限速丨中国移动5G变3G，网速500kb

以下猜测错误，又有新的猜测：河南移动的卡出省限速。可能是因为流量结算。 “2024年7月1日起，中国移动集团内部将开启跨省流量结算” 在深圳四五年了，之前没有过，就从上个月开始。11月底解除限速，12月刚开…...

编程日记 2025/5/4 11:54:40

种花问题算法

假设有一个很长的花坛，一部分地块种植了花，另一部分却没有。可是，花不能种植在相邻的地块上，它们会争夺水源，两者都会死去。给你一个整数数组 flowerbed 表示花坛，由若干 0 和 1 组成，其中 0 …...

编程日记 2025/4/23 13:49:22

Node.js-Mongodb数据库

MongoDB MongoDB是什么？ MongoDB是一个基于分布式文件存储的数据库数据库是什么？ 数据库（DataBase）是按照数据结构来组织、存储和管理数据的应用程序（软件） 数据库作用？ 对数据进行增、删…...

编程日记 2025/5/5 8:06:39

Nginx

目录基本介绍 Nginx核心功能 Nginx下载&安装&启动配置防火墙 Nginx常用命令 Nginx配置文件全局块 events块 http块 http全局块 server 块检查配置信息快速入门安装JDK 安装Tomcat 反向代理分析 Location语法规则反向代理配置-Location实例 …...

编程日记 2025/4/24 8:02:11

CTF-PWN: 全保护下格式化字符串利用 [第一届“吾杯”网络安全技能大赛如果能重来] 赛后学习(没思路了)

通过网盘分享的文件：如果能重来.zip 链接: https://pan.baidu.com/s/1XKIJx32nWVcSpKiWFQGpYA?pwd1111 提取码: 1111 --来自百度网盘超级会员v2的分享漏洞分析格式化字符串漏洞,在printf(format); __int64 sub_13D7() {char format[56]; // [rsp10h] [rbp-40h]…...

编程日记 2025/4/26 4:20:07

HTML5系列（7）-- Web Storage 实战指南

前端技术探索系列：HTML5 Web Storage 实战指南 🗄️ 致读者：本地存储的新纪元 👋 前端开发者们， 今天我们将深入探讨 HTML5 中的 Web Storage 技术，这是一个强大的本地存储解决方案，让我们能…...

编程日记 2025/5/5 0:56:39

RocketMQ: 保证消息的可靠性投递

概述在分布式系统中，消息队列作为异步通信的重要组件，其可靠性和稳定性至关重要RocketMQ 是阿里巴巴开源的一款高性能、高可靠性的分布式消息中间件，广泛应用于各种场景，如交易订单处理、日志收集、流计算等 RocketMQ 的可靠性…...

编程日记 2025/5/6 7:23:01

消息传递神经网络（Message Passing Neural Networks, MPNN）

消息传递神经网络（Message Passing Neural Networks, MPNN） 一、引言二、消息传递框架概述1.消息传递阶段（1）消息生成与传播-message（2）消息聚合-aggregate（3）消息更新-update&#…...

编程日记 2025/5/7 7:00:28

Python干货总结篇：列表、字典、集合、元组的区别与用途

前言： 更详细知识点，搞懂列表、字典、集合、元组到底是什么，可关注主页文章：Python知识点精汇！ 目录一、特点与用途 1.列表：a[ ] 2.集合：a{ } 3.字典：a{key:value} 4.元组&am…...

编程日记 2025/5/6 4:13:56

1、安装minio 下载适合自己系统版本的安装文件https://dl.min.io/server/minio/release/windows-amd64/ yum install xxx.rpm 2、配置/etc/profile export MINIO_ACCESS_KEYroot [ui登录账号] export MINIO_SECRET_KEYminioDev001 [ui登录密码] export MINIO_OPTS"…...

编程日记 2025/5/7 7:12:53

医院管理系统

私信我获取源码和万字论文，制作不易，感谢点赞支持。医院管理系统摘要随着信息互联网信息的飞速发展，医院也在创建着属于自己的管理系统。本文介绍了医院管理系统的开发全过程。通过分析企业对于医院管理系统的需求，创建了一个计…...

编程日记 2025/4/29 22:03:33

编译器优化技术

方法内联逃逸分析公共子表达式消除数据边界检查消除...

编程日记 2025/4/9 4:29:22

高斯消元——acwing

题目一：高斯消元解线性方程组 883. 高斯消元解线性方程组 - AcWing题库分析代码 #include<bits/stdc.h> using namespace std;const int N 110; const double eps 1e-6; // 注意了double, 和1e-6 ,,这样才是double的0 int n;double a[N][N];int guass…...

编程日记 2025/5/6 15:01:28

华为关键词覆盖应用市场ASO优化覆盖技巧

在我国的消费者群体当中，华为的品牌形象较高，且产品质量过硬，因此用户基数也大。与此同时，随着影响力的增大，华为不断向外扩张，也逐渐成为了海外市场的香饽饽。作为开发者和运营者，我们要认识到…...

编程日记 2025/4/29 11:44:13

[代码随想录06]哈希表的使用，有效字母异位词，两数组交集，快乐数，两数之和

前言哈希表是什么？一句话带你理解，简单来说我们对于杂乱的数据，怎么快速找到数据，如何做呢？一般的做法就是遍历复杂度为o(N)去找寻一个数据，但是吧，我们这样思考的话，还是花了大量时…...

编程日记 2025/5/6 17:41:54

linux网络抓包工具

linux网络抓包工具一、tcpdump1.1 基本用法1.2 龙芯平台实例操作二、wireshark2.1 主要功能2.2 龙芯平台实例操作一、tcpdump tcpdump 指令可列出经过指定网络界面的数据包文件头，可以将网络中传送的数据包的 “头” 完全截获下来提供分析。它支持针对网络层、协…...

编程日记 2025/5/7 7:15:33

运维工程师.云计算工程师面试题.考试题

《（全国）运维自动化阶段第1套卷》卷面总分题号单选题 90 题分得分一、单选题（每题2分，共计70分；得分____） 1．下面哪个选项可以做变量名称？（） A、if B、123abc C、for D、User_Name 2．哪种数据类型可以做增,删,改相关操作？（） A、字符串 B、列表 C、元…...

编程日记 2025/5/6 17:09:11

递归1——递归入门

目录 1.递归 2.递归的基本题目 2.1.题目一——P5739 【深基7.例7】计算阶乘 - 洛谷 | 计算机科学教育新生态 2.2.题目二——B2064 斐波那契数列 - 洛谷 | 计算机科学教育新生态 2.3.题目三——B2142 求 123...N 的值 - 洛谷 | 计算机科学教育新生态 2.4.题目四——B2144…...

编程日记 2025/5/7 7:06:05

XuperChain核心流程

04-XuperChain核心流程 0 XuperChain架构图核心框架 Xuper Chain主要由 Xuper Core 这个核心引擎来构建。Xuper Core 分为三个部分： 基础组件：日志、存储、监控等关键组件，以及密码学库等基本组件。核心组件：包括共识、合约、账…...

编程日记 2025/5/7 7:08:49

2024.12.2工作复盘

1.今天学了什么？ 简单的写了一篇博客，是关于参数校验的问题，参数校验，一个是前后端校验到底一不一致，一个是绕过前端校验，看后台的逻辑到底能不能校验住。 2.今天解决了什么问题？ 3.今天完成…...

编程日记 2025/5/6 3:28:43

关于Vscode配置Unity环境时的一些报错问题（持续更新）

第一种报错： 下载net请求超时（一般都会超时很正常的） 实际时并不需要解决，它对你的项目毫无影响第二种报错： .net版本不匹配解决：（由于造成问题不一样，所以建议都尝试一次&…...

编程日记 2025/4/30 2:28:04

微信小程序——文档下载功能分享（含代码）

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...

编程日记 2025/5/6 2:05:45

长短期记忆网络（LSTM）简介

文章目录一、说明二、传统 RNN 的问题三、为什么梯度消失？四、长短期记忆网络简介五、忘记门六、Update Gate (Input Gate)七、Output Gate八、数学上的内存九、从 LSTM 到 Transformer十、总结一、说明机器学习取得进步的领域之一是自然语言处理。对于用于机器…...

编程日记 2025/5/4 10:42:00

【电子通识】USB Type-C线缆为什么有的用到E-Marker芯片

USB Type-C接口具备数据传输、充电（基于USB PD协议）和音频视频传输能力。但是，上述功能都有强弱之别，并因此衍生出了无数种规格的USB Type-C线缆。如下所示直接搜索就可以看到，虽然都是Type-C接口，但存在很多不同种类的线缆规格。以数据传输为例，USB Type-C可选USB2.0…...

编程日记 2025/5/1 3:07:02

【故障处理系列--移动云云盘根目录在线扩容】

移动云云盘根目录扩容 **目的：**测试harbor仓库服务器的根目录能否在线扩容 1、移动云控制台系统盘扩容这里以我自己的虚拟机演示 2、查看分区的文件类型 3、安装growpart工具 rootgitlab-cli:~# apt install cloud-guest-utils -y rootgitlab-cli:~# apt ins…...

编程日记 2025/5/3 4:16:22

混沌工程/混沌测试/云原生测试/云平台测试

背景私有云/公有云/混合云等具有复杂，分布式，环境多样性等特点，许多特殊场景引发的线上问题很难被有效发现。所以需要引入混沌工程，建立对系统抵御生产环境中失控条件的能力以及信心，提高系统面对未知风险得能力。 …...

编程日记 2025/5/6 9:55:51

CQ 社区版 2024.11 | 新增“审批人组”概念、可通过SQL模式自定义审计图表……

CloudQuery 社区 11 月新版本来啦！本月版本依旧是 CUG（CloudQuery 用户组）尝鲜版的更新。针对审计模块增加了 SQL 模式自定义审计图表；在流程模块引入了“审批人组”概念。此外，在 SQL 编辑器、连接管理等模块都涉及…...

编程日记 2025/5/3 12:43:07

【maven-4】IDEA 配置本地 Maven 及如何使用 Maven 创建 Java 工程

IntelliJ IDEA（以下简称 IDEA）是一款功能强大的集成开发环境，广泛应用于 Java 开发。下面将详细介绍如何在 IDEA 中配置本地 Maven，并创建一个 Maven Java 工程，快速上手并高效使用 Maven 进行 Java 开发。 1. Maven …...

编程日记 2025/5/4 9:57:30

c语言结构体

c语言结构体 1. 结构体的定义在C语言中，结构体是一种用户自定义的数据类型，它允许你将不同类型的数据组合成一个单一的实体。结构体的定义以struct关键字开头，后面跟着结构体标签（可以省略，但为了方便后续引用&#…...

编程日记 2025/4/29 12:51:54

洛谷二分题

P1024 [NOIP2001 提高组] 一元三次方程求解题目描述有形如：𝑎𝑥3𝑏𝑥2𝑐𝑥𝑑0ax3bx2cxd0 这样的一个一元三次方程。给出该方程中各项的系数（𝑎,&#x1d44…...

编程日记 2025/5/2 9:54:48

vue3的项目目录和关键文件

注意换插件 vue2的是 Vetur ；vue3的是volar 这里注意volar插件已更名为Vue - Official vite.config.js 放跟vite配置相关的内容区别于vue2；vue2是vue.config.js；vue2是基于webpack的，vue3是基于vite的 main.js import { creat…...

编程日记 2025/4/20 9:28:46

rabbitmq原理及命令

目录一、RabbitMQ原理1、交换机（Exchange）fanoutdirecttopicheaders（很少用到） 2、队列Queue3、Virtual Hosts4、基础对象二、RabbitMQ的一些基本操作:1、用户管理2、用户角色3、vhost4、开启web管理接口5、批量删除队列一、Ra…...

编程日记 2025/4/29 7:42:54

洛谷 P1308 [NOIP2011 普及组] 统计单词数 C语言

题目： https://www.luogu.com.cn/problem/P1308 复制Markdown 展开题目描述一般的文本编辑器都有查找单词的功能，该功能可以快速定位特定单词在文章中的位置，有的还能统计出特定单词在文章中出现的次数。现在，请你编程实现…...

编程日记 2025/5/2 5:59:50

vue基础之5：vue数据代理、事件处理、事件修饰符、键盘事件

欢迎来到“雪碧聊技术”CSDN博客！ 在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将…...

编程日记 2025/5/2 17:08:38

RK3568平台开发系列讲解（PWM篇）sysyfs 操作 pwm 原理讲解

🚀返回专栏总目录文章目录一、高精度定时器介绍沉淀、分享、成长，让自己和他人都能有所收获！😄 📢使用 sysfs 和内核 API 函数对硬件 PWM 进行控制，而当硬件 PWM 不够用的时候，可以使用 GPIO 来模拟实现 PWM，也可以称之为软件 PWM，软件 PWM 是通过软件编程实…...

编程日记 2025/5/6 19:14:45

python 练习题

目录 1，输入三个整数，按升序输出 2，输入年份及1-12月份，判断月份属于大月，小月，闰月，平月，并输出本月天数 3，输入一个整数，显示其所有是素数因子 4&#…...

编程日记 2025/5/6 5:30:24

SprinBoot整合KafKa的使用(详解)

前言 1. 高吞吐量（High Throughput） Kafka 设计的一个核心特性是高吞吐量。它能够每秒处理百万级别的消息，适合需要高频次、低延迟消息传递的场景。即使在大规模分布式环境下，它也能保持很高的吞吐量和性能，支持低延…...

编程日记 2025/5/5 15:21:32

CSS学习记录03

CSS背景 CSS 背景属性用于定义元素的背景效果。 CSS background-color background-color属性指定元素的背景色。页面的背景色设置如下： body {background-color: lightblue; } 通过CSS，颜色通常由以下方式指定： 有效的颜色名称-比如“…...

编程日记 2025/4/29 2:47:39

在Java中使用Apache POI导入导出Excel（二）

本文将继续介绍POI的使用，上接在Java中使用Apache POI导入导出Excel（一） 使用Apache POI组件操作Excel（二） 14、读取和重写工作簿 try (InputStream inp new FileInputStream("workbook.xls")) { //Inpu…...

编程日记 2025/5/4 12:57:56

Vue3学习宝典

1.ref函数调用的方式生成响应式数据，可以传复杂和简单数据类型 <script setup> // reactive接收一个对象类型的数据 import { reactive } from vue;// ref用函数调用的方式生成响应式数据，可以传复杂和简单数据类型 import { ref } from vue // 简…...

编程日记 2025/5/5 17:51:50

Unity开发FPS游戏之完结篇

这个系列的前几篇文章介绍了如何从头开始用Unity开发一个FPS游戏，感兴趣的朋友可以回顾一下。这个系列的文章如下： Unity开发一个FPS游戏_unity 模仿开发fps 游戏-CSDN博客 Unity开发一个FPS游戏之二_unity 模仿开发fps 游戏-CSDN博客 Unity开发一个F…...

编程日记 2025/4/29 12:50:48

基于BM1684的AI边缘服务器-模型转换，大模型一体机（二）

目标追踪注：所有模型转换都是在docker环境中的先进入docker 这里我们是要在docker环境里编译的，所以先进入docker :~/tpu-nntc# docker run -v $PWD/:/workspace -it sophgo/tpuc_dev:latest初始化环境 root2bb02a2e27d5:/workspace/tpu-nntc# s…...

编程日记 2025/5/1 12:51:12