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

Javaweb基础-vue

news 2025/7/7 7:18:29

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

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/7/6 4:35:02

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...

编程新知 2025/7/6 15:51:14

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用一、背景与挑战大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/7/6 16:35:20

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/7/6 21:13:12