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

Javaweb基础-vue

news 2025/11/11 9:17:43

Vue.js

Vue是一套用于构建用户界面的渐进式框架。

起步

引入vue

<head><script src="static/js/vue@2.6.12.min.js"></script>
</head>

创建vue应用

<body>
<div id="index"><p>{{message}}</p>
</div><script>const index = new Vue({el: "#index",data: {message: "消息"}});
</script>
</body>

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值
<body>
<div id="index"><p>{{message}}</p>
</div><script>const index = new Vue({el: "#index",data: {message: "消息"}});
</script>
</body>
HTML

使用 v-html 指令用于输出 HTML代码
<body>
<div id="index"><div v-html="html"></div>
</div><script>const index = new Vue({el: "#index",data: {html:"<p>一个p标签</p>"}});
</script>
</body>
属性

HTML 属性中的值应使用 v-bind 指令。
<body>
<div id="index"><input type="checkbox" v-model="used"><div v-bind:class="{'class1':used}">属性</div>
</div><script>const index = new Vue({el: "#index",data: {used:false}});
</script>
</body>
<style>.class1{background-color: red;}
</style>
表达式
<body>
<div id="index"><p>{{1+1}}</p><p>{{ok?"OK":"NO"}}</p>
</div><script>const index = new Vue({el: "#index",data: {ok:true}});
</script>
</body>
指令

指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
<div v-html=""></div>
<div v-bind:class="">属性</div>
...
参数

参数在指令后以冒号指明。
<div v-bind:class="">属性</div> <a v-bind:href="">链接</a> ...
修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
<button @click.native="">按钮</button>

条件语句

v-if

<body>
<div id="index"><div v-if="ok">{{ok}}</div><!--ok=true时显示true，否则不展示 --><div v-if="!ok">{{ok}}</div><!--ok=false时，显示false-->
</div><script>const index = new Vue({el: "#index",data: {ok:false}});
</script>
</body>

v-else

<body>
<div id="index"><div v-if="ok">{{ok}}</div><!--ok=true时显示true--><div v-else>{{ok}}</div><!--否则显示false-->
</div><script>const index = new Vue({el: "#index",data: {ok:false}}});
</script>
</body>

v-else-if

<body>
<div id="index"><div v-if="ok==='A'">A</div><div v-else-if="ok==='B'">B</div><div v-else-if="ok==='C'">C</div><div v-else>OTHER</div>
</div><script>const index = new Vue({el: "#index",data: {ok:'X'}});
</script>
</body>

v-show

与v-if作用类似

<body>
<div id="index"><div v-show="ok">A</div>
</div><script>const index = new Vue({el: "#index",data: {ok:true}});
</script>
</body>

循环语句

循环使用 v-for 指令。

迭代数组

<body>
<div id="index"><ol><li v-for="item in list">{{item.key}}:{{item.value}}</li></ol>
</div><script>const index = new Vue({el: "#index",data: {list: [{key: "key1", value: "value1"},{key: "key2", value: "value2"},{key: "key3", value: "value3"}]}});
</script>
</body>

迭代对象

<body>
<div id="index"><ol><li v-for="(value,key) in obj">{{key}}:{{value}}</li></ol>
</div><script>const index = new Vue({el: "#index",data: {obj:{name:"aji",sex:"male",age:"24"}}});
</script>
</body>

迭代整数

<body>
<div id="index"><ol><li v-for="n in 10">{{n}}</li></ol>
</div><script>const index = new Vue({el: "#index",data: {}});
</script>
</body>

计算属性

计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。

computed

<body>
<div id="index"><span>{{str}}</span><div v-for="item in str.split('')">{{item}}</div><!--功能与下一行一样--><div v-for="item in strSplit">{{item}}</div>
</div><script>const index = new Vue({el: "#index",data: {str:"abcd"},computed:{strSplit:function (){return this.str.split('')}}});
</script>
</body>

methods

可以使用 methods 来替代 computed，效果上两个都是一样的

<body>
<div id="index"><span>{{str}}</span><div v-for="item in str.split('')">{{item}}</div><!--功能与下一行一样--><div v-for="item in strSplit2()">{{item}}</div>
</div><script>const index = new Vue({el: "#index",data: {str:"abcd"},methods:{strSplit2:function (){return this.str.split('')}}});
</script>
</body>

样式绑定

class

可以在对象中传入多属性用来动态切换多个 class

<body>
<div id="index"><span>红色背景<input type="checkbox" v-model="red"></span><span>大字体<input type="checkbox" v-model="big"></span><div v-bind:class="{'class1':red,'class2':big}">样式绑定class</div>
</div><script>const index = new Vue({el: "#index",data: {red:false,big:false,}});
</script>
</body>
<style>.class1 {background-color: red;}.class2 {font-size: 40px;}
</style>

style

可以在 v-bind:style 直接设置样式

<body>
<div id="index"><button v-on:click="add()">{{fontSize}}+4</button><!--点击时触发add()方法，fontSize+4--><div v-bind:style="{fontSize:fontSize+'px'}">样式绑定class</div>
</div><script>const index = new Vue({el: "#index",data: {fontSize: 12,},methods: {add: function () {this.fontSize += 4}}});
</script>
</body>

事件处理器

事件监听可以使用 v-on 指令

<body>
<div id="index"><button v-on:click="{fontSize++}">{{fontSize}}</button><button v-on:mousedown="color('yellow')" v-on:mouseup="color('pink')" v-bind:style="{backgroundColor:fontColor}">{{fontColor}}</button><button v-on:mouseover="color('yellow')" v-on:mouseout="color('pink')" v-bind:style="{color:fontColor}">{{fontColor}}</button>
</div><script>const index = new Vue({el: "#index",data: {fontSize: 12,fontColor: "pink"},methods: {color: function (param) {this.fontColor = param}}});
</script>
</body>

表单

可以用 v-model 指令在表单控件元素上创建双向数据绑定

输入框

<body>
<div id="index"><div><input type="text" v-model="str"><p>{{str}}</p></div><div><textarea type="text" v-model="text"></textarea><p>{{text}}</p></div>
</div><script>const index = new Vue({el: "#index",data: {str: '',text: ''}});
</script>
</body>

复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组。

<body>
<div id="index"><div><span>逻辑值<input type="checkbox" v-model="bool"></span><p>{{bool}}</p></div><div><span>数组<input type="checkbox" v-model="arr" value="A"><input type="checkbox" v-model="arr" value="B"><input type="checkbox" v-model="arr" value="C"></span><p>{{arr}}</p></div>
</div><script>const index = new Vue({el: "#index",data: {bool: false,arr: [],}});
</script>
</body>

单选按钮

<body>
<div id="index"><div><span>A<input type="radio" v-model="single" value="A"></span><span>B<input type="radio" v-model="single" value="B"></span><span>C<input type="radio" v-model="single" value="C"></span><p>{{single}}</p></div>
</div><script>const index = new Vue({el: "#index",data: {single:'',}});
</script>
</body>

select列表

<body>
<div id="index"><select v-model="select"><option value="">请选择</option><option value="A">A</option><option value="B">B</option><option value="C">C</option></select><p>{{select}}</p>
</div><script>const index = new Vue({el: "#index",data: {select: '',}});
</script>
</body>

组件

组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用。

全局组件
<body>
<div id="index"><aji></aji>
</div><script>Vue.component('aji',{template:'<div>自定义组件aji</div>'}) //注册全局组件const index = new Vue({el: "#index",data: {}});
</script>
</body>
局部组件
<body>
<div id="index"><aji></aji>
</div><script>const index = new Vue({el: "#index",components: {'aji': {template: '<div>自定义组件aji</div>'}},data: {}});
</script>
</body>
Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"
<body>
<div id="index"><aji msg="prop传参"></aji>
</div><script>Vue.component('aji', {props: ['msg'],template: '<div>自定义组件aji,传参为:{{msg}}</div>'})const index = new Vue({el: "#index",data: {}});
</script>
</body>
动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。
<body>
<div id="index"><input type="text" v-model="msg"><aji v-bind:msg="msg"></aji>
</div><script>Vue.component('aji', {props: ['msg'],template: '<div>自定义组件aji,传参为:{{msg}}</div>'})const index = new Vue({el: "#index",data: {msg:''}});
</script>
</body>
组件-自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

Javaweb基础-vue

Vue.js Vue是一套用于构建用户界面的渐进式框架。起步引入vue <head><script src"static/js/vue2.6.12.min.js"></script> </head> 创建vue应用 <body> <div id"index"><p>{{message}}</p> </div>…...

编程日记 2024/10/21 6:50:27

一、数据库的操作 1. 显示当前的数据库 SHOW DATABASES;2. 创建数据库语法： CREATE DATABASE [IF NOT EXISTS] db_name [create_specification...];//create_specification包括：[DEFAULT] CHARACTER SET charset_name[DEFAULT] COLLATE collation_n…...

编程日记 2024/10/21 6:47:24

java集合进阶篇-《泛型》

个人主页→VON 收录专栏→java从入门到起飞目录一、前言二、泛型的简要概述三、泛型的基本概念类型参数： 通配符： 边界： 使用泛型的好处： 四、泛型类五、泛型方法六、思考七、疑惑一、前言泛型对于我来说又…...

编程日记 2024/10/21 6:45:22

pytorh学习笔记——cifar10（三）模仿VGGNet创建卷积网络

VGG16是由牛津大学视觉几何组（Visual Geometry Group）提出的一种深度卷积神经网络模型。 VGGNet 探索了卷积神经网络的深度与其性能之间的关系，成功地构筑了 16~19 层深的卷积神经网络，同时拓展性又很强，迁移到其它图片…...

编程日记 2024/10/21 6:43:20

题目：连续子序列

解题思路： 首先，不能使用暴力枚举，时间为O(n2)，超时。以下为正确做法： 假设找到一段区间（其和>m），如上图黄色部分，那么该区间加上i后面的元素形成的新区间和都>m&a…...

编程日记 2024/10/21 6:41:18

深入解析：Nacos AP 模式的实现原理与应用场景

优质博文：IT-BLOG-CN 一、CAP 基础 ‌Nacos作为注册中心同时支持CP和AP模式。‌ Nacos通过不同的协议和机制来实现这两种模式，以满足不同的需求场景。在Nacos中，默认情况下使用的是AP模式，通过Distro协议来实现。AP模式主要关…...

编程日记 2024/10/21 6:38:15

snmpnetstat使用说明

1.snmpnetstat介绍 snmpnetstat命令是用来查看snmp服务器的端口连接信息。 2.snmpnetstat安装 1.snmpnetstat安装命令： yum -y install net-snmp net-snmp-utils [root@logstash ~]# yum -y install net-snmp net-snmp-utils Loaded plugins: fastestmirror Loading mi…...

编程日记 2024/10/21 6:37:14

linux线程 | 同步与互斥 | 互斥（下）

前言：本篇文章主要讲述linux线程的互斥的知识。讲解流程为先讲解锁的工作原理， 再自己封装一下锁并且使用一下。做完这些就要输出一堆理论性的东西， 但博主会总结两条结论！！最后就是讲一下死锁。那么， 废…...

编程日记 2024/10/21 6:36:13

2024-10-17 问AI: [AI面试题] 讨论 AI 的挑战和局限性

文心一言 AI（人工智能）虽然取得了显著的进步，但仍面临多方面的挑战和局限性。以下是对AI挑战和局限性的详细讨论： 一、数据质量与可靠性数据质量：AI系统依赖于高质量的数据进行训练和学习。如果数据质量低劣或包含…...

编程日记 2024/10/21 6:34:09

go基础（一）

包声明引入包函数变量语句&表达式注释 package main//包声明import "fmt"//引入包 //函数 func main() {/* 这是我的第一个简单的程序 */fmt.Println("Hello, World!") }基础语法标记 go程序可以由多个标记组成，可以是关键字&#xff0…...

编程日记 2024/10/21 6:33:08

python忽略warnings 的方法

我在训练深度学习模型的时候一直出现这样的警告，但是不影响运行： UserWarning: Failed to load image Python extension: [WinError 127] 找不到指定的程序。 warn(f"Failed to load image Python extension: {e}") 要避免在 Python 程序运…...

编程日记 2024/10/21 6:31:04

2024年底蓝奏云最新可用API接口列表支持优享版无需手动抓取cookie

Lanzou Pro V1 接口列表 API状态版本路由获取文件与目录✅^1.0.1/v1/getFilesAndDirectories?url{}&page{}获取目录✅^1.0.0/v1/getDirectory?url{}获取文件✅^1.0.1/v1/getFiles?url{}&page{}搜索文件✅^1.0.0/v1/searchFile?url{}&wd{}依Id解析✅^1.0.2/v1/…...

编程日记 2024/10/21 6:30:03

Linux常用命令详细解析（含完整命令演示过程）

目录 1. 目录结构介绍 2. Linux命令基础 2.1 命令和命令行 2.2 格式 3. 常用命令 3.1 产看目录命令——ls 3.2 通配符 3.3 改变工作目录命令——cd 3.4 查看当前路径命令——pwd 3.5 创建新的目录命令——mkdir 3.6 创建文件目录命令——touch 3.7 查看…...

编程日记 2024/10/21 6:27:00

《使用Gin框架构建分布式应用》阅读笔记：p101-p107

《用Gin框架构建分布式应用》学习第7天，p101-p107总结，总计7页。一、技术总结 1.StatusBadRequest vs StatusInternalServerError 写代码的时候有一个问题，什么时候使用 StatusBadRequest(400错误)，什么时候使用 StatusIntern…...

编程日记 2024/10/21 6:22:56

014集——c#实现打开、另存对话框（CAD—C#二次开发入门）

如下图所示，运行后实现如下功能： 打开对话框，选择一个文件，并获取文件名变量。打开另存对话框，输入路径和文件名，获取另存文件名变量。部分代码如下： public static void Ofd(this Database…...

编程日记 2024/10/21 6:19:53

全面升级：亚马逊测评环境方案的最新趋势与实践

在亚马逊测评领域深耕多年，见证了无数环境方案的更迭与演变，每一次变化都体现了国人不畏艰难、勇于创新的精神。面对平台的政策调整，总能找到相应的对策。那么，当前是否存在一套相对稳定且高效的技术方案呢？答案是肯定…...

编程日记 2024/10/21 6:18:52

Java中的异步编程模型

1.什么是异步编程？ 异步编程是一种编程模式，允许程序在等待某些操作（例如文件I/O或网络请求）完成时，不必停下来等待，而是继续执行其他任务。当异步操作完成时，回调函数或任务调度器会处理结果&…...

编程日记 2024/10/21 6:16:50

opencv 按位操作

opencv位运算说明按位与，按位或，按位非，按位异或在 OpenCV 中，按位操作函数的接口一般包括两个或多个图像数组（矩阵）作为输入，常常还会有一个可选的掩码参数。下面我列出每个函数的具体接口…...

编程日记 2024/10/21 6:15:47

【Bug】STM32串口空闲中断接收不定长数据异常

Bug 使用标准库配置STM32F103C8T6的串口1开启接收中断和空闲中断，通过空闲中断来判断数据发送是否结束，收到数据后切换板载LED灯所接引脚电平，发现LED出现三种情况，熄灭、微亮、正常亮，但是LED灯所接的GPIO引脚为PC13…...

编程日记 2024/10/21 6:14:46

使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题

一、项目简介使用过ABP框架的童鞋应该知道它也自带了一款免费的Blazor UI主题，它的页面是长这样的： 个人感觉不太美观，于是网上搜了很多Blazor开源组件库，发现有一款样式非常不错的组件库，名叫：Radzen&am…...

编程日记 2024/10/21 6:13:45

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...

编程新知 2025/11/10 21:23:13

java 实现excel文件转pdf | 无水印 | 无限制

文章目录目录文章目录前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件总结前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...

编程新知 2025/9/18 22:35:44

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/10/21 3:46:44

C++ Visual Studio 2017厂商给的源码没有.sln文件易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/11/7 19:35:08

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2025/11/7 21:04:37

elementUI点击浏览table所选行数据查看文档

项目场景： table按照要求特定的数据变成按钮可以点击解决方案： <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

编程新知 2025/11/9 11:41:11

提升移动端网页调试效率：WebDebugX 与常见工具组合实践

在日常移动端开发中，网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时，开发者迫切需要一套高效、可靠且跨平台的调试方案。过去，我们或多或少使用过 Chrome DevTools、Remote Debug…...

编程新知 2025/6/10 21:08:23

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

编程新知 2025/11/9 17:09:18