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

Javaweb基础-vue

news 文章来源：https://blog.csdn.net/weixin_46899412/article/details/143085599 2025/5/6 7:15:15

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

Java入门4——输入输出+实用的函数

在本篇博客，采用代码解释的方法，帮助大家熟悉Java的语法一、输入和输出在Java当中，我们一般有这样输入输出： import java.util.Scanner;public class javaSchool {public static void main(String[] args) {Scanner scanner …...

编程日记 2024/10/21 6:10:42

《当尼采哭泣》

这是一个相互救赎的故事。故事铺垫比较冗长，看到一半的时候一度看不下去。直到看到最后两章才最终感觉值得一看。很多表层现象，就像露出水面的冰山。解决表面的问题，需要深挖冰山水下的部分。一个人碰到的最难解决的问题不在外部，…...

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

TOMCAT Using CATALINA——OPTS，闪退解决方法（两种）

【Java实践】安装tomcat启动startup.bat出现闪退问题_安装tomcat点击startup闪退-CSDN博客...

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

Android音视频 MediaCodec框架-启动编码(4)

Android音视频 MediaCodec框架-启动编码简述上一节我们介绍了MediaCodec框架创建编码器流程，编解码的流程其实基本是一样的，只是底层的最终的实现组件不同，所以我们只看启动编码流程。 MediaCodec启动编码从MediaCodec的start方法开始…...

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

# Go 语言中的 Interface 和 Struct

go package mainimport ("fmt" )// Girl 是一个接口，定义了所有"女性"类型都应该实现的方法 type Girl interface {call()introduce() }// Wife 结构体代表妻子 type wife struct {name stringage intyearsWed int }// call 方法…...

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

SSM与Springboot是什么关系？ -----区别与联系

SSM（Spring Spring MVC MyBatis）和 Spring Boot 都是基于 Spring 框架的技术栈，但它们在使用方式、配置复杂度以及设计理念上有所不同。下面是 SSM 和 Spring Boot 之间的关系及主要区别： SSM (Spring Spring MVC MyBatis) 定…...

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

MATLAB小波变换图像融合系统

二、应用背景及意义本课题利用小波变换进行图像的融合，然后对融合的结果进行图像质量的评价。所谓小波变换图像融合就是对多个的信息目标进行一系列的图像提取和合成，进而可以获得对同一个信息目标的更为精确、全面、可靠的高低频图像信息描述。并且也…...

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

nginx-安装和80端口映射多域名和ssl

一、安装所需插件 1、安装 gcc gcc是linux下的编译器，它可以编译 C,C,Ada,Object C和Java等语言。 yum -y install gcc 2、安装pcre、pcre-devel pcre是一个perl库，包括perl兼容的正则表达式库，nginx的http模块使用pcre来解析正则表达式。…...

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

SVN小乌龟 create patch 和 apply patch 功能

在SVN（Subversion）版本控制系统中，使用“小乌龟”（TortoiseSVN）这个图形界面工具可以极大地简化SVN操作。TortoiseSVN中的“create patch”和“apply patch”是两个非常有用的功能，它们与版本控制中的补丁&…...

编程日记 2024/10/21 5:59:30

#MySQL `SELECT` 语句执行流程详解

在数据库操作中，MySQL 的 SELECT 语句是用于查询数据最常见的 SQL 语句之一。理解它的执行流程对数据库优化和性能提升具有至关重要的意义。本文将详细解析 SELECT 语句从发出请求到返回结果的每个步骤，并结合 MySQL 的架构为您提供深度理解。 ## 1. 连接…...

编程日记 2024/10/21 5:56:26