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

springboot和vue：八、vue快速入门

news 2026/2/4 11:08:19

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

智慧医疗能源事业线深度画像分析（上）

引言医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2026/1/22 19:24:45

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...

编程新知 2026/1/26 5:25:25

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录一、SQL注入二、insert注入三、报错型注入四、updatexml函数五、源码审计六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/1/26 17:40:01

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...

编程新知 2026/1/30 1:47:17

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域，Hive 作为 Hadoop 生态中重要的数据仓库工具，其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式，很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机配置虚拟机飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2026/1/30 6:19:54

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析，分为已启动和未启动两种场景： 一、ContentProvider已启动的情况 1. 核心流程触发条件：当其他组件（如Activity、Service）通过ContentR…...

编程新知 2025/10/2 19:46:59

深入浅出Diffusion模型：从原理到实践的全方位教程

I. 引言：生成式AI的黎明 – Diffusion模型是什么？ 近年来，生成式人工智能（Generative AI）领域取得了爆炸性的进展，模型能够根据简单的文本提示创作出逼真的图像、连贯的文本，乃至更多令人惊叹的…...

编程新知 2025/9/12 5:25:46

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

vue快速入门

新建一个html文件

导入 vue.js 的 script 脚本文件

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

最终html代码

最终页面

vue基础用法

内容渲染

属性绑定

结合js表达式

事件绑定

条件渲染

v-if和列表渲染

相关文章：