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

07.JavaWeb-Vue+elementUI

news 文章来源：https://blog.csdn.net/LB_bei/article/details/131095371 2025/1/17 13:48:54

 

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&#xff0c;基于JavaScript实现的前端框架 1.1配置Vue 1.1.1引入vue库 方法一&#xff1a;通过cdn链接引入最新版本的vue&#xff08;可能会慢些&#xff09; <head><script src"https://cdn.jsdelivr.net/npm/vue">…...

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

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

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

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

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

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

编程日记 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抓包原理 注意&#xff1a;Fiddler 是以代理web服务器的形式工作的&#xff0c;它使用代理地址:127.0.0.1&#xff0c;端口:8888。当Fiddler退出的时候它会自动注销&#xff0c;这样就不会影响别的 程序。不过如果Fiddler非正常退出&…...

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

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

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

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

自用的一些网址，码住！

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

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

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

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

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

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

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

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

C++ String类（上篇）

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

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

nested exception is java.lang.NoClassDefFoundError

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

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

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

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

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

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

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

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

【安全架构】

概念 安全是产品的属性&#xff0c;安全的目标是保障产品里信息资产的保密性&#xff08;Confidentiality&#xff09;、完整性&#xff08;Integrity&#xff09;和可用性&#xff08;Availability&#xff09;&#xff0c;简记为CIA。 保密性&#xff1a; 保障信息资产不被未…...

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

RabbitMq-高级

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

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

iOS App的打包和上架流程

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

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

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

先来看一段代码&#xff0c;是控制台应用程序 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&#xff0c;想到st表 其次思路&#xff0c;固定左端点&#xff0c;二分右端点&#xff0c;找gcd与区间长度相等的右端点&#xff0c;个…...

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

安装源代码 QT 4.8.7

在centos7.9.2009 (Core)操作系统上&#xff0c;安装qt 4.8.7 查看centos版本&#xff1a;cat /etc/centos-release 安装g&#xff1a;sudo yum install gcc gcc-c g版本查看&#xff08;gcc 版本 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC)&#xff09;&#xff1a;g -v 先安装…...

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

PINN学习与实验之拟合sin(x)

首先给出数学上的知识。 1. 2. 3. 其次给出PINN最基础的理解与应用说明。 1.PINN中的MLP多层感知机的作用&#xff1f; 答&#xff1a;目的是用来拟合出我们需要的那个 常微分方程&#xff0c;即函数逼近器。 2.PINN中物理信息的作用&#xff1f; 答&#xff1a;用于约束MLP反向…...

编程日记 2023/6/10 0:36:56

Java中进制转换的两种方法你知道吗？

目录 十进制转其他进制 其他进制转十进制 实战&#xff1a; A进制转B进制 关于大数运算可以参考躲不掉的高精度计算&#xff0c;蓝桥杯必考_高精度算法在哪些比赛考_无忧#的博客-CSDN博客 十进制转其他进制 使用 Integer.toString(int n,int radix) 方法&#xff0c;该方法…...

编程日记 2023/6/10 0:31:55

Qemu搭建ARM Vexpress开发环境

Qemu搭建ARM Vexpress开发环境 文章目录 Qemu搭建ARM Vexpress开发环境Qemu简介QEMU安装前的准备工作QEMU 安装的两种方式通过网络在线安装源码编译安装源码获取QEMU依赖库安装编译安装 命令选项qemu的标准选项qemu显示选项网络属性相关选项kvm的网络模型 Ubuntu 双网卡&#x…...

编程日记 2023/6/10 0:26:54

JMM如何实现volatile写/读的内存语义

内存屏障类型表 StoreLoad Barriers是一个“全能型”的屏障&#xff0c;它同时具有其他3个屏障的效果。现代的多处理器大多支持该屏障&#xff08;其他类型的屏障不一定被所有处理器支持&#xff09;。执行该屏障开销会很昂贵&#xff0c;因为当前处理器通常要把写缓冲区中的数…...

编程日记 2023/6/10 0:21:53

Smali的使用技巧：快速定位Android应用程序中的关键代码

简述 Smali是一种Android应用程序的Dalvik虚拟机指令集汇编语言&#xff0c;用于编写和修改应用程序的DEX文件。通过编写和修改Smali代码&#xff0c;可以实现对Android应用程序的定制化和逆向分析。Smali语言类似于汇编语言&#xff0c;直接操作Dalvik虚拟机指令集。 Smali代…...

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

04_两种常见的网页反爬措施及应对方法

一、封禁IP地址反爬 1、应对思路： 理解这种反爬方法的含义：当我们用自己电脑的ip地址短时间，高频率访问某个具有此类反爬设置的网站，这种网站就会把我们的ip地址封禁，一般都是封24小时或者其他时间。解决方案：通过代理ip访问，这种方式只不过就是让你有了重新访问网页的…...

编程日记 2023/6/10 0:11:51

安装docker环境，并制作docker镜像

docker环境安装 进入linux虚机后&#xff0c;安装docker环境&#xff0c;制作docker镜像并运行&#xff0c;进入运行中的容器&#xff0c;查看挂载的日志或报告 1.安装docker sudo curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 2.使用docker仓库安装…...

编程日记 2023/6/10 0:06:50

MySQL数据库 – node使用

1 MySQL查询对象 2 MySQL查询数组 3 mysql2库介绍使用 4 mysql2预处理语句 5 mysql2连接池使用 6 mysql2的Promi 这里仅说明如何使用服务器连接数据库并进行操作。 预处理语句就是可以输入变量的语句&#xff08;表现形式是有符号&#xff1a;&#xff1f;&#xff09;。需…...

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

JAVA使用HTTP代码示例模板

以下是一个使用Java发送HTTP请求的示例代码&#xff1a; java import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; public class HttpExample { public static void main(String[] args) { try…...

编程日记 2023/6/9 23:56:48

elementui tree 支持虚拟滚动和treeLine （下）

​ 由于我之前没有发布过npm 包&#xff0c;这里还得现学一下。 参考资料&#xff1a; 链接: 如何写一个vue组件发布到npm&#xff0c;包教包会&#xff0c;保姆级教学链接: vue组件发布npm最佳实践 按照上面的步骤&#xff0c;我通过 vue-sfc-rollup 生成了项目&#xff0c;…...

编程日记 2023/6/9 23:51:47

做校园文化展览的网站/国外网站设计

文章目录切比雪夫近似值是什么常见函数的近似值切比雪夫近似值是什么 计算机计算正弦余弦等函数&#xff0c;都不太可能直接泰勒级数展开&#xff0c;因为太耗费计算资源了。除非特殊需要&#xff0c;一般都是使用切比雪夫近似值计算的。当然更不可能用割圆术&#xff0c;割圆术…...

编程日记 2025/1/17 13:20:04

淮安专业做网站/短视频运营是做什么的

Description 采油区域 Siruseri政府决定将石油资源丰富的Navalur省的土地拍卖给私人承包商以建立油井。被拍卖的整块土地为一个矩形区域&#xff0c;被划分为MN个小块。 Siruseri地质调查局有关于Navalur土地石油储量的估测数据。这些数据表示为MN个非负整数&#xff0c;即对每…...

编程日记 2025/1/17 12:30:09

新兴县城乡建设局网站登录/推广普通话的宣传内容

平时用Python做web开发&#xff0c;上传图片是难免的&#xff0c;但直接拿PIL的函数来处理&#xff0c;总感觉有点繁琐&#xff0c;能不能封装些功能函数&#xff0c;让web上传处理图片更简便些。看了壑塥峈的《使用PIL调整图片分辨率》&#xff0c;得到了启发&#xff0c;他写…...

编程日记 2025/1/17 12:23:58

wordpress wp_query 排序/seo技术培训广东

160160液晶屏MSP430F169程序和电路图。 以MSP430F169作为控制的核心芯片&#xff0c;控制LCD160160液晶屏显示。 可以成功显示图片&#xff0c;数字、字母和汉字。 LCD160160具有显示面积大&#xff0c;显示内容多&#xff0c;功耗低等优点。 部分电路图如下。 共同学习 q…...

编程日记 2025/1/17 11:11:32

做电商网站要服务器吗/百度高搜

背景&#xff1a;java后台服务请求python服务端 java服务报错&#xff1a;Unexpected response status&#xff1a;307 python服务端报错&#xff1a;307 Temporary Redirect 解决&#xff1a;查了好久找不到什么原因&#xff0c;请求路径问题 请求url&#xff1a;http//:w…...

编程日记 2025/1/17 7:55:09

有域名有服务器如何做网站/免费发布信息网站大全

cv2.RETR_TREE的输入参数是用于指定要检索的模式&#xff0c;它可以是cv2.RETR_EXTERNAL(仅检索外部轮廓)、cv2.RETR_LIST(检索所有轮廓&#xff0c;但放入一个列表中)或cv2.RETR_TREE(检索所有轮廓&#xff0c;并重建嵌套轮廓的完整层次结构)。...

编程日记 2025/1/17 6:45:19