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

springboot和vue：八、vue快速入门

news 2025/7/4 19:04:46

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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/6/21 11:59:52

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录一、问题背景与挑战二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/7/4 14:36:53

golang循环变量捕获问题

在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景看这个代码片段： fo…...

编程新知 2025/6/15 1:42:04

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/7/4 7:26:28

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/6/28 14:31:27