【Vue3】01-vue3的基础 + ref reactive
首先确保已经有了ES6的基础
本文介绍 vue 的基础使用以及 两种响应数据的方式。
目录
1. 创建一个vue应用程序
2. Vue模块化开发
3. ref 和 reactive 的区别
1. 创建一个vue应用程序
所需的两个文件：
https://unpkg.com/vue@3/dist/vue.global.js
https://unpkg.com/vue@3/dist/vue.esm-browser.js
打开对应网页后右键另存为保存到桌面上
创建一个vue文件夹，文件夹内再创建一个demo文件夹
将 “vue.global.js” 文件复制进demo文件夹，并将此文件夹在vscode中打开
打开后，在demo文件夹中再创建一个demo.html
在head标签内创建一个script标签 src="vue.global.js"
效果如图：
现在开始创建 一个vue应用程序
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head>
<body><!-- 创建一个id为app的div元素 --><div id="app">{{ msg }} <!-- 7.{{ }} 插值表达式：可以将vue中定义的数据进行渲染 --><!-- 8.获取到return的msg --><!-- 10.获取新的复杂数据 --><h2>{{ web.title }}</h2><h2>{{ web.url }}</h2></div><script>// 11.如果想要去掉 createApp和reactive前的Vue 可以利用解构,效果不变// const {createApp,reactive} = Vue// 1.开始创建一个vue应用程序// 2.Vue.createApp({ })Vue.createApp({// 3.setup选项 设置响应的数据和响应方法setup(){// 9.msg是简单的数据，复杂的可以使用reactive({})const web = Vue.reactive({// 自己定义属性和属性值title:'zzz',url:'baidu.com'})// 4.设置一个return语句返回数据return {msg:'success',// 返回定义的复杂的数据web}}}).mount("#app") // 5.将vue应用程序挂载到app上// 6.#app如何获取到return的msg值 回到div内</script>
</body>
</html>
2. Vue模块化开发
首先将在第一步保存在桌面的 vue.esm-browser.js 复制到 demo 文件夹中
回到刚刚的代码中删除第一个创建的script标签
并在 body 里的 script 标签添加 type = "module" 属性
并进行解构方式的修改
将传统开发方式修改为模块化开发方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">{{ msg }} <h2>{{ web.title }}</h2><h2>{{ web.url }}</h2></div><script type="module">// 修改为模块化开发方式import {createApp,reactive} from './vue.esm-browser.js'createApp({setup(){const web = reactive({title:'zzz',url:'baidu.com'})return {msg:'success',web}}}).mount("#app")</script>
</body>
</html>注意这里要使用 live server 打开后才能看到信息
和前面介绍的传统方式的效果一样
3. ref 和 reactive 的区别
前面介绍的 reactive 创建了响应式对象 web
它是用于存储复杂数据类型的数据 如对象和数据
ref 是用于存储单个基本类型的数据 如数字、字符串等
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">{{ msg }} <h2>{{ web.title }}</h2><h2>{{ web.url }}</h2><!-- 4.显示number --><h3>{{ number }}</h3></div><script type="module">// 1.导入 ref import {createApp,reactive,ref} from './vue.esm-browser.js'createApp({setup(){// 2.定义常量number 用ref 引用类型const number = ref(10);// 5.如果想要修改number值number.value = 20;const web = reactive({title:'zzz',url:'baidu.com'})// 6.但如果想要修改reactive里的内容，可以直接修改 不用 .valueweb.url = 'www.baidu.com';return {msg:'success',web,// 3.返回numbernumber}}}).mount("#app")</script>
</body>
</html>前面说 ref 只能存储单个的数字 字符串，但实际上也能存储数组
<body><div id="app">{{ msg }} <h2>{{ web.title }}</h2><h2>{{ web.url }}</h2><!-- 4.显示number --><h3>{{ number }}</h3><!-- 8.num1 --><h3>{{ num1 }}</h3></div><script type="module">// 1.导入 ref import {createApp,reactive,ref} from './vue.esm-browser.js'createApp({setup(){// 2.定义常量number 用ref 引用类型const number = ref(10);// 7.ref定义数组const num1 = ref([1,2,3]);// 5.如果想要修改number值number.value = 20;const web = reactive({title:'zzz',url:'baidu.com'})// 6.但如果想要修改reactive里的内容，可以直接修改 不用 .valueweb.url = 'www.baidu.com';return {msg:'success',web,// 3.返回numbernumber,num1}}}).mount("#app")</script>
</body>
本文介绍 vue 的基础使用以及 两种响应数据的方式。
相关文章：
【Vue3】01-vue3的基础 + ref reactive
首先确保已经有了ES6的基础 本文介绍 vue 的基础使用以及 两种响应数据的方式。 目录 1. 创建一个vue应用程序 2. Vue模块化开发 3. ref 和 reactive 的区别 1. 创建一个vue应用程序 所需的两个文件： https://unpkg.com/vue3/dist/vue.global.js https://un…...
C++实现rabbitmq生产者消费者
RabbitMQ是一个开源的消息队列系统，它实现了高级消息队列协议（AMQP）， 特点 可靠性：通过持久化、镜像队列等机制保证消息不丢失，确保消息可靠传递。灵活的路由：提供多种路由方式，如…...
Simple-BEV的bilinear_sample 作为view_transformer的解析，核心是3D-2D关联点生成
文件路径models/view_transformers 父类 是class BiLinearSample(nn.Module)基于https://github.com/aharley/simple_bev。 函数解析 函数bev_coord_to_feature_coord的功能 将鸟瞰图3D坐标通过多相机（针孔/鱼眼）内外参投影到图像特征平面࿰…...
)
Rust嵌入式开发环境搭建指南(基于Stm32+Vscode)
Rust嵌入式开发环境搭建指南(基于Stm32+Vscode) 部分目录如下所示： 目录 简介Rust开发环境安装STM32开发工具链安装VSCode环境配置VSCode插件安装调试器配置项目创建与配置常见问题与解决方案简介 本文档旨在指导开发者如何搭建基于Rust语言的STM32嵌入式开发环境。相比传…...
springboot操作redis集群，注意事项
整合redis可查看博文 springboot 整合redis_springboot整合redis csdn-CSDN博客 集群中操作注意事项 1 多键操作失败： 当使用multiGet等需要同时访问多个键的方法时，如果没有使用Hash Tags，这些键可能会被分配到不同的槽中。如果这些槽位于…...
)
计算机技术系列博客——目录页(持续更新)
1.1 博客目录专栏 1.1.1 博客文章导航 计算机技术系列博客——目录页 1.1.2 网页资源整理 2.1 计算机科学理论 2.2 软件工程技术 2.2.1.1 编程语言 Java Java语言基础 (1) Java基础知识总结01——Java基础篇 (2) Java基础知识总结02——集合框架篇 (3) Java基础知识总结03—…...
@maptalks/gl-layers中的VectorTileLayer的setStyle属性的全部line配置
maptalks/gl-layers中的VectorTileLayer的setStyle属性的全部line配置 关于 maptalks/gl-layers 中 VectorTileLayer 的 setStyle 方法 在 maptalks/gl-layers 库中，VectorTileLayer 提供了一个灵活的方式来设置矢量瓦片图层的样式。通过调用 setStyle 方法…...
sql小记，20250319
ps:基于sqlserver 一、绩效管理系统表设计 1.表设计 Users用户表：包含id，用户名，密码。 AppraisalBases评价(职位基数)表：包含职位id，职位年终奖基数 AppraisalCoeffcients评价系数表：包含类别id, 类别&…...
【亚马逊云科技】大模型选型实战（挑选和测评对比最适合业务的大模型）
文章目录 前言1、实验内容2、手册内容 一、环境准备二、Prompt 实战与模型配置2.1 基于 Amazon Bedrock 对比测试不同模型的逻辑推理效果2.2 基于 Amazon Bedrock 对比测试不同模型知识问答能力2.3 Prompt 实战结果分析 三、基于 Amazon Bedrock Evaluations 进行模型评测与自动…...
Linux 用户与组管理实战：经验分享与最佳实践
在 Linux 系统管理中，用户和组的管理是保障系统安全和资源分配的重要环节。本文将深入介绍如何创建和管理用户与组，包括 UID、GID 的设置，主组与附加组的分配，以及常见问题的排查和解决。本文还结合实际操作经验，总结了…...
详解如何通过Python的BeautifulSoup爬虫+NLP标签提取+Dijkstra规划路径和KMeans聚类分析帮助用户规划旅行路线
系统模块： 数据采集模块（爬虫）：负责从目标网站抓取地点数据（如名称、经纬度、描述等） 数据预处理模块（标签算法）：对抓取到的地点数据进行清洗和分类。根据地点特征&…...
Java Stream两种list判断字符串是否存在方案
这里写自定义目录标题 背景初始化方法一、filter过滤方法二、anyMatch匹配 背景 在项目开发中，经常遇到筛选list中是否包含某个子字符串，有多种方式，本篇主要介绍stream流的filter和anyMatch两种方案，记录下来，方便备…...
C语言-指针变量和变量指针
指针 预备知识 内存地址 字节：字节是内存的容量单位，英文名Byte，1Byte8bits 地址：系统为了便于区分每一个字节面对它们的逐一进行编号（编号是唯一的），称为内存地址，简称地址。int…...
CMS漏洞-WordPress篇
一.姿势一：后台修改模板拿WebShell 1.使用以下命令开启docker cd /www/wwwroot / vulhub / wordpress / pwnscriptum docker - compose up - d 如果发现不能开启，可以检查版本和端口 2.访问网址登录成功后 外观 👉编辑 👉404.…...
初识Brainstorm（matlab）
Brainstorm是一款开源应用程序，专门用于分析脑部记录数据：MEG、EEG、fNIRS、ECoG、深部电极等。该应用程序免费，而且不需要Matlab许可证。Brainstorm主要优势是简单直观的图形界面，不需要任何编程知识。具体内容，可查看…...
2025年智能系统、自动化与控制国际学术会议（ISAC 2025）
重要信息 2025 International Conference on Intelligent Systems, Automation and Control 2025年3月28-30日 | 中国西安理工大学 | 会议官网： www.icisac.org 简介 在国家大力推动高质量发展与创新驱动战略的背景下，智能制造与自动化控制行业正迎…...
GGUF、Transformer、AWQ 详解与关系梳理
GGUF、Transformer、AWQ 详解与关系梳理 一、核心概念解析 Transformer 定义 ：2017 年 Google 提出的基于自注意力机制的神经网络架构，是大语言模型的通用基础架构。功能 ：用于文本生成、翻译、问答等任务，如 BERT、GPT 系列、…...
学习笔记|arduino uno r3|DS1307时钟芯片|Atmega328P| 设置时间|读取时间|无源晶振：DS1307时钟芯片实验
目录 芯片pinout： 实验器件： 实验连线 解决AVR 架构不支持 printf() 方法 使用GetTimeAndDate.ino设置时间： 使用SetTimeAndDate.ino设置时间： 芯片pinout： DS1307 是美国 DALLAS 公司推出的 I 总线接口实时时钟芯…...
Linux--进程创建
进程创建 写时拷贝（时间换空间） 更新页表项权限为只读----子进程写入----触发系统错误系统缺页中断，系统开始检测，系统判断写入区域是数据区还是代码区，如果是代码区就终结进程，如果是数据区就进行写时拷贝…...
MySQL 创建用户，建库，建表
以下是在 MySQL 中创建用户、数据库、表的详细操作步骤： 一、登录 MySQL -- 使用 root 用户登录（需替换为实际密码） mysql -u root -p输入密码后回车，进入 MySQL 命令行界面。 二、创建数据库 -- 创建名为 test_db 的数据库&a…...
成都国际数字影像产业园，文创产业运营新典范深度解析
成都国际数字影像产业园位于成都市蓉北商圈金牛片区福堤路99号，是金牛区政府与树莓集团携手打造的省级“文化科技”融合示范园区。该产业园已成为西南地区乃至全国数字影像产业的一颗璀璨明珠，其成功运营模式堪称文创产业运营的新典范。 产业定位与资源…...
33、如果 std::vector 的元素是指针，需要注意什么？
对 std::vector 元素为指针的情况，需要注意以下几点： 内存管理： 如果 std::vector 存储的是原始指针，那么仅仅清空 vector 或者让 vector 被销毁，并不会释放指针所指向的内存。因此，需要确保在 vector 被销…...
)
Docker 速通(总结)
Docker 命令 镜像 docker build: 从 Dockerfile 构建镜像。docker pull: 从 Docker Hub 或其他注册表拉取镜像。docker push: 将镜像推送到 Docker Hub 或其他注册表。docker images: 列出本地镜像。docker rmi: 删除本地镜像。 容器 docker run: 创建并启动一个新的容器。…...
算法训练篇06--力扣611.有效三角形的个数
目录 1.题目链接：611.有效三角形的个数 2.题目描述： 3.解法一：(暴力解法)(会超时)： 4.解法二(排序双指针) 1.题目链接：611.有效三角形的个数 2.题目描述： 给定一个包含非负整数的数组 nums …...
Gin框架学习
一.介绍 Gin是一个用Go语言编写的web框架。它是一个类似于martini但拥有更好性能的API框架, 由于使用了httprouter，速度提高了近40倍。 如果你是性能和高效的追求者, 你会爱上Gin。 下载 go get -u github.com/gin-gonic/gin 二.Gin示例 学习的时候，写在…...
青少年编程与数学 02-011 MySQL数据库应用 07课题、表的操作
青少年编程与数学 02-011 MySQL数据库应用 07课题、表的操作 一、数据库表（Table）二、创建表语法格式示例注意事项 三、字段的命名规则基本规则命名规范建议示例 四、字段数据类型数值类型字符串类型日期和时间类型其他类型 五、选择合适的数据类型1. **…...
【详细解决】pycharm 终端出现报错：“Failed : 无法将“Failed”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
昨天在终端一顿操作后突然打开pycharm时就开始报错： 无法将“Failed”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。 所在位置 行:1 字符: 1 Failed to act…...
AcWing 839：模拟堆 ← multiset + unordered_map
【题目来源】 https://www.acwing.com/problem/content/841/ 【题目描述】 维护一个集合，初始时集合为空，支持如下几种操作： 1. I x，插入一个数 x； 2. PM，输出当前集合中的最小值； 3. DM&#…...
cmake教程
CMake 是一个跨平台的自动化构建系统，广泛用于管理软件构建过程。它使用 CMakeLists.txt 文件来配置项目的构建过程，并生成适用于不同编译器和操作系统的构建文件（如 Makefile、Visual Studio 项目文件等）。以下是一个简单的 CMak…...
小蓝的括号串1（栈，蓝桥云课）
问题描述 小蓝有一个长度为 nn 的括号串，括号串仅由字符 ( 、 ) 构成，请你帮他判断一下该括号串是否合法，合法请输出 Yes ，反之输出 No 。 合法括号序列： 空串是合法括号序列。 若 ss 是合法括号序列，则 (…...
软考系统架构设计师考试学习和考试的知识点大纲，覆盖所有考试考点
以下是软考系统架构设计师考试的知识点大纲，覆盖所有官方考点，分为基础知识、核心技术、系统设计、案例分析、论文写作五大模块，帮助系统性学习和备考： 一、基础知识模块 计算机组成与体系结构 计算机硬件组成（CPU、内…...
车载以太网网络测试-18【传输层-DOIP协议-1】
目录 1 摘要2 DOIP协议的概述2.1 DOIP协议背景2.2 ISO 13400概述 3 DOIP报文的帧结构以及实例3.1 DOIP报文帧结构3.2 实例示例 总结 1 摘要 在汽车网络通信中，诊断扮演了非常重要的角色，无论是故障诊断、整车下线配置，还是ECU的软件更新、远…...
密码学（Public-Key Cryptography and Discrete Logarithms）
Public-Key Cryptography and Discrete Logarithms Discrete Logarithm 核心概念：离散对数是密码学中一个重要的数学问题，特别是在有限域和循环群中。它基于指数运算在某些群中是单向函数这一特性。也就是说，给定一个群 G G G和一个生成元 …...
自然语言处理｜深入解析 PEGASUS：从原理到实践
一、引言 在信息爆炸的时代，互联网上的文本数据以极快的速度增长。无论是新闻资讯、学术论文、社交媒体动态，还是各类报告文档，我们每天接触到的文字信息量巨大。如何快速、准确地提取关键内容成为一项重要任务。文本摘要技术通过将长篇文本…...
矩阵指数的定义和基本性质
1. 矩阵指数的定义 矩阵指数 e A t e^{\boldsymbol{A}t} eAt 定义为幂级数的形式： e A t ∑ k 0 ∞ ( A t ) k k ! e^{\boldsymbol{A}t} \sum_{k0}^\infty \frac{(\boldsymbol{A}t)^k}{k!} eAtk0∑∞k!(At)k 当 A \boldsymbol{A} A 为 n n n \times n …...
react 技术栈请问该如何优化 DOM 大小
针对 React 应用中 DOM 大小过大 的问题，以下是详细的优化方案和具体操作步骤，帮助你提升 Lighthouse 性能评分和用户体验： 一、问题根源分析 DOM 大小过大（如超过 1500 个节点或深度超过 32 层）会导致： …...
redis，tar.gz安装后，接入systemctl报错解决
1. WARNING Memory overcommit must be enabled! 这种报错，有两种解决方法 1.1 修改系统参数 编辑 /etc/sysctl.conf 文件，设置 overcommit_memory 为 1 vm.overcommit_memory 11.2 修改redis的最大使用内存 修改配置文件 redis.conf maxmemory 1g…...
YOLOv5部署全场景问题解决方案手册（2025版）
YOLOv5部署全场景问题解决方案手册（2025版） 文章目录 YOLOv5部署全场景问题解决方案手册（2025版）[TOC]一、环境配置问题1.1 CUDA与PyTorch版本冲突1.2 依赖库缺失问题 二、模型转换问题2.1 ONNX导出失败2.2 TensorRT转换问题 三、…...
Canal 解析与 Spring Boot 整合实战
一、Canal 简介 1.1 Canal 是什么？ Canal 是阿里巴巴开源的一款基于 MySQL 数据库增量日志解析（Binlog）中间件，它模拟 MySQL 的从机（Slave）行为，监听 MySQL 主机的二进制日志（Binl…...
AI第一天 自我理解笔记--微调大模型
目录 1. 确定目标：明确任务和数据 2. 选择预训练模型 3. 数据预处理 (1) 数据清洗与格式化 (2) 划分数据集 (4) 数据加载与批处理 4. 构建微调模型架构 (1) 加载预训练模型 (2) 修改模型尾部（适配任务） (3) 冻结部分层（…...
SpringBoot日志
目录 一、日志的用途 二、日志的使用 1.打印日志 2.在程序中得到日志对象 3.使用日志对象打印日志 4.日志格式说明 5.日志框架的了解 门面模式（外观模式） 6.日志级别 7.日志配置 配置日志级别 日志持久化 配置日志文件分割 配置日志格式 三、…...
Redis数据结构详解--列表
Redis 列表是简单的字符串列表，按照插入顺序排序，常用命令： LPUSH key value1 [value2...] 在列表头部插入一个或多个值RPUSH key value1 [value2...] 在列表尾部插入一个或多个值LPOP key 移除并获取列表头部第一个元素RPOP key 移除并获取…...
[项目]基于FreeRTOS的STM32四轴飞行器: 六.2.4g通信
基于FreeRTOS的STM32四轴飞行器: 六.2.4g通信 一.Si24Ri原理图二.Si24R1芯片手册解读三.驱动函数讲解五.移植2.4g通讯（飞控部分）六.移植2.4g通讯（遥控部分）七.通讯模块的完成（遥控部分）七.通讯模块的完成&a…...
ElasticSearch 7.x 集群 + Kibana 部署完全指南（5节点）
ElasticSearch 7.x 集群 Kibana 部署完全指南（5节点） 一、基础环境准备 1. 系统要求 CentOS 7/Ubuntu 18.04JDK 11（Elasticsearch 7自带JDK）内存：建议每个节点≥8GB磁盘：≥50GB（根据数据量调…...
前端项目中应该如何选择正确的图片格式
在前端项目中选择正确的图片格式是优化页面性能、提升用户体验的关键步骤之一。以下是常见图片格式的特点、适用场景及选择建议，帮助你在不同场景下做出最优决策： 一、常见图片格式对比 格式特点适用场景不适用场景JPEG- 有损压缩，文件小- 不…...
Python实现WYY音乐下载
一、需求背景 WYY音乐作为国内主流音乐平台，其歌曲资源丰富但下载接口存在多重加密保护。本文将通过Python结合JS逆向技术，解析其核心加密逻辑，实现免费歌曲的下载功能。 二、技术难点分析 1. 接口加密机制 通过抓包分析可知，网易云核心接口使用两次加密： 第一次：获取…...
药房链路轨道“空间拓扑优化+动态算法决策+多级容错控制”三重链式编程技术解析与应用
总论 随着智能医疗技术的快速发展，药房自动化系统已成为现代医院运营的核心基础设施。本文以“空间拓扑优化动态算法决策多级容错控制”三重链式编程技术为核心研究对象，探讨其如何通过跨学科技术融合实现药房链路轨道系统的精准化、高效化与可靠化运行…...
笔记本运行边缘计算
笔记本电脑可以用来运行PCDN（Peer-to-Peer Content Delivery Network）服务。实际上，如果你有闲置的笔记本电脑，并且它具备一定的硬件条件和网络环境，那么它可以成为一个不错的PCDN节点。 运行PCDN的基本要求 硬件需求…...
IMX8MP Android 10系统编译SDK
概述： 本文描述了在Ubuntu 20.04操作系统上搭建IMX8MP Android10系统编译环境。 ubuntu主机端设置 1. ubuntu 20.04 1. 450G Free Disk space 2. 16GB RAM以上 3. 安装 sudo apt-get install uuid uuid-dev zlib1g-dev liblz-dev liblzo2-2 liblzo2-dev lzop …...
项目实战：基于瑞萨RA6M5构建多节点OTA升级-创建系统最小框架＜三＞
MCUBoot项目创建完成后，接下来我们需要搭建多节点OTA系统最小框架，再将系统分模块搭建逐层完善，直到实现最终完整系统。开始动手干吧！ 目录 一、创建项目 二、配置FSP 2.1 配置RS485属性 2.2 配置定时器0 2.3 创建初始化进程并配置属性 2.4 创建RS485进程并…...