![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 62
三月.暖阳
努力优秀,大方拥有。
展开
-
vue造轮子完整指南--npm组件包开发步骤
前端npm造轮子指南,vue造轮子指南,npm包发布指南原创 2023-09-26 19:51:00 · 1634 阅读 · 0 评论 -
JS过滤筛选树形JSON数据,filter递归实现路由菜单的筛选
js过滤筛选树形结构数据 filter方法递归获取路由菜单数据原创 2022-08-07 16:50:46 · 3033 阅读 · 1 评论 -
季度选择组件和上下半年度选择组件的功能实现
季度选择组件的实现;上下半年度选择组件的实现原创 2022-07-14 20:22:48 · 1557 阅读 · 0 评论 -
el-table实现自定义列表功能
el-table列表实现自定义列表功能,实现自定义排序,自定义列表展示,自定义列宽等原创 2022-06-01 19:16:02 · 5508 阅读 · 4 评论 -
input输入框和select选择器“结合”使用
input输入框和select选择器结合使用实现既可输入内容模糊搜索也可选中具体选项进行精确搜索(基于element组件库实现)原创 2022-04-07 16:05:00 · 18393 阅读 · 0 评论 -
element的el-table表格和el-pagination分页相结合使用
element表格和分页使用技巧原创 2022-04-02 14:22:12 · 7432 阅读 · 2 评论 -
浅析vue中的混入(mixins)
vue中的混入(mixins)原创 2022-03-31 20:21:13 · 2947 阅读 · 0 评论 -
el-from表单在v-if、v-show和自增、自减表单项的时候,会出现表单校验异常或者串项的异常解决办法
el-from表单在v-if、v-show和自增、自减表单项的时候,会出现表单校验异常或者串项的异常解决办法原创 2022-03-27 14:41:54 · 1648 阅读 · 0 评论 -
echarts案例资源大总结和echarts的高效使用技巧(细节版)
全网echarts案例资源大总结和echarts的高效使用技巧原创 2022-03-25 10:10:43 · 3036 阅读 · 0 评论 -
v-model的双向数据绑定实现原理(附:案例和项目实例)
一. 前言。相信对使用vue框架的童靴来说,v-model的使用都能信手沾来,熟悉的不能再熟悉,也都知道v-model其实是个语法糖。不过其究竟是怎么实现的双向数据绑定,很大一部分童靴还是心存疑虑。本文就根据最简单的案例和基于实际项目中最常用的实例来从两个角度讲解v-model的前世今生。二. v-model的前世今生。目前的几大主流MVC(VM)框架都实现了单向数据绑定。简而言之,vue中的v-model无非就是在单向数据绑定的基础上给对应表单元素(input、select等)添加了(in原创 2022-03-11 17:25:08 · 17006 阅读 · 0 评论 -
密码校验密码正则校验,密码表单校验总结
js密码校验,密码正则校验,密码表单校验。原创 2022-03-08 16:21:47 · 6129 阅读 · 2 评论 -
js实现年月加减月份的计算(纯原生实现当前年月n月前和n月后的年月)
js实现年月加减月份的计算(纯原生实现当前年月n月前和n月后的年月)原创 2022-02-28 15:14:28 · 1979 阅读 · 2 评论 -
阿里icon小图标在vue中的教学使用(两种主流方案)
1.小图标的前世今生。曾几何时,H5开发还是以雪碧图作为小图标的一种处理方案;然而,随着时间迁移,在当今前端开发环境中,icon小图标的使用率越来越高,需求越来越精致。虽然Element、Iview、Vant等组件库也相应提供了一些自带的icon图标,可是在追优的PM眼中,高大上的icon小图标才是其所想要的。本着专业人做专业事的心境,挑选和使用最优,最好的小图标就成了前端开发们的一种准则。2.阿里巴巴 -- iconfont。在众多icon小图标的资源站中,阿里巴巴的iconfont无疑是其中原创 2022-02-16 09:43:06 · 9393 阅读 · 2 评论 -
开源项目 CDN 加速服务站合集:除了BootCDN,你还知道其他免费的前端开源项目 CDN 加速服务吗
开源项目 CDN 加速服务站合集原创 2022-02-11 15:56:05 · 2978 阅读 · 0 评论 -
ECharts案例大全(最新版),含各种案例,实例。
前言:2022年2月以前,ECharts官网除了提供官方案例外,还额外提供了一个ECharts案例资源丰富的强大社区MakeA Pie来展示各类的ECharts案例。这对于广大开发者,特别是前端页面仔们来说简直是个福音网站。然后,现在却因无人维护,该社区被停用了。 这一停用无疑给广大ECharts使用者们带来一阵阴影(ps:要是遇上复杂的ECharts图标需求,那不得每次都是重头画起。呜呜~~) 方法一:不过不要慌张,本着遇到问题就解决问题的干劲,社区动力大佬为大家重新整理了一份几乎和原MakeA...原创 2022-02-07 14:44:57 · 35915 阅读 · 34 评论 -
JS经典排序之冒泡排序和快排,入门级手写实现。
1.虽然前端在实际工作中较少用到算法体系,不过最基本的数组排序还是得知道下,特别是冒泡排序和快速排序,这两种排序也是在面试中高频出现,所以本文就以动画和手写的方式来展示这两种最基本的数组排序算法。2.话不多说,直接上正菜。冒泡排序let arr = [23, 56, 520, 920, 888, 666]; // 冒泡排序(写法一) function mp1(arr) { if (arr.length < 2) { return a原创 2022-01-14 17:24:21 · 3876 阅读 · 0 评论 -
JavaScript的深浅拷贝解析及手写深拷贝实现
1. 说到JavaScript的深浅拷贝,那么必然得从其‘源头’说起----JavaScript的两大数据类型(基本数据类型和引用数据类型)。基本数据类型的特点:数据直接存储在栈中。 引用数据类型的特点:存储在栈中的是对象的引用,而真实的数据存放在堆内存中。基本数据类型:String、Number、Boolean、Null、Undefined、Symbol、BigInt。 引用数据类型:Object。 2. 深浅拷贝的区别。浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对原创 2022-01-13 20:36:37 · 438 阅读 · 0 评论 -
el-date-picker组件实现特定日期禁用(例如:只能选取当前日期(含)和以后的日期)。
禁用当前日期之前的日期(只能选择今日到今日之后):<el-date-picker type="date" placeholder="请选择时间" :picker-options="pickerOptions" v-model="ruleForm.date" :clearable="false" ></el-date-pi原创 2021-12-30 10:52:54 · 2694 阅读 · 0 评论 -
element的table表格多选结合分页实现已选中的记忆功能和实现表格数据和已选数据动态同步更新
1.先上效果图:1-1.一开始无数据(相当于新增):1-2:一开始有数据(相当于编辑):2.主要实现逻辑:借助element组件的table表格的selection-change方法(ps:element组件的table表格)结合分页组件,自行定义一个用于存储当前页的已勾选数据,一个用于存储所勾选的所有数据(也就是右侧展示已勾选数据),及一个标志位来实现。3.具体代码实现:3-1:HTML结构:A:图示:B:......原创 2021-12-01 12:01:45 · 2720 阅读 · 0 评论 -
moment.js在vue中的使用及时间插件moment.js的常用时间格式总结
1.前言:本文仅针对时间插件moment.js在vue中结合elm组件的基本使用及最常见的几种时间格式总结,可视为‘cv’大法的精髓之作(极大提高开发效率,算了,直接说懒吧,即贴即用);不作深入,有需深入moment.js的同学可自行前往它的官网http://momentjs.cn/学习。2.使用篇:2-1:实际开发中一般都是结合element或者iview等组件库的日期组件使用。所以使用moment.js前请自行安装引入这些组件库(太过简单,这里不作累述)。2-2:第一步,需要使用mome原创 2021-09-13 16:37:41 · 6663 阅读 · 2 评论 -
iview表单的校验类型,类型不同导致校验异常的解决。
1.iview表单的校验类型默认是字符型,所以在一些情况下,对于input框或者是InputNumber框时,因其是数值。所以会导致无法校验的异常。例如以下案例.2.所以要处理这一异常(非常反人类);就得给对于的校验字段设置对应的类型。3.更多校验字段的类型说明,可前往iview官网和表单的rules字段说明查看明细。iview的form表单。form表单的rules字段类型详解...原创 2021-07-27 11:30:16 · 1084 阅读 · 0 评论 -
Js的节流和防抖讲解及手写实现(基于通俗易懂案例说明)
1.众所周知,JavaScript的节流和防抖是很多面试官都喜欢问的问题(更有甚者会让面试者简易手写出对应的主要实现过程和步骤).这里就此讲解下最简而易懂(大佬勿喷)的一种方法和其说明.2.节流和防抖的概念:A.节流概念: 事件(节流体内的函数)触发后每隔一段时间(节流体内的定时器时间) 触发一次,可以触发多次.B.防抖概念: 事件(防抖体内的函数)动作完成后的一段时间(节流体内的定时器时间)** 后触发一次**.3.未加节流和防抖的案例(代码和执行效果): function move(){原创 2021-06-08 10:42:12 · 245 阅读 · 2 评论 -
当select组件的选择项数据量过大时的处理方法
问题来源及发生场景: 正常使用elm组件库的secect选择器组件时;对应的下拉选项的options数组都是由后端返回的数据;此时如果该数据是成千上万条的时候;select组件会因为加载数据显得异常的卡原创 2021-05-26 21:07:04 · 4345 阅读 · 2 评论 -
vue前端分页,后端未做分页将所有数据统一返回,前端基于Vue和Elm组件库的分页实现(纯前端分页)
先上效果图.(后端接口请求一次,返回所有(1000条为例)数据,前端拿到所有数据处理分页).使用情形: A.正常情况下,前后端分离的项目,对于表格类数据多的情况,都是由前端传当前页的页码和当前页的容量大小给后台,后台拿到这些字段进行分页返回数据(即前端动一页就发送一次请求拿到当前页的数据,这部分应用太过简单,这里不再累述). B.特殊情形下,后台不处理分页,只会在请求的时候一下将所有数据一起返回,这时候就需要前端同学自己处理分页了(本文针对的就是这种情形下的一种处理方式,仅供参考,大佬勿喷)...原创 2021-05-19 10:56:05 · 1859 阅读 · 10 评论 -
swiper在vue中的基本使用及常见问题解决
1.说明:本文针对的环境是vue2及swiper6以下版本.另:本文只适合教小白如何在vue中使用swiper,并不会把swiper的api都码一遍,了解更多swiper详情,请移步swiper官网.这里只是最简单的入门教程.大佬勿喷.2.废话不多说,先上效果.3.开始:3.1: 安装依赖.npm install vue-awesome-swiper --save(注意:如果安装后,启动项目报Module not found: Error: Can’t resolve ‘swiper/dist原创 2021-04-21 10:21:27 · 1056 阅读 · 0 评论 -
JS获取当前年月份的每一天,获取当前月的每一天日期等
1.先上效果图:2.有时候我们的需求需要展示当前月份的每一天,比如以下的echarts需求:那此时就可以很好的得到了.代码部分:data() { return { dataArr: [] //当前年月的每一天数组 }; }, methods: { /*获取一个月的天数 */ getCountDays() { let curDate = new Date(); let curMonth = curDate原创 2021-04-02 16:30:48 · 1422 阅读 · 0 评论 -
ECharts在vue中的使用方式,动态获取数据并重新渲染.
ECharts在vue中的使用及ECharts案例大全原创 2021-04-02 15:24:23 · 24780 阅读 · 5 评论 -
vue中axios的封装使用(简易封装),统一API接口管理
1.在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。更多详情,请移步axios官网.2.话不多说,先上完整代码链接.GitHub代码(如因网络等原因打不开GitHub,请移步码云代码).3.整体结构示意图:4.主要步骤:4.1: 安装axios依赖:npm install axios4.2:s...原创 2021-04-01 16:03:39 · 736 阅读 · 0 评论 -
vue的路由和多级菜单的联动及布局,结合element组件的el-menu的实现.(后台管理系统的基础路由,菜单及页面)
1.话不多说,先上github整体demo代码链接:git整体demo代码2.效果图:3.说明:此demo并未做路由权限控制,只是vue-router结合element组件库的Layout 布局和NavMenu 导航菜单实现基础后台系统的单级和多级菜单的联动.4.主要代码文件说明:5.主要文件代码展示(重点部分均有注释):1. 路由(router-index.js):import Vue from "vue";import VueRouter from "vue-ro..原创 2021-03-31 17:12:49 · 3020 阅读 · 1 评论 -
iview组件库表单中upload组件的校验及upload上传文件个数的限制;自定义上传(多用于未提供action上传地址的时候使用).
1.iview中的upload组件置在form表单中时,自定义校验规则实现.(注重点: 1.给upload组件加上对应的ref用于获取上传文件的fileList; 2.给upload组件双向绑定v-model值,和定义uploadList变量用于表单校验.)<FormItem label="sim文件:" prop="sim"> <Upload ref="upload" v-model="formValidate.si原创 2021-03-24 14:23:30 · 3569 阅读 · 0 评论 -
input框只取正整数,非负数等整理(以element组件库el-input组件在vue中常见的几种取值筛选为例)
1.限定取值为非负整数(可输入0和正整数)限定:<el-input style="width:300px" v-model.number="value" type="number" clearable placeholder="请输入非负整数" min='0' onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"></原创 2021-03-08 16:25:34 · 1945 阅读 · 0 评论