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

【后端速成 Vue】第一个 Vue 程序

news 2026/3/27 4:09:55

1、为什么要学习 Vue？

为什么使用 Vue? 回想之前，前后端交互的时候，前端收到后端响应的数据，接着将数据渲染到页面上，之前使用的是 JavaScript 或者 基于 JavaScript 的 Jquery，但是这两个用起来还是不太方便，而使用 Vue 往 html 页面中填充数据，是非常方便的，至于方便在哪里，随着往后的学习，会越发明显。

简单了解 Vue 两个特性：

1. 数据驱动视图

数据的变化会 驱动 视图自动更新，这样一来，程序员只需要把数据维护好，至于页面的结构则会自动被 Vue 渲染出来。 

理解页面依赖的数据，通常页面依赖的数据是从后端查数据库来的，这里的页面依赖数据也是从后端来的，可能这个数据被放到一个 js 对象中，当这个 js 对象发生改变了，vue 就会监听到数据变化，也就会把新的数据渲染到页面上。

2. 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源。

这里页面依赖的数据和上面所讲述的相同，双向数据绑定有什么好处呢？当用户填的表单数据发生变化，Vue 就会自动同步到 js 中，此时程序员就不用去操作 DOM 树来获取表单元素的最新值了。

有了上面的认识，现在来了解，Vue 是什么？对于后端程序员来说，学习 Vue 需要学习到哪个阶段？

Vue 是一个用于构建用户界面的渐进式框架

在 Vue 中，你基本不会看到去操作 DOM 树，只需要管理好数据即可，对于后端程序员，你只需要能使用 Vue 写出几个 demo 就可以了。

现在就来开始写下第一段 Vue 代码吧！

2、第一个 Vue 程序

1. 创建 Vue 实例，初始化渲染：

准备容器，Vue 所管理的范围：

<div id="app"><!-- 编写需要渲染的代码逻辑,  --><!-- 创建需要渲染数据的变量 -->{{ msg }}
</div>

2. 引入 Vue 包(去官网复制cdn时注意选择开发版本/生产版本)：

开发版本：包含了完整的警告和调试模式(学习推荐)

生产版本：删除了警告，占用空间更小了

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

当我们引入了这个 VueJS 包，在全局环境，就有了 Vue 构造函数了。

3. 创建 Vue 实例：

const app = new Vue({el: '#app',data: {msg: 'Hello Vue!'}
})

new Vue()，创建 Vue 实例，通过里面的 el 配置选择器，指定 Vue 管理的是哪个容器，通过 data 给该容器中的指定变量提供数据。

完整代码如下：

<!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 }}</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>const app = new Vue({el: '#app',data: {msg: 'Hello Vue!'}})
</script>
</html>

渲染结果：

如果此时 #app 这个容器中还想添加一个 h1 标签，里面写上程序猿教你打篮球呢？此时相信肯定难不倒各位，直接举一反三即可：

<!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 }}<h1>{{ blogname }}</h1></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>const app = new Vue({el: '#app',data: {msg: 'Hello Vue!',blogname: '程序员教你打篮球'}})
</script>
</html>

3、插值表达式

插值表达式是 Vue 的模板语法，也就是上述代码中的 {{ }} 

重点：利用表达式进行插值，渲染到页面中

那既然这个是表达式，是不是也就意味着可以被求值？是的，于是后面可能会见到这样的代码：

<p>{{ age >= 18 ? '成年啦!' : "小屁孩!" }}</p>
<p>{{ person.name }}</p>
<p>{{ name.toUpperCase() }}</p>

使用插值表达式注意点：

● 使用的数据必须存在(在 Vue 构造方法配置项 data 中声明)

● 支持的是表达式，并非语句，不支持 if for 等

● 不能在标签属性中使用 {{ }} 插值，如：

<a href="{{ url }}"></a>
<p title="{{ blog-title }}"></p>

4. 再谈 Vue 响应式

const app = new Vue({el: '#app',data: {msg: 'Hello Vue!'}
})

这里的 msg 数据其实已经是响应式数据了，文章开头说过，当页面依赖数据发生变化，Vue 则会监听到并自动渲染页面，此时如果将 msg 里的数据进行修改，Vue 也会自动渲染新的数据到页面上！

如何访问修改 data 中的数据呢？直接使用 Vue 实例.属性名即可，拿上面举例说：

访问：app.msg

修改：app.msg = "Hello JS!"

同时也能得出，data 中的数据，是会被添加到 Vue 实例上的。

使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可。

下期预告：【后端速成Vue】初识指令(上)

相关文章：

【后端速成 Vue】第一个 Vue 程序

1、为什么要学习 Vue&#xff1f; 为什么使用 Vue? 回想之前&#xff0c;前后端交互的时候&#xff0c;前端收到后端响应的数据&#xff0c;接着将数据渲染到页面上&#xff0c;之前使用的是 JavaScript 或者 基于 JavaScript 的 Jquery&#xff0c;但是这两个用起来还是不太…...

编程日记 2023/8/27 4:37:20

Macbook pro M1 安装Ubuntu教程

先讲下心路历程 由于版主最近刚切换到Mac&#xff0c;所以在安装的时候一上手就选择了virutalbox&#xff0c;结果报错“The installer has detected an unsupported architecture. VirtualBox only runs on the amd64 architecture.” 后来去Reddit论坛上一看&#xff0c;才知…...

编程日记 2023/8/27 4:36:17

前端console.log打印内容与后端请求返回数据不一致

后端传值num0 前端打印num1 ,如图&#xff0c;console.log后台显示的数据与展开后不一致 造成该问题原因是深拷贝与浅拷贝的问题。 var obj JSON.parse(JSON.stringify(res)) 修改后打印 正常...

编程日记 2023/8/27 4:35:16

SQL入门：多表查询

SQL&#xff0c;或者说结构化查询语言(Structured Query Language)&#xff0c;是用于管理和操作关系型数据库的标准语言。在本篇文章中&#xff0c;我们将重点介绍SQL中的多表查询&#xff0c;这是一种强大的工具&#xff0c;可以帮助我们从多个相关的表格中获取数据。 数据库…...

编程日记 2023/8/27 4:34:14

【C++】进一步认识模板

&#x1f3d6;️作者&#xff1a;malloc不出对象 ⛺专栏&#xff1a;C的学习之路 &#x1f466;个人简介&#xff1a;一名双非本科院校大二在读的科班编程菜鸟&#xff0c;努力编程只为赶上各位大佬的步伐&#x1f648;&#x1f648; 目录 前言一、非类型模板参数二、模板的特…...

编程日记 2023/8/27 4:33:11

Mysql Oracle 区别

1. oracle select *, id需要在星号前加别名&#xff0c;mysql则不需要 mysql语法&#xff1a; select *, id from xin_student_t;oracle语法&#xff1a; select st.*, st.id from xin_student_t st;2. oracle表定义了别名&#xff0c;在查询时可以不用别名指定字段&#xf…...

编程日记 2023/8/27 4:32:10

华为OD-第K长的连续字母字符串长度

题目描述 给定一个字符串&#xff0c;只包含大写字母&#xff0c;求在包含同一字母的子串中&#xff0c;长度第 k 长的子串的长度&#xff0c;相同字母只取最长的那个子串。 代码实现 # coding:utf-8 # 第K长的连续字母字符串长度 # https://www.nowcoder.com/discuss/353150…...

编程日记 2023/8/27 4:31:08

【编程题】有效三角形的个数

文章目录 一、题目二、算法讲解三、题目链接四、补充 一、题目 给定一个包含非负整数的数组 nums &#xff0c;返回其中可以组成三角形三条边的三元组个数。 示例1&#xff1a; 输入: nums [2,2,3,4] 输出: 3 **解释:**有效的组合是: 2,3,4 (使用第一个 2) 2,3,4 (使用第二个 …...

编程日记 2023/8/27 4:30:07

【mysql是怎样运行的】-EXPLAIN详解

文章目录 1.基本语法2. EXPLAIN各列作用1. table2. id3. select_type4. partitions5. type 1.基本语法 EXPLAIN SELECT select_options #或者 DESCRIBE SELECT select_optionsEXPLAIN 语句输出的各个列的作用如下&#xff1a; 列名描述id在一个大的查询语句中每个SELECT关键…...

编程日记 2023/8/27 4:29:05

数据结构例题代码及其讲解-链表

链表 单链表的结构体定义及其初始化。 typedef struct LNode {int data;struct LNode* next; }LNode, *LinkList;①强调结点 LNode *p; ②强调链表 LinkList p; //初始化 LNode* initList() {//定义头结点LNode* L (LNode*)malloc(sizeof(LNode));L->next NULL;return …...

编程日记 2023/8/27 4:28:04

[Open-source tool] 可搭配PHP和SQL的表單開源工具_Form tools(1):簡介和建置

Form tools是一套可搭配PHP和SQL的表單開源工具&#xff0c;可讓開發者靈活運用&#xff0c;同時其有數個表單模板和應用模組供挑選&#xff0c;方便且彈性。Form tools已開發超過20年&#xff0c;為不同領域的需求者或開發者提供一個自由和開放的平台&#xff0c;使他們可建構…...

编程日记 2023/8/27 4:27:00

移动数据业务价值链的整合

3G 时代移动数据业务开发体系的建立和发展&#xff0c;要求运营商从封闭、统一的业 务形态、单一提供业务&#xff0c;向开放的、个性化多元化的业务体系以及多方合作参与提 供业务的方向发展&#xff0c;不可避免的使通信价值链不断延长和升级&#xff0c;内容提供商、服务 …...

编程日记 2023/8/27 4:25:58

合并两个链表

题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 比如以下例子&#xff1a; 题目接口&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListN…...

编程日记 2023/8/27 4:24:56

测试框架pytest教程（9）跳过测试skip和xfail

skip无条件跳过 使用装饰器 pytest.mark.skip(reason"no way of currently testing this") def test_example(faker):print("nihao")print(faker.words()) 方法内部调用 满足条件时跳过 def test_example():a1if a>0:pytest.skip("unsupported …...

编程日记 2023/8/27 4:23:54

HTML ＜textarea＞ 标签

实例 <textarea rows="3" cols="20"> 收拾收拾 </textarea>定义和用法 <textarea> 标签定义多行的文本输入控件。 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。 可以通过 cols 和 rows 属性来…...

编程日记 2023/8/27 4:22:52

探索图结构：从基础到算法应用

文章目录 理解图的基本概念学习图的遍历算法学习最短路径算法案例分析&#xff1a;使用 Dijkstra 算法找出最短路径结论 &#x1f389;欢迎来到数据结构学习专栏~探索图结构&#xff1a;从基础到算法应用 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;I…...

编程日记 2023/8/27 4:21:51

Redis之GEO类型解读

目录 基本介绍 基本命令 geoadd 命令 geopos 命令 geodist 命令 georadius 命令 georadiusbymember 命令 geohash 命令 基本介绍 GEO 主要用于存储地理位置信息&#xff08;纬度、经度、名称&#xff09;添加到指定的key中。该功能在 Redis 3.2 版本新增。 GEO&…...

编程日记 2023/8/27 4:20:50

uniapp 微信小程序 路由跳转

保留当前页面&#xff0c;跳转到应用内的某个页面&#xff0c;使用uni.navigateBack可以返回到原页面 //在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({url: test?id1&name"lisa" }); uni.redirectTo(OBJECT) 关闭当前页面&#xff0c;跳转到应用…...

编程日记 2023/8/27 4:19:46

【android12-linux-5.1】【ST芯片】HAL移植后没调起来

ST传感器芯片HAL按官方文档移植后&#xff0c;测试一直掉不起来&#xff0c;加的日志没出来。经过分析&#xff0c;是系统自带了一个HAL&#xff0c;影响的。 按照官方文档&#xff0c;移植HAL后&#xff0c;在/device/<vendor\>/<board\>/device.mk*路径增加PROD…...

编程日记 2023/8/27 4:18:45

Redis Lua脚本执行原理和语法示例

Redis Lua脚本语法示例 文章目录 Redis Lua脚本语法示例0. 前言参考资料 1. Redis 执行Lua脚本原理1.1. 对Redis源码中嵌入Lua解释器的简要解析&#xff1a;1.2. Redis Lua 脚本缓存机制 2. Redis Lua脚本示例1.1. 场景示例1. 请求限流2. 原子性地从一个list移动元素到另一个li…...

编程日记 2023/8/27 4:17:43

【VASP脚本进阶】Perl脚本解析：Materials Studio原子约束信息如何精准写入POSCAR

1. Perl脚本在VASP计算中的关键作用 做材料模拟的朋友们肯定都遇到过这样的场景&#xff1a;在Materials Studio里精心搭建好模型&#xff0c;设置完原子约束&#xff0c;结果导出到VASP时发现固定原子的信息全丢了。这种时候&#xff0c;一个靠谱的Perl脚本简直就是救命稻草。…...

编程新知 2026/3/27 3:51:34

5分钟解锁WeMod专业版：开源工具让你的游戏修改体验全面升级

5分钟解锁WeMod专业版&#xff1a;开源工具让你的游戏修改体验全面升级 【免费下载链接】Wemod-Patcher WeMod patcher allows you to get some WeMod Pro features absolutely free 项目地址: https://gitcode.com/gh_mirrors/we/Wemod-Patcher 还在为WeMod专业版的订阅…...

编程新知 2026/3/27 2:52:47

AI赋能开发：让快马平台智能解析并生成17.100.c.cm规格的优化代码

最近在做一个需要处理特定规格数据的项目&#xff0c;遇到了一个有趣的开发场景&#xff1a;需要基于"17.100.c.cm"这样的参数组合来构建微服务架构。这个看似简单的字符串其实包含了多维度的技术参数&#xff0c;正好可以借助InsCode(快马)平台的AI辅助开发能力来高…...

编程新知 2026/3/27 2:26:43

百川2-13B-4bits模型微调实践：提升OpenClaw特定任务准确率

百川2-13B-4bits模型微调实践&#xff1a;提升OpenClaw特定任务准确率 1. 为什么需要微调百川模型&#xff1f; 去年冬天&#xff0c;当我第一次用OpenClaw自动整理电脑上的技术文档时&#xff0c;发现了一个尴尬的问题&#xff1a;模型总是把Python代码片段误判为"待办…...

编程新知 2026/3/27 1:58:39

macOS歌词体验升级：LyricsX实现多播放器无缝歌词同步方案

macOS歌词体验升级&#xff1a;LyricsX实现多播放器无缝歌词同步方案 【免费下载链接】LyricsX &#x1f3b6; Ultimate lyrics app for macOS. 项目地址: https://gitcode.com/gh_mirrors/ly/LyricsX 你是否曾在使用macOS音乐播放器时遭遇歌词显示不同步、搜索不到匹配…...

编程新知 2026/3/27 0:21:27

SDMatte边缘精修效果展示：发丝级分离、玻璃折射保留、薄纱纹理还原等高清案例图集

SDMatte边缘精修效果展示&#xff1a;发丝级分离、玻璃折射保留、薄纱纹理还原等高清案例图集 1. 惊艳效果预览 SDMatte作为专业级AI抠图工具&#xff0c;在处理复杂边缘和透明物体方面展现出惊人的能力。下面我们通过一组真实案例&#xff0c;展示它在不同场景下的表现。 1…...

编程新知 2026/3/27 0:11:22

【STM32-HAL库】火焰传感器实战：从原理到智能火灾预警系统搭建（基于STM32F407ZGT6）

1. 火焰传感器原理与选型指南 火焰传感器作为火灾预警系统的"眼睛"&#xff0c;其核心原理是利用光电效应检测火焰特有的光谱特征。我经手过的工业项目中&#xff0c;90%的火灾误报都源于传感器选型不当。市面上常见的火焰传感器主要分为三类&#xff1a; 红外型&…...

编程新知 2026/3/26 21:21:57

体验开发新范式：如何用快马平台的AI大模型将想法直接变成代码

最近尝试用AI辅助开发工具来快速实现一个任务管理应用&#xff0c;整个过程让我对现代开发方式有了全新认识。和大家分享一下这个有趣的实践经历&#xff1a; 需求分析阶段 传统开发需要先梳理功能清单&#xff0c;但这次我直接把自然语言描述输入到InsCode(快马)平台的AI对话框…...

编程新知 2026/3/26 20:23:44

JVM堆内存泄漏排查：从-Xmx设置到hprof文件分析的完整避坑指南

JVM堆内存泄漏排查&#xff1a;从参数配置到实战分析的完整方法论 最近在排查一个线上服务的内存泄漏问题时&#xff0c;我发现很多开发者对JVM内存问题的处理还停留在"遇到OOM就重启服务"的初级阶段。实际上&#xff0c;一套系统化的内存排查方法论不仅能快速定位问…...

编程新知 2026/3/26 20:13:43

CosyVoice Docker 部署优化：如何有效降低 CPU 占用率

在语音合成服务日益普及的今天&#xff0c;CosyVoice 凭借其出色的音质和灵活性&#xff0c;成为了许多开发者的选择。然而&#xff0c;当我们将它部署到 Docker 容器中时&#xff0c;一个普遍且棘手的问题随之而来&#xff1a;CPU 占用率居高不下。这不仅导致服务器资源成本飙…...

编程新知 2026/3/26 20:13:43