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）数据处理…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1
每日一言 生活的美好，总是藏在那些你咬牙坚持的日子里。 硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
css的定位（position）详解：相对定位 绝对定位 固定定位
在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...
WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为 以太坊（Ethereum）平台编写智能合约的高级编…...
鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败 网络不同，需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...