springboot和vue：八、vue快速入门
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…...
docker-compose内网本地安装
1：通过包管理器安装 Docker Compose，请按照以下步骤进行操作： 首先，确保你的系统上已经安装了 Docker。如果尚未安装 Docker，请根据你的操作系统使用适当的包管理器进行安装打开终端，并运行以下命令下载 D…...
ThreeJs的场景实现鼠标拖动旋转控制
前面一个章节中已经实现在场景中放置一个正方体，并添加灯光使得正方体可见。但是由于是静态的还不能证明是3D的，我们需要添加一些控制器，使得通过鼠标控制正方体可以动起来，实现真正的3D效果，由此引入OrbitControls组件…...
jdk 管理工具比对 jEnv jabba SDKMAN
jEnv、jabba、SDKMAN 这三个 JDK 管理工具进行的比对： jEnv： 地址：https://github.com/jenv/jenv 作者：Gildas Cuisinier 最后更新时间：2021年5月26日 开发语言：Shell Jabba： 地址࿱…...
华为云云耀云服务器L实例评测｜部署在线图表和流程图绘制工具drawio
华为云云耀云服务器L实例评测｜部署在线图表和流程图绘制工具drawio 一、云耀云服务器L实例介绍1.1 云服务器介绍1.2 优势及其应用场景1.3 支持镜像 二、云耀云服务器L实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 drawio3.1 drawio 介绍3.2 Docker 环…...
elementui引入弹出框报错：this.$alert is not defined 解决方案
1.按需引入文件element.js 注意：引入Message，MessageBox两个组件就行，alert包括在MessageBox里面了。 之前我引入了Alert组件，发现不行 2.在vue的prototype里注册伪名字 3.组件里直接调用就行了 4.实现效果 我发现elementui调用…...
docker的组件和资源管理
Docker是一种开源的容器化平台，它提供了一种轻量级、可移植和可扩展的方式来打包、部署和运行应用程序。Docker的构成包括以下几个关键组件： Docker Engine：Docker Engine是Docker的核心组件，它负责管理容器的生命周期和资源隔离…...
SEO的优化教程（百度SEO的介绍和优化）
百度SEO关键字介绍： 百度SEO关键字是指用户在搜索引擎上输入的词语，是搜索引擎了解网站内容和相关性的重要因素。百度SEO关键字可以分为短尾词、中尾词和长尾词，其中长尾词更具有针对性和精准性，更易于获得高质量的流量。蘑菇号-…...
Tomcat以及UDP
一、Tomcat 服务端 自定义 S Tomcat服务器 S ：Java后台开发 客户端 自定义 C 浏览器 B 认识一些常用的目录： bin：存放开始和结束的程序 conf：配置文件 lib：组成包 logs：输出日志 webapps&#x…...
NLP 04(GRU)
一、GRU GRU (Gated Recurrent Unit)也称门控循环单元结构,它也是传统RNN的变体,同LSTM一样能够有效捕捉长序列之间的语义关联， 缓解梯度消失或爆炸现象，同时它的结构和计算要比LSTM更简单,它的核心结构可以分为两个部分去解析: 更新门、重置门 GRU的内…...
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…...
WebGL笔记：使用鼠标绘制多个线条应用及绘制动感线性星座
使用鼠标绘制多个线条 多个线条，肯定不是一笔画过的，而是多次画的线条既然是多线，那就需要有个容器来管理它们 1 ）建立容器对象 建立一个 lineBox 对象，作为承载多边形的容器 // lineBox.js export default class …...
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 第四章 系统设计与…...
leetcode76 Minimum Window Substring
给定两个字符串s和t， 找到s的一个子串，使得t的每个字符都出现在子串中，求最短的子串 由于要每个字符出现，所以顺序其实没有关系 因此我们可以定义一个map，统计t中字符出现次数 然后在s中慢慢挪动滑动窗口，…...
简单工厂模式~
我们以生产手机作为应用场景展开讲解！ 手机是一个抽象的概念，它包含很多的品牌，例如华为，苹果，小米等等，因此我们可将其抽象为一个接口，如下所示： public interface tel {void pro…...
基于Java的会员管理系统设计与实现(源码+lw+部署文档+讲解等)
文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序（小蔡coding）有保障的售后福利 代码参考源码获取 前言 💗博主介绍：✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...
数据结构 图 并查集 遍历方法 最短路径算法 最小生成树算法 简易代码实现
文章目录 前言并查集图遍历方法广度优先遍历深度优先遍历 最小生成树算法Kruskal算法Prim算法 最短路径算法Dijkstra算法BellmanFord算法FloydWarshall算法 全部代码链接 前言 图是真的难，即使这些我都学过一遍，再看还是要顺一下过程；说明方…...
idea Springboot 教师标识管理系统开发mysql数据库web结构java编程计算机网页源码maven项目
一、源码特点 springboot 教师标识管理系统是一套完善的信息系统，结合springboot框架和bootstrap完成本系统，对理解JSP java编程开发语言有帮助系统采用springboot框架（MVC模式开发），系统 具有完整的源代码和数据库&…...
2023-9-30 JZ36 二叉搜索树与双向链表
题目链接：二叉搜索树与双向链表 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…...
在windows的ubuntu LTS中安装及使用EZ-InSAR进行InSAR数据处理
EZ-InSAR（曾被称为MIESAR，即Matlab界面用于易于使用的合成孔径雷达干涉测量）是一个用MATLAB编写的工具箱，用于通过易于使用的图形用户界面（GUI）进行干涉合成孔径雷达（InSAR）数据处理…...
背包问题Ⅱ与二分问题
今天我对背包问题有了更深的理解，我一定要写下来，巩固自己的思路并且，遇到新的难题二分，不管了，干就完了！！！完全背包以今天写的代码展开详细描述与解释,并附上题目#define N 1001 in…...
MOSSE算法在无人机视频跟踪中的应用：一个被低估的轻量级选择？
MOSSE算法：无人机视觉跟踪中未被充分利用的高效解决方案 当你在树莓派或Jetson Nano这样的边缘设备上部署无人机视觉系统时，是否经常面临这样的困境：既需要实时性能，又受限于计算资源和功耗？在众多目标跟踪算法中&…...
虚拟光驱软件Daemon Tools Lite
链接：https://pan.quark.cn/s/ebc5b998a07bDaemon Tools Lite 是一款免费、稳定、方便、优秀的虚拟光驱软件。安装后会自动在资源管理器生成一个和真实光驱一样的盘符，让您像访问真正光驱一样来访问虚拟光驱。Daemon Tools Lite 还可以模拟备份并且合并保…...
双摆控制系统：LQR、LQG、LQI控制器及龙伯格观测器文件清单
移动小车上双摆的LQR、LQG、LQI控制器和龙伯格观测器文件列表： LQG.m LQG_non_linear.m LQI.m LQR.m LQR_Non_linear.m Luenberger_observer.m Observer_non_linear.m 最近蹲在实验室的工位上啃移动小车双摆的控制代码，翻来覆去调了快两周，终…...
如何用QuickRecorder解决macOS录屏痛点：高效专业的从入门到精通实践指南
如何用QuickRecorder解决macOS录屏痛点：高效专业的从入门到精通实践指南 【免费下载链接】QuickRecorder A lightweight screen recorder based on ScreenCapture Kit for macOS / 基于 ScreenCapture Kit 的轻量化多功能 macOS 录屏工具 项目地址: https://gitco…...
实践指南：如何使用Cisco DefenseClaw保护你的AI Agent安全
一、背景：AI Agent安全面临的新挑战 最近，开源AI代理框架OpenClaw遭遇了大规模供应链攻击，超过800个恶意技能被植入ClawHub技能市场。这个事件被命名为"ClawHavoc"，它暴露了AI Agent生态的安全漏洞。 作为开发者&#x…...
突破Windows苹果设备连接限制：Apple-Mobile-Drivers-Installer的自动化驱动解决方案
突破Windows苹果设备连接限制：Apple-Mobile-Drivers-Installer的自动化驱动解决方案 【免费下载链接】Apple-Mobile-Drivers-Installer Powershell script to easily install Apple USB and Mobile Device Ethernet (USB Tethering) drivers on Windows! 项目地址…...
破解企业AI应用开发困境：Dify工作流架构的颠覆性价值
破解企业AI应用开发困境：Dify工作流架构的颠覆性价值 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程，自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awesome-Dify-W…...
如何高效使用iOS推送调试工具：SmartPush完整操作指南
如何高效使用iOS推送调试工具：SmartPush完整操作指南 【免费下载链接】SmartPush SmartPush,一款iOS苹果远程推送测试程序,Mac OS下的APNS工具APP,iOS Push Notification Debug App 项目地址: https://gitcode.com/gh_mirrors/smar/SmartPush SmartPush是一款…...
NaViL-9B图文理解入门：支持中英文混合提问的实测案例
NaViL-9B图文理解入门：支持中英文混合提问的实测案例 1. 认识NaViL-9B NaViL-9B是一款原生多模态大语言模型，由专业研究机构开发。它最大的特点是能够同时处理文字和图片信息，就像一个能"看图说话"的智能助手。无论是纯文字问题&…...