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

07.JavaWeb-Vue+elementUI

news 2026/1/9 5:28:57

1.Vue

功能替代JavaScript和jQuery，基于JavaScript实现的前端框架

1.1配置Vue

1.1.1引入vue库

方法一：通过cdn链接引入最新版本的vue（可能会慢些）

<head><script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

方法二：将vue库下载到本地，通过相对路径引入

<head><script src="js/vue/vue.js"></script>
</head>

1.1.2创建vue实例

<script>// 创建Vue对象new Vue({el: '#app',   //vue作用于指定的元素及其子元素data: {       //用来声明vue的属性、页面上需要的东西user:{    account:"",password:""}},methods:{        //元素触发的方法login: function (){console.log("账号"+this.user.account)console.log("密码"+this.user.password)//利用axios发送请求，then等同于ajax的successaxios.post("login",this.user).then(res =>{//res后台返回的结果console.log(res)})}}});
</script>

1.1.3创建vue模板

<div id="app"><p>{{ message }}</p>
</div>

{{message}}是一个模板表达式，它会被Vue实例的message数据所替代

1.2 axios

发请求的工具，作用与$.ajax一致

axios.post("login",this.user).then(res =>{//res后台返回的结果console.log(res)alert(res.data)
})

注意：axios数据提交的是一个字符串，ajax提交的是对象，可以加注解将字符串转换成注解

//@RequestBody将json格式的字符串转换为对象
public void login(@RequestBody User user){}

1.3 element-ui

基于vue的组件库，地址：(Element - The world's most popular Vue UI framework)

里面有很多已经做好的很好看的也好用的组件（按钮、输入框、开关。。。）

<div id="app"><el-row>
<!--        span指定当前行分几列--><el-col :span="6"><el-input v-model="user.account" placeholder="请输入账号"></el-input><el-input v-model="user.password" placeholder="请输入密码" show-password></el-input><el-button type="primary" icon="el-icon-delete-solid" circle></el-button><el-button type="primary" @click="login()" icon="el-icon-ice-cream-                       square" round>登录</el-button></el-col></el-row>
<!--    获取账号，并实时显示在页面-->
<!--    <p>{{account}}</p>-->
</div>

1.3.1配置使用环境

获取配置文件的地址：(UNPKG - element-ui)

1.在webapp中创建css/vue与js文件夹用来存储，vue中放一个element-index.css文件和一个fonts文件夹里面有两个字体相关文件，js中放一个vue文件夹里面有axios.min.js和elemant-index.js和vue.js

2.在页面head中连接这些文件，并配置vue

<head><script src="js/vue/vue.js"></script><script src="js/vue/axios.min.js"></script><link rel="stylesheet" href="css/vue/element-index.css"><script src="js/vue/element-index.js"></script>
</head>

3.创建elementUI的组件

<div id="app"><el-row>
<!--        span指定当前行分几列--><el-col :span="6"><el-input v-model="user.account" placeholder="请输入账号"></el-input><el-input v-model="user.password" placeholder="请输入密码" show-password></el-input><el-button type="primary" icon="el-icon-delete-solid" circle></el-button><el-button type="primary" @click="login()" icon="el-icon-ice-cream-                       square" round>登录</el-button></el-col></el-row>
<!--    获取账号，并实时显示在页面-->
<!--    <p>{{account}}</p>-->
</div>

4.创建Vue对象

要想使用elementUI的组件，还需要创建Vue对象

<script>//创建vue对象new Vue({el:"#app",  //vue作用于指定的元素及其子元素})
</script>

1.4 双向数据绑定

Vue.js框架实现的一项核心功能就是“双向数据绑定”，所谓双向数据绑定就是指View（视图）和Model（模型）的数据相互同步。（双向数据绑定通过v-model来实现）

1.4.1 v-model原理*

先为绑定的元素添加value属性，value与Vue实例中指定的数据绑定，再为元素添加一个事件监听器，当用户输入时触发并更新value值，从而更新Vue实例中的数据对象

1.4.2 延迟更新数据

通过v-model绑定的数据会在文本输入框改变时同步更新Vue数据对象，但我们一般想要的是用户输入完毕、光标离开输入框时再更新数据，这就要用到 .lazy修饰符

<input v-model.lazy="message" type="text">

1.4.3 将用户输入的值自动转为数值类型（Number）

<input v-model.number="quantity" type="number">

注意：如果用户输入的值无法转换为有效的数值，数据属性会变成NaN

1.4.4 删除文本输入框内容首尾空格

<input type="text" v-model.trim="message">

07.JavaWeb-Vue+elementUI

1.Vue 功能替代JavaScript和jQuery，基于JavaScript实现的前端框架 1.1配置Vue 1.1.1引入vue库方法一：通过cdn链接引入最新版本的vue（可能会慢些） <head><script src"https://cdn.jsdelivr.net/npm/vue">…...

编程日记 2023/6/10 2:17:15

经典面试题---【第一档】

1.如果你想new一个Quene，你有几种方式？他们之间的区别是什么？ 2.Redis 是如何判断数据是否过期的呢？ Redis 通过一个叫做过期字典（可以看作是 hash 表）来保存数据过期的时间。过期字典的键指向 Redis 数据…...

编程日记 2023/6/10 2:12:14

欧美同学会第三届“双创”大赛——空天装备产业赛区（浙江诸暨）正式启动，开启报名通道

6月8日，欧美同学会第三届“双创”大赛——空天装备产业赛区（浙江诸暨）启动仪式暨北京推介会圆满举行。活动由欧美同学会（中国留学人员联谊会）主办，中共浙江省委统战部支持，浙江省欧美同学会、中…...

编程日记 2023/6/10 2:07:13

python3 爬虫相关学习8：python 的常见报错内容汇总收集

目录 1 拼写错误 AttributeError: NameError: 等等 2 类型错误 TypeError: 如字符串连接错误 TypeError: can only concatenate str (not “int“) to str 3 意外缩进 IndentationError: unexpected indent 4 找不到对应模块 ModuleNotFoundError: 5 语法错误 Syntax…...

编程日记 2023/6/10 2:02:12

活跃主机发现技术指南

活跃主机发现技术指南 1.活跃主机发现技术简介2.基于ARP协议的活跃主机发现技术3.基于ICMP协议的活跃主机发现技术4.基于TCP协议的活跃主机发现技术5.基于UDP协议的活跃主机发现技术6.基于SCTP协议的活跃主机发现技术7.主机发现技术的分析 1.活跃主机发现技术简介在生活中有这…...

编程日记 2023/6/10 1:57:11

手机抓包fiddler配置及使用教程

本文基于Fiddler4讲解基本使用 fiddler抓包原理注意：Fiddler 是以代理web服务器的形式工作的，它使用代理地址:127.0.0.1，端口:8888。当Fiddler退出的时候它会自动注销，这样就不会影响别的程序。不过如果Fiddler非正常退出&…...

编程日记 2023/6/10 1:52:10

STM32单片机（四）第一节：OLED调试工具

❤️ 专栏简介：本专栏记录了从零学习单片机的过程，其中包括51单片机和STM32单片机两部分；建议先学习51单片机，其是STM32等高级单片机的基础；这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 ：适用于想要…...

编程日记 2023/6/10 1:47:10

自用的一些网址，码住！

京东羚珑智能抠图网站https://ling.jd.com/live/fm#all：主要用于商品抠图，而且还有多种直播背景设计，非常方便。国外的免费抠图网站https://www.remove.bg/zh/upload：有一个魔法棒的设计，可以自己选择抠图的范围和形状…...

编程日记 2023/6/10 1:42:09

银行vr元宇宙全景虚拟展馆提供更加真实、立体、高效的数字资产交易场景

为了贯彻国家普惠金融政策，使金融如无惠及广大群体,宇宙技术在金融行业中的应用将进一步提升金融消费体验感觉和金融管理水平。打造元宇宙金融服务平台，构建虚实结构的金融服务世界，培育和管理好数字机器人员工队伍，提升金融业务各…...

编程日记 2023/6/10 1:37:08

C++ 泛型编程类型萃取器的运用

C 泛型编程类型萃取器的运用一、C类型萃取器的基本概念与应用（Type Traits in C）1.1 类型萃取器的定义与作用（Definition and Role of Type Traits）1.2 类型萃取器的分类与特性（Classification and Characteristics …...

编程日记 2023/6/10 1:32:07

C++ String类（上篇）

绪论放弃时间的人，时间也会放弃他。——莎士比亚 ； 本篇章是关于string类内一些函数的介绍以及使用方法，都是我们编程必须掌握的基础！ 全文共7000字左右. 话不多说安全带系好，发车啦（建议电脑观看&…...

编程日记 2023/6/10 1:27:06

nested exception is java.lang.NoClassDefFoundError

出现这种问题，一般都是jar有问题，排查是哪个jar包，重新导入maven仓库一下就行了，有的时候需要把原来仓库里的包删掉，重新打包，有的时候要切换分支，到其他分支打包。打包时候没有打进去&#xf…...

编程日记 2023/6/10 1:22:05

科普：python怎么使用Pyinstaller模块打包成可执行文件

目录 1. 使用conda创建虚拟环境2. 列出所有虚拟环境查看是否创建成功3. 激活虚拟环境4. 安装Pyinstaller模块5. Pyinstaller模块常用参数6. 例子：Windows打包成单个文件并可使用命令行窗口并自定义文件logo 1. 使用conda创建虚拟环境创建个虚拟环境来打包&#xf…...

编程日记 2023/6/10 1:17:04

企业级应用高性能可扩展架构设计

前言马上又要618了，每年到了这个时候，商家就开始促销，价格低会吸引来超多用户，对系统来说就是更多的流量，技术上如何确保网站稳定运行，且不被超卖，同时还要让用户有个良好的购物体验。 12306…...

编程日记 2023/6/10 1:12:03

【安全架构】

概念安全是产品的属性，安全的目标是保障产品里信息资产的保密性（Confidentiality）、完整性（Integrity）和可用性（Availability），简记为CIA。保密性： 保障信息资产不被未…...

编程日记 2023/6/10 1:07:03

RabbitMq-高级

参考：https://blog.csdn.net/dingd1234/article/details/125032383 1 TTL TTL QUEUE 声明args TTL MESSAGE postmessage中设置区别：过期消息会直接删除消息，过期队列若配置死信队列会移到死信队列 ps：同时配置两个已小的为准 2…...

编程日记 2023/6/10 1:02:02

iOS App的打包和上架流程

转载：iOS App的打包和上架流程 - 掘金 1. 创建账号苹果开发者账号几种开发者账号类型个人开发者账号费用：99 美元/年（688.00元）协作人数：仅限开发者自己不需要填写公司的邓百氏编码（ D-U-N-S Number…...

编程日记 2023/6/10 0:57:01

Net6中遇到的一个很奇葩的问题

先来看一段代码，是控制台应用程序 internal class Program{static void Main(string[] args){Test().Wait();}private static async Task Test(){await Task.Run(() >{Debug.WriteLine("线程内输出");});Debug.WriteLine("线程外输出");}}执…...

编程日记 2023/6/10 0:52:00

2940. 花坛的最小改变次数

Powered by:NEFU AB-IN Link 文章目录 2940. 花坛的最小改变次数题意思路代码 2940. 花坛的最小改变次数题意略思路首先需要区间查询gcd，想到st表其次思路，固定左端点，二分右端点，找gcd与区间长度相等的右端点，个…...

编程日记 2023/6/10 0:46:59

安装源代码 QT 4.8.7

在centos7.9.2009 (Core)操作系统上，安装qt 4.8.7 查看centos版本：cat /etc/centos-release 安装g：sudo yum install gcc gcc-c g版本查看（gcc 版本 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC)）：g -v 先安装…...

编程日记 2023/6/10 0:41:58

MMaDA: Multimodal Large Diffusion Language Models

CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/1/9 4:22:10

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发下面是 Solidity 合约开发的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为以太坊（Ethereum）平台编写智能合约的高级编…...

编程新知 2025/12/11 1:32:07

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums，返回数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。请不要使用除法，且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48