0、前端知识体系想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走,其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端,为实现成为“互联网Java全栈工程师”再向前迈进一步。0.1、前端三要素HTML(结构):超文本标记语言(Hyper Text Markup Language),决定网页的结构和内容CSS(表现):层叠样式表(Ca
新增标签(列举)
a. <header> 标记定义一个页面或一个区域的头部
b. <footer> 标记定义一个页面或一个区域的底部
c. <nav> 标记定义导航链接
d. <menu> 菜单列表
e. <section> 标记定义一个区域
f. <aside> 标记定义页面内容部分的侧边
这是一个注册需求,要求用户在注册的时候需要填写注册信息并上传“营业执照”等信息。表单内容需进行验证及必填项提示,图片需要和信息一起传递且图片载入后需可预览。既然是注册我们当然是用form表单来提交了,对应的ElementUI组件标签则是el-form。 表单数据从上面的图可以看出注册环节分为了两部分数据,左边是注册时需求提交的表单信息,右边是需求上传的图片。先来解决左边的表单数据,el
转载
2024-05-11 17:27:04
96阅读
➢ 需求默认都是必选下拉选择的时候选择必填,活动名称为必填,需要校验和显示*选择非必填,活动名称不做校验,隐藏*➢ 初始校验规则经测试,网上其他的方式都没有实现需求,动态切换rules中的required没有作用因为按照以下的写法的话,element-ui在组件初始化后校验规则就定型了,切换也没用rules: {
name: [
{ required: true, mess
转载
2024-04-23 11:00:13
2219阅读
vue和elmentUI的使用心得 使用customClass来覆盖样式。调整宽度。 二、elmentUI组件宽度自适应。 1.table: table通过min-width=‘100%’,来设定整个table的宽度,再利用min-width=“?%”来调整每一列的宽度,之和应该等于100. 2.form:form如果使用:inline=true,则不能设置自适应宽度,要想使用一行两列的话可以使
转载
2024-04-09 11:27:29
759阅读
1、纯输入框使用方法一:oninput =“value=value.replace(/[^\d]/g,‘’)” //只能输入数字oninput =“value=value.replace(/[^0-9.]/g,‘’)” //只能输入数字和小数<el-input
v-model="sjje"
oninput ="value=value.replace(/[^0-9.]/g,
转载
2024-03-06 08:39:20
7704阅读
大家好,我是大澈!本文约1600+字,整篇阅读大约需要3分钟。1. 干货速览对于正则表达式,不知道大家有没有这么一种感觉。就是在学的时候,感觉特别会,但到了用的时候,还得要老老实实去搜。至于原因呢,我想了想,主要还是因为平常用的次数少。所以每当上阵用的时候,总感觉白学了。但其实呢,在项目中真正会用到正则的情况,也就那么几种。于是,为了后期再用到正则时,能提高效率,我把最常用的一些情况整理了下来,以
elementui手动校验数字为整数<script>export default{ data(){ return { let checkNum = (rule,value,callback) => { if(!value) { return new Error('必填信息
转载
2023-02-24 11:46:37
539阅读
elementUI <input type="number">时候样式取消
【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结,感谢你的阅读和关注,希望我的博客能帮助到更多的人,分享获取新知,大家一起进步! 吾等采石之人,应怀大教堂之心,愿你们奔赴在各自的热爱中…本篇是Vue+elementUI的
转载
2024-07-25 07:56:21
194阅读
最终效果如下 实现要求:如果输入的内容不是非负整数,那么提示报错,并且将值变为输入前的内容;如果输入正确,则当输入的内容发生改变并且失去焦点以后,触发事件,重新获取列表;实现思路使用原生的input框,更容易控制;当输入框获取焦点以后,保存原始值;监听回车点击事件与change事件,判断输入的值是否满足条件: 如果满足条件,那么就根据输入的内容更新内容,并且重新获取列表内容;如果不满足条件,
转载
2024-04-02 14:30:05
283阅读
组件化思想 第三方组件应用Element-UI:http://element-cn.eleme.io/element集成:vue add element组件使用:创建一个登陆表单并可以校验用户输入 Element表单 提交 使用时我们要先导入Form、FormItem、Inputimport { Button,Form,FormItem,Input }
转载
2024-03-07 21:31:33
66阅读
input表单验证
原创
2022-03-10 09:44:58
506阅读
input表单验证
原创
2021-09-01 09:40:07
785阅读
我们一般在后台系统中,很常见的操作时表格里面嵌套表单,之前我的网上找到了一些封装的用法:<el-form :model="formData" :rules="ruleData" ref="formDom">
<el-table :data="formData.tableData">
<el-table-column
v-for="item in
转载
2024-09-21 14:06:08
203阅读
本文是我学习 ElementUI 源码的第六篇文章,上一篇文章学习了 ElementUI 中 InfinityScroll 组件的实现,这篇文章来学习一下 ElementUI 是如何实现 Pagination(分页)组件的。分页在网页中是非常常用的功能,如何制作分页组件也是前端工程师需要掌握的一个技巧。组件效果ElementUI 的分页组件提供的功能比较丰富,除了常规的翻页功能外,还提供了跳页、设
转载
2024-08-20 21:27:06
78阅读
Input 为受控组件,它总会显示 Vue 绑定值。 通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。 基本例子: <el-col :span="6"> <div> <el-input v-model="input1" place ...
转载
2021-07-19 16:43:00
916阅读
2评论
1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number="testValue" type="number"> .number可以实现限制数字输入,但是会有以下问题:会出现type="number"自带样式,当然可以通过添加以下css清除/* 普通IE浏览器 样式清除 */
input:
转载
2024-07-21 02:34:52
3105阅读
vue推荐在绝大多数情况下使用模板来创建html,但是在一些特殊的场景,需要JavaScript的完全编程的能力,这个时候就可以使用渲染函数,比模板更接近编译器 vue在生成真实的DOM之前,会将所有的节点转换成VNode,而VNode组合在一起形成一颗树结构,就是虚拟DOM(VDOM)template中的html最终也会使用渲染函数生成对应的VNode可以使用JavaScr
1 Vue练习1.1 练习:根据不同元素,展示不同的网址<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习vue路由</title>
<script src="vue/vue.js"></script>
<
转载
2024-10-12 19:25:12
143阅读