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

Vue背景介绍+声明式渲染+数据响应式

article 2026/2/17 15:26:17

一、Vue背景

1. 为什么学Vue

1.前后端开发就业必备技能
2.岗位多，绝⼤互联⽹公司都在使⽤Vue，还可以助⼒SpringBoot、C++等项⽬开发
3.提⾼开发效率
更少的时间,干更多的活,提高项目开发速度
原生JS做法

Vue做法

总而言之: 使用Vue能够赋能、提升就业竞争、做出更优质的项目

2. 什么是Vue

Vue 是一套 构建用户界面 的 渐进式 JavaScript 框架

Vue官网: https://cn.vuejs.org/

2.1 什么是构建用户界面

基于数据生成标签结构, 配合CSS样式, 可以渲染出好看的用户界面(UI)

2.2 什么是渐进式

循序渐进的学, 学多少用多少

局部改造: Vue 的部分功能

整站开发: Vue3 + VueRouter + Pinia + 工程化 + 模块化

2.3 什么是框架

框架: 一种规则, 学习 Vue 就是学习语法, 运用规则的阶段, 它是程序员必须遵守的规则/规范

3. Vue 的学习内容

数据渲染: 插值+指令+计算属性+监听器...

组件及组件化: 生命周期+组件+组件化(开发大型网站,可以分成一小块一小块进行局部开发)+组件通信+插槽...
路由: 配置+跳转+传参+嵌套+守卫...

状态管理: Pinia 不同的页面共享数据,而Pinia就可以管理共享的数据

ElementPlus: 核心组件 Form, Table, Dialog, Menu..

阶段实战: Vue3全家桶+ElementPlus.

4. 准备Vue代码编写环境

4.1 安装VSCode

直接去官网进行下载: Visual Studio Code - Code Editing. Redefined

4.2 必备插件

1. Vue-Offical

◦ 提供 Vue ⽂件的语法⾼亮

◦ ⽀持 Vue ⽂件的智能感知和⾃动完成

◦ 提供了 Vue ⽂件的格式化⼯具

2. Vue 3 Snippets

◦ 提供 Vue 3 相关的代码⽚段，⽅便快速输⼊常⻅代码结构

3. Path Intellisense

◦ 路径⾃动补全

4. Auto Import

◦ ⾃动导⼊插件，可帮助⾃动完成和⾃动导⼊模块

5. Auto Close Tag

◦ ⾃动闭合HTML标签

6. Auto Rename Tag

◦ ⾃动重命名HTML标签。

4.3 Vue代码写哪里?

传统开发模式：基于html⽂件开发Vue,类似jQuery的使⽤, <script src="vue.js"></script>

⼯程化开发⽅式: 在构建⼯具(Vite/Webpack 等)环境下开发Vue, 这是最推荐的、也是企业采⽤的⽅式

总结:

1. 传统开发⽅式，直接⽤script引⼊vue.js⽂件

2. 在⼯程化环境下，借助Vite对Vue代码进⾏打包

我们先用传统方式来上手, 后续再用工程化

二、声明式渲染

1. 编写第一个 Hello Word 程序

1> 引入Vue3的源代码(本地或者在线)

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2> 准备容器把Hello Word 渲染到div里面

<div id="app">
</div>

3> 创建应用并提供数据

<script>// 3. 创建 vue3 应用并提供数据// console.log(Vue) 可以查看Vue的方法Vue.createApp({//vue3的入口函数setup() {const msg = 'Hello World!'return {// msg: msg//简写msg}}}).mount('#app')//告诉程序是渲染到哪个div里面, 此时是把内容渲染到 id = app的 容器里面</script>

4> 渲染数据 {{ 数据名 }}

<div id="app">
<h1>{{ msg }}</h1>
</div>

具体的流程: 根据mount()指定数据放在哪个容器里面

完整代码:

<!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><!-- 1. 引入 vue3 源代码 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><!-- 2. 准备容器 --><div id="app"><!--4. 渲染数据  -->{{ msg }}</div><div id="another">{{ msg }}</div><script>// 3. 创建 vue3 应用并提供数据// console.log(Vue) 可以查看Vue的方法Vue.createApp({//vue3的入口函数setup() {const msg = 'Hello World!'return {// msg: msg//简写msg}}}).mount('#app')//告诉程序是渲染到哪个div里面, 此时是把内容渲染到 id = app的 容器里面</script>
</body></html>

2. setup函数

setup函数

1> vue3特有的, 也是 vue3 代码编写的入口/起点

2> 在标签中用到的数据或函数, 需要在 setup 函数中申明并返回

3> setup中的 this 不指向 Vue实例, 并且在setup中也不会用到this

3. 插值表达式

声明式渲染: 又叫胡子语法, 也叫做插值表达式

语法: {{ 表达式 }}

作用: 把表达式的结果展示/渲染到双标签中

表达式: 任何有结果的运算或者操作都属于表达式, js常见表达式:

1> 变量名/字面量

2> 对象.属性名

3> 三元运算/算数运算等

4> 函数/方法的调用

代码演示

<!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><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app"><!-- 调用数据 --><!-- 1. 变量名 --><h1>{{ msg }}</h1><!-- 2. 对象.属性 --><p>我叫{{ obj.name }},今年{{ obj.age }}</p><!-- 3. 三元表达式 --><p> {{ obj.age > 18 ? '已成年' : '未成年' }}</p><!-- 4. 算数运算 --><p>明年我就{{ obj.age +1 }}了</p><!-- 5. 函数的调用 --><p>fn返回值{{ fn() }}</p><!-- 6. 方法的调用 --><p>{{ msg }}由{{ msg.split(' ').length }}个单词组成</p></div><script>Vue.createApp({setup() {//定义变量const msg = "hehihei xiao"//定义对象const obj = {name: 'xiaobai',age: 13}//定义函数/方法const fn = () => {return 666}//把数据返回给容器return {msg,//返回变量obj,//返回对象fn//返回函数}}}).mount('#app')</script>
</body></html>

数据传递过程

三、数据响应式

1. 安装Vue开发者工具(调试用)

直接在这里下载: https://chrome.zzzmh.cn/index

然后在Vue的拓展里面打开开发者模式, 把crx文件直接拖进去,点击详情, 开启允许访问文件网站

最后运行我们的vue代码,然后打开开发者工具, 看见vue就说明成功

2. 什么是数据响应式

数据响应式: 数据变了, 视图就会跟着变

数据: 在setup里面的就是数据

视图: HTML标签就是视图

数据变了, DOM就会变

默认在setuo里面声明的数据不具备响应式特性, 如果要具备的话就要使用 reactive 和 ref 函数 => 实现数据响应式

3. 响应式函数 reactive

reactive函数

1> 作用: 让一个对象具备响应式特性.(不能是其他数据, 数字, 字符串...)

2> 注意: 参数只能是对象

3> 使用:

1. 从 Vue 中解构出 reactive 函数

2. 给 reactive 函数传入对象作为参数(ceactive 会将这个对象变为响应式对象)

3. 在调试工具中进行测试

具体代码

<!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><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app"><!-- 使用数据 --><p>我是{{ obj.name }},今年{{ obj.age }}了</p></div><script>const { createApp, reactive } = Vue//从Vue中解构出 createApp, reactiveconsole.log(Vue)createApp({setup() {//创建响应式对象//reactive的参数只能是对象const obj = reactive({name: '小白',age: 90})//返回响应式数据return {obj}}}).mount("#app")//一定要指定给的是哪个容器</script>
</body></html>

我们发现由reactive传过来的对象, 改变之后, 视图也会进行改变

4. 响应式函数ref

ref函数:

1. 作用: 用来定义一个响应式数据, 可以是基本类型(数字, 字符串, 布尔等), 也可以是引用类型(数组, 对象等), 这说明ref的适用面更广. 把数据变成响应式数据,这个数据可以是基本类型,也可以是引用类型.

2. 使用

1> 从 Vue 中解构出 ref 函数

2> 给 ref 函数传入指定的数据类型, ref 就可以把传入的数据变成响应式(什么数据都可以)

3. 注意: ref 声明的响应式数据, 在标签中使用无需 .value, 但是在 js 中操作的时候, 需要 .value

<!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><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app"><!-- 在标签中 ref 返回的数据,不需要用.value来把数据表示出来, 标签中自动.value了不需要 {{msg.value}} --><p>{{ msg }}</p><p>我是{{ obj.name }},今年{{ obj.age }}岁</p><button @click = "onClick">修改ref</button></div><script>//从Vue对象中解构出 createApp, ref 函数const { createApp, ref } = VuecreateApp({setup() {//ref 定义响应式字符串const msg = ref('Hello xiaobai')//ref 定义响应式对象const obj = ref({name: "xiao",age: 9})  // 在 js 中需要使用.value来拿到数据//点击事件const onClick = ()=>{// 修改 msgmsg.value = '你好,Vue3'//修改 obj 的 name 和 age 属性//obj.value 才是拿到的 ref 对象 obj.value.name = 'vue3'obj.value.age = 10}return {obj,msg,onClick}}}).mount("#app")</script>
</body></html>

5. reactive 和 ref 的选择

问题: 在定义响应式数据的时候, 使用 reactive 还是 ref?

分析:

1. reactive : 只能接收对象作为参数, 不能接收基本数据类型

2. ref: 既可以接收解基本数据类型, 也可以接收引用数据类型, 但是在用 js 进行操作的时候, 需要'.value'来进行取值

结论:

1. 如果要把一个对象变为响应式, 并且对象的属性是确定的, 那么推荐使用reactive(在js使用的时候便捷一些不需要.value

2. 除此之外, 推荐一律使用 ref (对象的属性不确定, 定义响应式数组, 定义基本类型的响应式数据)

总结

Vue背景介绍+声明式渲染+数据响应式

一、Vue背景 1. 为什么学Vue 1.前后端开发就业必备技能 2.岗位多，绝⼤互联⽹公司都在使⽤Vue，还可以助⼒SpringBoot、C等项⽬开发 3.提⾼开发效率更少的时间,干更多的活,提高项目开发速度原生JS做法 Vue做法总而言之: 使用Vue能够赋能、提升就业竞争…...

编程日记 2026/2/13 13:42:55

HarmonyOS NEXT 鸿蒙中手写和使用第三方仓库封装Logger打印工具

应用场景在鸿蒙开发中，我们在很多时候调试代码都需要用到日志打印工具，但无论是hilog还是console.log,都用起来相对麻烦，而且需要手动将对象转换为JSON字符串的方式才能打印，并且在控制台日志中输出的格式也非常丑。所以下面我们…...

编程日记 2026/2/16 12:04:24

如何使用 CSS 的backdrop - filter属性实现背景模糊等特效，有哪些兼容性问题？

大白话如何使用 CSS 的backdrop - filter属性实现背景模糊等特效，有哪些兼容性问题？ 嘿，朋友！今天咱们来聊聊 CSS 里超酷的 backdrop-filter 属性，它能让你轻松实现背景模糊等超炫特效。咱们先看看这属性到底是啥&…...

编程日记 2026/1/25 18:23:19

批量合并 PDF 文档，支持合并成单个文档，也支持按文件夹合并 PDF 文档

在日常工作中，合并多个 PDF 文档为一个文件是非常常见的需求。通过合并 PDF，不仅能够更方便地进行管理，还能在特定场景下（如批量打印）提高效率。那么，当我们需要批量合并多个 PDF 文件时，是否有…...

编程日记 2026/2/12 18:33:09

rbpf虚拟机-汇编和反汇编器

文章目录一、概述二、主要功能三、关键函数解析3.1 汇编器3.1.1 parse -转换为Instruction列表3.1.2 assemble_internal-转换为Insn 3.2 反汇编器3.2.1 to_insn_vec-转换为机器指令四、总结 Welcome to Code Blocks blog 本篇文章主要介绍了 [rbpf虚拟机-汇编和反汇编器] ❤…...

编程日记 2026/2/11 13:44:40

虚拟现实---＞unity学习

前言：这学期劳动课选了虚拟现实，其中老师算挺认真的，当然对一些不感兴趣的同学来说是一种折磨，我对这个unity的学习以及后续的虚幻引擎刚开始连基础的概念都没有，后面渐渐也是滋生了一些兴趣，用这篇博客记录…...

编程日记 2026/2/14 18:22:28

一文详解QT环境搭建：ubuntu20.4安装配置Qt5

随着软件开发技术的不断进步，跨平台应用程序的需求日益增长，开发者们面临着如何在不同操作系统之间保持代码的一致性和效率的问题。Qt作为一个成熟的跨平台C框架，在这方面提供了卓越的支持，不仅简化了GUI应用程序的创建过程&#…...

编程日记 2026/2/14 1:50:59

Gateway实战(三)、断言-时间、Cookie信息

spring cloud-Gateway实战三、断言断言一）、时间断言相关1、适用场景2、Demo案例二）、断言- Cookie信息1、用户身份验证与会话管理场景及Demo案例2、A/B测试及Demo案例断言简单了解：断言是一种在程序设计中用于检查程序状态或条件的机制，在gateway网关里，断言的作用是…...

编程日记 2026/2/12 18:11:28

PyTorch中的Tensor

PyTorch中的Tensor‌ 是核心数据结构，类似于 NumPy 的多维数组，但具备 GPU 加速和自动求导等深度学习特性。一、基本概念 ‌核心数据结构‌ Tensor 是存储和操作数据的基础单元，支持标量（0D）、向量（1D&am…...

编程日记 2025/12/23 2:41:46

C++11大数加减

C11大数加减 // 20190412.cpp : 此文件包含 "main" 函数。程序执行将在此处开始并结束。 //#include "pch.h" #include <iostream> #include <algorithm> // sort find find_if #include <string> #include <vector> using names…...

编程日记 2026/2/14 1:47:31

OpenGL —— 基于Qt的视频播放器 - ffmpeg硬解码，QOpenGL渲染yuv420p或nv12视频（附源码）

🔔 OpenGL 相关技术、疑难杂症文章合集（掌握后可自封大侠 ⓿_⓿）（记得收藏，持续更新中…）运行效果...

编程日记 2026/2/15 13:29:39

【IDEA的个性化配置】

目录： 一：隐藏项目路径二：禁用斜体注释三：重新Maven构建未完待续... 一：隐藏项目路径 😊在IDEA左侧的Project目录中，项目名称后面显示了项目的文件路径地址，如果不喜欢可以隐藏&…...

编程日记 2026/2/13 20:46:39

Vue 类与样式

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易…...

编程日记 2026/2/14 7:34:50

【Kafka】分布式消息队列的核心奥秘

文章目录一、Kafka 的基石概念主题（Topic）分区（Partition）生产者（Producer）消费者（Consumer） 二、Kafka 的架构探秘Broker 集群副本机制三、Kafka 的卓越特性高…...

编程日记 2026/2/17 8:48:40

自动化发布工具CI/CD实践Jenkins部署与配置教程

1. 前言背景其实一直想把jenkins 的笔记整理下，介于公司这次升级jenkins2.0 ，根据自己部署的一些经验，我把它整理成笔记。之前我们的jenkins1.0 时代还一直停留在 free style 或者 maven 风格的项目，随着项目的日益增多&#x…...

编程日记 2026/2/13 6:56:04

python中的demjson包介绍

demjson是Python中的一个第三方模块库，专门用于编码和解码JSON数据。以下是关于demjson包的详细介绍： 一、主要功能编码与解码： demjson提供了将Python对象（如字典、列表等）编码成JSON字符串的功能。同时&#xff0c…...

编程日记 2026/2/13 13:54:35

什么是SQL作业

SQL作业是在数据库服务器上按特定时间或间隔自动执行的计划任务或流程，这些作业由Microsoft SQL Server中的SQL Server代理管理，对于自动执行日常任务（如数据库系统中的备份、数据导入和报告生成）以及确保及时准确地处理和更新数据…...

编程日记 2026/2/14 14:55:40

Android实践开发制作小猴子摘桃小游戏

Android实践制作小猴子摘桃小游戏实践素材项目源文件获取：Android可能存在版本差异项目如果不能正确运行，可以使用里面的素材自己构建项目Android实践制作小猴子摘桃小游戏Android实践制作小猴子摘桃小游戏https://mp.weixin.qq.com/s/jNU_hVfj9xklsil…...

编程日记 2026/2/17 7:50:43

springboot整合couchbase 1、Couchbase1.1、介绍1.2、Bucket1.3、Couchbase SDK 2、(key,value)写入couchbase集群2.1、总体图2.2、依赖2.3、CouchbaseConfig 配置文件2.4、代码使用 1、Couchbase 1.1、介绍 1.2、Bucket 在 Couchbase 中，bucket 是一个重要的概念…...

编程日记 2026/2/10 8:25:53

VsCode启用右括号自动跳过(自动重写) - 自录制gif演示

VsCode启用右括号自动跳过(自动重写) - 自录制gif演示前言不知道大家在编程时候的按键习惯是怎样的。输入完左括号后编辑器一般会自动补全右括号，输入完左括号的内容后，是按→跳过右括号还是按)跳过右括号呢？ for (int i 0; i < a.s…...

编程日记 2026/2/15 4:57:24

[Linux]在vim中批量注释与批量取消注释

1.在vim中批量注释的步骤： 1.在normal模式下按Ctrl v ，进入V-BLOCK模式 2.按 J 键或 K 键选择要注释的内容，J向上K向下我们给第5，6，7行进行注释 3.按住shift i进入插入模式，输入 // 4.点击ESC键&…...

编程日记 2026/2/12 2:35:27

NC,GFS、ICON 数据气象信息可视化--降雨量的实现

随着气象数据的快速发展和应用，气象信息的可视化成为了一项不可或缺的技术手段。它不仅能帮助气象专家快速解读数据，还能为公众提供直观的天气预报信息。今天，我们将从降雨量的可视化出发，带大家一起了解如何实现气象数据的可视化…...

编程日记 2026/2/12 19:42:41

LLM之RAG实战（五十二）| 如何使用混合搜索优化RAG 检索

在RAG项目中，大模型生成的参考内容（专业术语称为块）来自前一步的检索，检索的内容在很大程度上直接决定了生成的效果，因此检索对于RAG项目至关重要，最常用的检索方法是关键字搜索和语义搜索。本文将分别介绍…...

编程日记 2026/2/12 13:20:20

探索Scala基础：融合函数式与面向对象编程的强大语言

Scala作为一门在现代编程领域备受瞩目的编程语言，融合了函数式编程和面向对象编程的特性，运行于Java虚拟机（JVM）之上，与Java有着良好的互操作性。它简洁、高效且表达力强，适用于各种规模和类型的软件开发项…...

编程日记 2026/2/12 3:18:14

Selenium文件上传

在 Web 自动化测试中，文件上传是一项常见的任务。不同的网站和前端技术可能导致上传方式有所不同，因此需要采用不同的方法进行处理。方法 1：使用 send_keys() 直接上传（最常用）适用场景：页面中有标准的 <input type="file"> 标签。不需要弹出 Wind…...

编程日记 2026/2/16 17:57:53

Java多线程与高并发专题——Condition 和 wait/notify的关系

引入上一篇关于Condition，我们对Condition有了进一步了解，在之前生产/消费者模式一文，我们讲过如何用 Condition 和 wait/notify 来实现生产者/消费者模式，其中的精髓就在于用Condition 和 wait/notify 来实现简易版阻塞队列&am…...

编程日记 2026/2/12 6:58:09

mysql-分区和性能

mysql自身只支持表的横向分区。常听到开发人员说“”对表做个分区“，然后数据的查询就会快了。这是真的吗？实际上可能跟根本感觉不到查询速度的提升，甚至会发现查询速度急剧下降。因此，在合理使用分区之前，必须了解分…...

编程日记 2026/2/14 16:56:01

使用matlab进行分位数回归

对于使用MATLAB、R语言或者STATA执行带有虚拟变量的分位数回归，这三个工具都带有强大的分析功能。在核心观点上，首先需要理解分位数回归的基本原理、其次要掌握如何在各个统计软件中实现该分析、最后，需要熟悉虚拟变量在模型中的应用并合理加…...

编程日记 2026/2/12 21:34:26

[操作系统，学习记录]3.进程（2）

1.fork(); 玩法一：通过返回值if，else去执行不同的代码片段玩法二：if，else然后调用execve函数去执行新的程序 2.进程终止： 退出码，子进程通过exit/return返回，父进程wait/waitpid等待而得&am…...

编程日记 2026/2/12 20:17:42

26考研——排序_选择排序_选择排序的基本思想简单选择排序（8）

408答疑文章目录四、选择排序选择排序的基本思想简单选择排序定义算法思想性能分析空间效率时间效率稳定性适用性九、参考资料鲍鱼科技课件26王道考研书四、选择排序选择排序的基本思想每一趟（如第 i i i 趟）在剩下 n − i 1 n-i1 n−i1&…...

编程日记 2026/2/13 20:40:40