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

07 Vue3框架简介

news 2026/2/10 15:34:15

文章目录

  • 一、Vue3简介
    • 1. 简介
    • 2. 相关网站
    • 3. 前端技术对比
    • 4. JS前端框架
    • 5. Vue核心内容
    • 6. 使用方式
  • 二、基础概念
    • 1. 创建一个应用
    • 2. 变量双向绑定（v-model）
    • 3. 条件控制（v-if）
    • 4. 数组遍历（v-for）
    • 5. 绑定事件（v-on）
    • 6. 表单
  • 三、AJAX交互

一、Vue3简介

1. 简介

Vue是一个流行的JavaScript框架，适合用于构建交互式的Web界面。
Vue的核心特性是响应式数据、组件系统、模板语法和虚拟DOM。
Vue提供了许多有用的工具和库，例如路由、状态管理、指令、过滤器、过渡效果等。

Vue3相关技术栈

  • ECMAScript 6 (ES6) ： 提高 JavaScript 的可读性和可维护性，引入了类（Class）的概念
  • Node.js：跨平台的 JavaScript 运行环境
  • npm：Node.js 的默认包管理器
  • vite：前端项目构建工具
  • Router：用于在 Vue 应用程序中实现页面间的导航和路由管理
  • Pinia：通过状态管理实现组件数据传递
  • Axios：在 Vue.js 应用中处理 HTTP 请求
  • Element-plus：基于 Vue 3 的开源 UI 组件库

2. 相关网站

Vue 3 官方中文文档
Vue3 教程

3. 前端技术对比

在这里插入图片描述

4. JS前端框架

  • jQuery：优点是简化了DOM操作，缺点是频繁操作DOM，影响前端性能。
  • Angular：将后台的MVC模式搬到了前端，增加了模块化开发的理念；对后台程序员友好，对前端程序员不太友好。
  • React：在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂。
  • Vue：综合了Angular（模块化）和React（虚拟DOM）的优点。

5. Vue核心内容

在这里插入图片描述

6. 使用方式

  • 通过 Vite 的构建
    项目使用基于 Vite 的构建设置，并允许使用 Vue 的单文件组件 (SFC)。

  • 通过 CDN 使用 Vue
    通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单。但是无法使用单文件组件 (SFC) 语法。

二、基础概念

1. 创建一个应用

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body><!-- 在页面声明一个将要被Vue控制的DOM区域 --><div id="app"></div>
</body>
<script>// 选项式 API 风格const app = {// data() 返回的属性将会成为响应式的状态// 并且暴露在 `this` 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件处理器绑定methods: {increment() {this.count++}},// 生命周期钩子，会在组件生命周期的各个不同阶段被调用// 例如这个函数就会在组件挂载完成后被调用mounted() {// `this` 指向当前组件实例console.log(`The initial count is ${this.count}.`)},// Vue 组件的模板template : `<button @click="increment">Count is: {{ count }}</button>`}// 通过Vue框架，使挂载的id可以使用app内定义的变量和方法Vue.createApp(app).mount('#app')
</script>
</html>

2. 变量双向绑定（v-model）

  • 使用 v-model 指令实现表单数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body><div id="app"><input type="text" v-model="message"><p>{{ message }}</p></div>
</body>
<script>const app = {data() {return {message: ''}}}Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

3. 条件控制（v-if）

  • 使用 v-if 指令条件性地渲染元素
<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body><div id="app"><input type="text" v-model="num"><p v-if="num>0">num 大于 0</p><p v-else-if="num==0">num 等于 0</p><p v-else>num 小于 0</p></div>
</body>
<script>const app = {data() {return {num: 0}}}Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

4. 数组遍历（v-for）

  • 使用 v-for 指令循环渲染元素
<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body><div id="app"><p v-for="item in items" :key="item.id">{{ item.id }} - {{ item.text }}</p></div>
</body>
<script>const app = {data() {return {items: [{ id: 1, text: 'test 1' },{ id: 2, text: 'test 2' },]}}}Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

5. 绑定事件（v-on）

  • 使用 v-on 指令在 HTML 元素上绑定事件监听器
  • v-on 指令可以缩写为 @ 符号
<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body><div id="app"><button v-on:click="count+=1">Count is: {{ count }}</button></div>
</body>
<script>const app = {data() {return {count: 0}}}Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

6. 表单

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body>
<div id="app"><p>单行文本框：</p><input v-model="data.message1" placeholder="请输入……"><p>输入内容: {{ data.message1 }}</p><p>多行文本框：</p><textarea v-model="data.message2" placeholder="请输入……"></textarea><p>输入内容: {{ data.message2 }}</p>
</div>
</body>
<script>const app = {data() {return {data : {message1: '',message2: ''}}}}Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

三、AJAX交互

推荐使⽤Axios来完成AJAX请求。

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.2/axios.js"></script>
</head>
<body>
<div id="app"><div><p>姓名： <input type="text" v-model="data.baseAccountQueryVo.accountName"></p><button @click="submitForm">查询</button></div><hr><div><div v-for="item in items" :key="item.id"><div>姓名: {{ item.accountName }}</div><div>电话: {{ item.mobileNum }}</div></div></div>
</div>
</body>
<script>const app = {data() {return {items: [],data: {"baseAccountQueryVo": {}}}},methods: {submitForm() {axios.post("http://127.0.0.1:8081/test/api/baseAccount/list",this.data).then(response => {this.items = response.data.baseAccountQueryVos;}).catch(error => {console.log(error);});}}}Vue.createApp(app).mount('#app')
</script>
</html>

相关文章：

07 Vue3框架简介

文章目录 一、Vue3简介1. 简介2. 相关网站3. 前端技术对比4. JS前端框架5. Vue核心内容6. 使用方式 二、基础概念1. 创建一个应用2. 变量双向绑定&#xff08;v-model&#xff09;3. 条件控制&#xff08;v-if&#xff09;4. 数组遍历&#xff08;v-for&#xff09;5. 绑定事件…...

编程日记 2023/12/26 19:15:27

前端八股文（js篇）

一.强制类型转换规则 首先需要了解隐式转换所调用的函数。 当程序员显示调用Boolean&#xff08;value&#xff09;,Number&#xff08;value&#xff09;&#xff0c;String&#xff08;value&#xff09;完成的类型转换&#xff0c;叫做显示类型转换。 当通过new Boolean&…...

编程日记 2023/12/26 19:13:24

windows+ubuntu离线安装翻译软件有道词典

背景&#xff1a; 某些情况下&#xff0c;需要在无法连接互联网的电脑上翻译单词&#xff0c;句子以及段落&#xff0c;就需要能离线安装和翻译的翻译软件&#xff0c;具备一定的词库量&#xff0c;目前找到了《有道词典》。 windows 亲测&#xff0c;无法联网的win10中安装…...

编程日记 2023/12/26 19:11:20

DevC++ easyx实现视口编辑，在超过屏幕大小的地图上画点，与解决刮刮乐bug效果中理解C语言指针的意义

继上篇文案&#xff0c; DevC easyx实现地图拖动&#xff0c;超过屏幕大小的巨大地图的局部显示在屏幕的方法——用悬浮窗的原理来的实现一个视口-CSDN博客 实现了大地图拖动&#xff0c;但是当时野心不止&#xff0c;就想着一气能搓啥就继续搓啥&#xff0c;看着地图移动都搓…...

编程日记 2023/12/26 19:01:12

Kali Linux—借助 SET+MSF 进行网络钓鱼、生成木马、获主机shell、权限提升、远程监控、钓鱼邮件等完整渗透测试（一）

社会工程学—世界头号黑客凯文米特尼克在《欺骗的艺术》中曾提到&#xff0c;这是一种通过对受害者心理弱点、本能反应、好奇心、信任、贪婪等心理陷阱进行诸如欺骗、伤害等危害手段。 SET最常用的攻击方法有&#xff1a;用恶意附件对目标进行 E-mail 钓鱼攻击、Java Applet攻…...

编程日记 2023/12/26 19:00:11

时间与时间戳转换及android和ios对时间识别的区别

注意&#xff1a; "2021-05-01 12:53:59.55" 时间对象在 ios 中会出现 NaN-NaN1-NaN 需要将对象格式化为&#xff1a;"2021/05/01 12:53:59.55" 可同时兼容 android 和 ios。 //将某时间转时间戳 /* var time new Date("2021-05-01 12:53:59.55&qu…...

编程日记 2023/12/26 18:57:09

飞天使-k8s知识点7-kubernetes升级

文章目录 验证新版本有没有问题需要安装的版本微微 1.20.6.0kubeadm upgrade plan 验证新版本有没有问题 查看可用版本的包 现有的状态 查看版本 yum list kubeadm --showduplicates |grep 1.20 yum list kubelet --showduplicates |grep 1.20 yum list kubectl --showduplic…...

编程日记 2023/12/26 18:50:02

【Unity游戏制作】游戏模型导入之前需要注意的三个基本点

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…...

编程日记 2023/12/26 18:49:01

三列布局 css

实现如下图的三列布局&#xff1a; .box {width:1400px;margin:0 auto;padding-bottom:40px;> .left {float:left;width:180px;margin-top:100px;text-align:center;}> .center {float:left;margin-top:100px;margin-left:130px;item-box {float:left;text-align:left;…...

编程日记 2023/12/26 18:42:57

Android开发之生命周期（App、Activity）

在Android开发中&#xff0c;应用程序&#xff08;App&#xff09;和活动&#xff08;Activity&#xff09;的生命周期是非常重要的概念。它们各自都有一系列的生命周期方法&#xff0c;这些方法会在特定的时刻被系统自动调用&#xff0c;以便于开发者对应用或活动进行相应的操…...

编程日记 2023/12/26 18:39:54

利用html2Canvas将表格下载为html

给到我的需求是点击按钮时请求后端接口&#xff0c;根据后端返回的数据&#xff0c;生成表格,并将表格的内容直接下载为html,如下图。 平常做的下载都是后端返回二进制流&#xff0c;这次前端做下载那就必须把页面先画出来&#xff0c;因为下载下来的表格在页面上是不显示的&a…...

编程日记 2023/12/26 18:38:53

《Git快速入门》Git分支

1.master、origin、origin/master 区别 首先搞懂git分支的一些名称区别&#xff1a; master &#xff1a; Git 的默认分支名字。它并不是一个特殊分支、跟其它分支完全没有区别。 之所以几乎每一个仓库都有 master 分支&#xff0c;是因为 git init 命令默认创建它&#xff0c…...

编程日记 2023/12/26 18:36:52

HarmonyOS应用性能与功耗云测试

性能测试 性能测试主要验证HarmonyOS应用在华为真机设备上运行的性能问题&#xff0c;包括启动时长、界面显示、CPU占用和内存占用。具体性能测试项的详细说明请参考性能测试标准。 性能测试支持Phone和TV设备&#xff0c;包格式包括Hap/App。 前提条件 已注册华为开发者帐号&a…...

编程日记 2023/12/26 18:32:47

【AI】人工智能本地环境集成安装

目录 1、基础安装 1.1 GPU安装 1.1.1 GPU版本支持 1.1.2 下载CUDA 1.1.3安装CUDA 1.1.4配置环境变量 1.1.5检测CUDA是否安装成功 1.2 CUDNN安装 1.2.1 下载CUDNN 1.2.2 添加配置 1.2.3验证结果 2、pytorch安装...

编程日记 2023/12/26 18:31:46

主流级显卡的新选择，Sparkle（撼与科技）Intel Arc A750兽人体验分享

▼前言 对于玩家而言&#xff0c;英特尔独显的出现不仅打破了NVIDIA与AMD双雄天下的局面&#xff0c;而且旗下的Arc A系列显卡还拥有不俗的做工性能以及颇具优势的价格&#xff0c;无论是升级或者是装新机都非常合适。如果要在Arc A系列当中选一个性能不俗&#xff0c;能够满足…...

编程日记 2023/12/26 18:26:42

BI 商业数据分析能够给企业带来什么改变？

时下&#xff0c;随着中国企业数据整合应用的意识不断提高&#xff0c;BI 商业数据分析的应用驶入飞速发展的“快车道”。BI 商业智能利用数据分析技术与业务场景联系起来&#xff0c;通过一系列思维方法、指标体系及工具模型来支持市场分析、产品优化、客户洞察&#xff0c;从…...

编程日记 2023/12/26 18:25:41

模式识别与机器学习-特征选择和提取

模式识别与机器学习-特征选择和提取 特征选择一些距离测度公式独立特征的选择准则一般特征的散布矩阵准则 离散K-L变换 谨以此博客作为复习期间的记录。 常见分类问题的流程&#xff0c;数据预处理和特征选择提取时机器学习环节中最重要的两个流程。这两个环节直接决定了最终性…...

编程日记 2023/12/26 18:24:40

嵌入式——RTC闹钟Alarm

开发流程 配置RTC时钟设置RTC闹钟配置RTC闹钟中断实现中断函数RTC闹钟初始化 // 闹钟外部中断 exti_flag_clear(EXTI_17); exti_init(EXTI_17,EXTI_INTERRUPT,EXTI_TRIG_RISING);// 重置闹钟 rtc_alarm_disable(RTC_ALARM0);rtc_alarm_struct ras; ras.alarm_mask = RTC_ALARM…...

编程日记 2023/12/26 18:22:38

【linux】线程控制

线程控制 1.创建线程2.线程终止3.线程等待4.线程分离5.对线程的简单封装 喜欢的点赞&#xff0c;收藏&#xff0c;关注一下把&#xff01; 进程概念上篇文章已经讲完了&#xff0c;下面我们就来说说线程控制。 我们使用的接口是pthread线程库&#xff0c;也叫做原生线程库给我…...

编程日记 2023/12/26 18:21:37

Swift学习笔记第三节：Set类型

1、代码 import Foundationvar set1: Set<Int> [1, 2, 3, 4, 3] print("定义1: \(set1)") var set2 Set(1...4) print("定义2: \(set2)") print("长度: \(set2.count)") print("是否为空: \(set2.isEmpty)") set1.insert(99)…...

编程日记 2023/12/26 18:19:35

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/9 2:42:51

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2026/1/25 10:41:07

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2026/1/26 4:52:47

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2026/1/24 4:39:04

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2026/1/31 6:50:52

阿里云Ubuntu 22.04 64位搭建Flask流程（亲测）

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

编程新知 2026/2/9 21:51:35

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

编程新知 2025/12/15 17:19:38