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

springboot和vue：八、vue快速入门

news 2026/2/10 2:38:41

vue快速入门

新建一个html文件

导入 vue.js 的 script 脚本文件

<script src="https://unpkg.com/vue@next"></script>

在页面中声明一个将要被 vue 所控制的 DOM 区域，既MVVM中的View

<div id="app">{{ message }}
</div>

创建 vm 实例对象（vue 实例对象）

const hello = {data : functiion(){return {message: 'Hello vue!'}}}
const app = Vue.createApp(hello)
app.mount('#app')

最终html代码

<!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="https://unpkg.com/vue@3"></script>
</head><body><div id="app">{{ message }}</div><script>Vue.createApp({data() {return {message: 'hello vue'}}}).mount('#app')</script>
</body></html>

注意ctrl+s保存。

最终页面

在这里插入图片描述

vue基础用法

内容渲染

需要额外注意的是链接标签的渲染除了双括号之外需要额外用v-html的标签，否则只会识别成文本。

<!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="https://unpkg.com/vue@3"></script>
</head><body><div id="app"><p>姓名：{{username}}</p><p v-html="desc"></p></div><script>const vm = {data: function () {return {username: 'zhangsan',desc: '<a href = "http://www.baidu.com">百度</a>'}}}const app = Vue.createApp(vm)app.mount('#app')</script>
</body></html>

在这里插入图片描述

属性绑定

结构如图所示
在这里插入图片描述
注意属性绑定的话，属性前需要加：，前需要空格。
完整代码：

<!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="https://unpkg.com/vue@3"></script>
</head><body><div id="app"><a :href='link'>百度</a:href><input type="text" :placeholder="inputValue"><img :src="imgSrc" :style="{width:w}" alt=""></img:></div><script>const vm = {data: function () {return {link: "http://www.baidu.com",inputValue: '请输入内容',imgSrc: './images/1.jpg',w: '300px'}}}const app = Vue.createApp(vm)app.mount('#app')</script>
</body></html>

测试页面：

在这里插入图片描述

结合js表达式

<!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="https://unpkg.com/vue@3"></script>
</head><body><div id="app"><p>{{number+1}}</p><p>{{ok ? 'True' : 'False'}}</p><p>{{message.split('').reverse().join('')}}</p><p :id="'list-'+id"></p><p>{{user.name}}</p></div><script>const vm = {data: function () {return {number: 9,ok: false,message: 'ABC',id: 3,user: {name: "shanshan"}}}}const app = Vue.createApp(vm)app.mount('#app')</script>
</body></html>

在这里插入图片描述

事件绑定

可以使用v-on标签再加动作，也可以直接用@加动作
后面可以加方法，也可以直接写简单的函数。
两个按钮都可以实现+1的功能。

完整代码：

<!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="https://unpkg.com/vue@3"></script>
</head><body><div id="app"><h3>count的值：{{count}}</h3><button v-on:click="addCount">+1</button><button @click="count+=1">+1</button></div><script>const vm = {data: function () {return {count: 0}},methods: {addCount() {this.count += 1}}}const app = Vue.createApp(vm)app.mount('#app')</script>
</body></html>

条件渲染

只有表达式为真时，v-if才会真正地在dom树里创建出来。
无论表达式值为什么，v-show都会被创建出来，只是页面不一定显示。
完整代码

<!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="https://unpkg.com/vue@3"></script>
</head><body><div id="app"><button @click="flag = !flag">Toggle Flag</button><p v-if="flag">请求成功 --- 被v-if控制</p><p v-show="flag">请求成功 --- 被v-show控制</p></div><script>const vm = {data: function () {return {flag: false,}}}const app = Vue.createApp(vm)app.mount('#app')</script>
</body></html>

在这里插入图片描述

v-if和列表渲染

完整代码：

<!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="https://unpkg.com/vue@3"></script>
</head><body><div id="app"><p v-if="num>0.5">随机数>0.5</p><p v-else>随机数≤0.5</p><ul><li v-for="(user, i) in userList">索引是：{{i}}， 姓名是：{{user.name}}</li></ul></div><script>const vm = {data: function () {return {num: Math.random(),userList: [{ id: 1, name: 'zhangsan' },{ id: 2, name: 'lisi' },{ id: 3, name: 'wangwu' },]}}}const app = Vue.createApp(vm)app.mount('#app')</script>
</body></html>

springboot和vue：八、vue快速入门

vue快速入门新建一个html文件导入 vue.js 的 script 脚本文件 <script src"https://unpkg.com/vuenext"></script>在页面中声明一个将要被 vue 所控制的 DOM 区域，既MVVM中的View <div id"app">{{ message }} </div…...

编程日记 2023/10/1 7:28:37

docker-compose内网本地安装

1：通过包管理器安装 Docker Compose，请按照以下步骤进行操作： 首先，确保你的系统上已经安装了 Docker。如果尚未安装 Docker，请根据你的操作系统使用适当的包管理器进行安装打开终端，并运行以下命令下载 D…...

编程日记 2023/10/1 7:27:36

ThreeJs的场景实现鼠标拖动旋转控制

前面一个章节中已经实现在场景中放置一个正方体，并添加灯光使得正方体可见。但是由于是静态的还不能证明是3D的，我们需要添加一些控制器，使得通过鼠标控制正方体可以动起来，实现真正的3D效果，由此引入OrbitControls组件…...

编程日记 2023/10/1 7:24:33

jdk 管理工具比对 jEnv jabba SDKMAN

jEnv、jabba、SDKMAN 这三个 JDK 管理工具进行的比对： jEnv： 地址：https://github.com/jenv/jenv 作者：Gildas Cuisinier 最后更新时间：2021年5月26日开发语言：Shell Jabba： 地址&#xff1…...

编程日记 2023/10/1 7:23:31

华为云云耀云服务器L实例评测｜部署在线图表和流程图绘制工具drawio

华为云云耀云服务器L实例评测｜部署在线图表和流程图绘制工具drawio 一、云耀云服务器L实例介绍1.1 云服务器介绍1.2 优势及其应用场景1.3 支持镜像二、云耀云服务器L实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置三、部署 drawio3.1 drawio 介绍3.2 Docker 环…...

编程日记 2023/10/1 7:20:28

elementui引入弹出框报错：this.$alert is not defined 解决方案

1.按需引入文件element.js 注意：引入Message，MessageBox两个组件就行，alert包括在MessageBox里面了。之前我引入了Alert组件，发现不行 2.在vue的prototype里注册伪名字 3.组件里直接调用就行了 4.实现效果我发现elementui调用…...

编程日记 2023/10/1 7:19:27

docker的组件和资源管理

Docker是一种开源的容器化平台，它提供了一种轻量级、可移植和可扩展的方式来打包、部署和运行应用程序。Docker的构成包括以下几个关键组件： Docker Engine：Docker Engine是Docker的核心组件，它负责管理容器的生命周期和资源隔离…...

编程日记 2023/10/1 7:15:25

SEO的优化教程（百度SEO的介绍和优化）

百度SEO关键字介绍： 百度SEO关键字是指用户在搜索引擎上输入的词语，是搜索引擎了解网站内容和相关性的重要因素。百度SEO关键字可以分为短尾词、中尾词和长尾词，其中长尾词更具有针对性和精准性，更易于获得高质量的流量。蘑菇号-…...

编程日记 2023/10/1 7:14:24

Tomcat以及UDP

一、Tomcat 服务端自定义 S Tomcat服务器 S ：Java后台开发客户端自定义 C 浏览器 B 认识一些常用的目录： bin：存放开始和结束的程序 conf：配置文件 lib：组成包 logs：输出日志 webapps&#x…...

编程日记 2023/10/1 7:12:22

NLP 04(GRU)

一、GRU GRU (Gated Recurrent Unit)也称门控循环单元结构,它也是传统RNN的变体,同LSTM一样能够有效捕捉长序列之间的语义关联， 缓解梯度消失或爆炸现象，同时它的结构和计算要比LSTM更简单,它的核心结构可以分为两个部分去解析: 更新门、重置门 GRU的内…...

编程日记 2023/10/1 7:11:21

BUUCTF reverse wp 51 - 55

findKey shift f12 找到一个flag{}字符串, 定位到关键函数, F5无效, 大概率是有花指令, 读一下汇编这里连续push两个byte_428C54很奇怪, nop掉下面那个, 再往上找到函数入口, p设置函数入口, 再F5 LRESULT __stdcall sub_401640(HWND hWndParent, UINT Msg, WPARAM wPara…...

编程日记 2023/10/1 7:10:20

WebGL笔记：使用鼠标绘制多个线条应用及绘制动感线性星座

使用鼠标绘制多个线条多个线条，肯定不是一笔画过的，而是多次画的线条既然是多线，那就需要有个容器来管理它们 1 ）建立容器对象建立一个 lineBox 对象，作为承载多边形的容器 // lineBox.js export default class …...

编程日记 2023/10/1 7:06:16

nodejs+vue 汽车销售系统elementui

第三章系统分析 10 3.1需求分析 10 3.2可行性分析 10 3.2.1技术可行性：技术背景 10 3.2.2经济可行性 11 3.2.3操作可行性： 11 3.3性能分析 11 3.4系统操作流程 12 3.4.1管理员登录流程 12 3.4.2信息添加流程 12 3.4.3信息删除流程 13 第四章系统设计与…...

编程日记 2023/10/1 7:03:14

leetcode76 Minimum Window Substring

给定两个字符串s和t， 找到s的一个子串，使得t的每个字符都出现在子串中，求最短的子串由于要每个字符出现，所以顺序其实没有关系因此我们可以定义一个map，统计t中字符出现次数然后在s中慢慢挪动滑动窗口，…...

编程日记 2023/10/1 7:02:13

简单工厂模式~

我们以生产手机作为应用场景展开讲解！ 手机是一个抽象的概念，它包含很多的品牌，例如华为，苹果，小米等等，因此我们可将其抽象为一个接口，如下所示： public interface tel {void pro…...

编程日记 2023/10/1 7:01:11

基于Java的会员管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序（小蔡coding）有保障的售后福利代码参考源码获取前言 💗博主介绍：✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...

编程日记 2023/10/1 7:00:11

数据结构图并查集遍历方法最短路径算法最小生成树算法简易代码实现

文章目录前言并查集图遍历方法广度优先遍历深度优先遍历最小生成树算法Kruskal算法Prim算法最短路径算法Dijkstra算法BellmanFord算法FloydWarshall算法全部代码链接前言图是真的难，即使这些我都学过一遍，再看还是要顺一下过程；说明方…...

编程日记 2023/10/1 6:59:10

idea Springboot 教师标识管理系统开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot 教师标识管理系统是一套完善的信息系统，结合springboot框架和bootstrap完成本系统，对理解JSP java编程开发语言有帮助系统采用springboot框架（MVC模式开发），系统具有完整的源代码和数据库&…...

编程日记 2023/10/1 6:58:08

题目链接：二叉搜索树与双向链表 import java.util.*; /** public class TreeNode {int val 0;TreeNode left null;TreeNode right null;public TreeNode(int val) {this.val val;}} */ public class Solution {TreeNode pre null;public TreeNode Convert(Tree…...

编程日记 2023/10/1 6:57:08

在windows的ubuntu LTS中安装及使用EZ-InSAR进行InSAR数据处理

EZ-InSAR（曾被称为MIESAR，即Matlab界面用于易于使用的合成孔径雷达干涉测量）是一个用MATLAB编写的工具箱，用于通过易于使用的图形用户界面（GUI）进行干涉合成孔径雷达（InSAR）数据处理…...

编程日记 2023/10/1 6:56:06

day52 ResNet18 CBAM

在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...

编程新知 2025/11/9 1:27:18

【位运算】消失的两个数字（hard）

消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码题⽬链接：⾯试题 17.19. 消失的两个数字题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备网站技术分析： 使用浏览器开发者工具（F12&…...

编程新知 2025/10/19 5:48:51

《C++ 模板》

目录函数模板类模板非类型模板参数模板特化函数模板特化类模板的特化模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。函数模板函数模板可以简化函数重载的代码。格式：templa…...

编程新知 2025/6/11 3:20:47

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象： android studio报错： [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决： 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

Unity UGUI Button事件流程

场景结构测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2026/2/9 18:50:34

【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道

文/法律实务观察组在债务重组领域，专业机构的核心价值不仅在于减轻债务数字，更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明，合法债务优化需同步实现三重平衡： 法律刚性（债…...

编程新知 2026/1/31 9:00:14

算法—栈系列

一：删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...

编程新知 2026/1/22 13:43:14

拟合问题处理

在机器学习中，核心任务通常围绕模型训练和性能提升展开，但你提到的 “优化训练数据解决过拟合” 和 “提升泛化性能解决欠拟合” 需要结合更准确的概念进行梳理。以下是对机器学习核心任务的系统复习和修正： 一、机器学习的核心任务框架机…...

编程新知 2025/9/6 11:47:54

vue快速入门

新建一个html文件

导入 vue.js 的 script 脚本文件

创建 vm 实例对象（vue 实例对象）

最终html代码

最终页面

vue基础用法

内容渲染

属性绑定

结合js表达式

事件绑定

条件渲染

v-if和列表渲染

相关文章：