web前端
文章平均质量分 56
前端收藏
Jay丶萧邦
uview维护组成员;LOL全能型混子;Jay&Vae的忠实粉丝;骑电车贼6的前端攻城狮;未完待续...
展开
-
关于Failed to load local image resource /pages/test/undefined 这件事
错误原因主要在于我们在urls为空对象的时候, this.urls[field]必然会得到一个undefined,那解决方法就很简单了。今天在写代码的时候,遇到了一个小问题,因为之前此错误没有遇见过,故特此记录一下!其实并不影响页面的显示,但是错误就比较显眼,得想办法解决一下!2. 先对this.urls进行是不是空对象判断。1. undefined,那就给个空字符串;3. v-if解决下。原创 2024-07-26 15:40:10 · 300 阅读 · 0 评论 -
记录:如何快捷的从一个对象中取出几个属性组成新的对象
以上这些,其实都可以实现,但是吧,往往在实际的开发中,字段会很多,如果遵照上面的写法吧,行倒是行,就会搞得代码很长,就想再简化简化,于是乎,今天介绍的方法就来了!lodash的pick()方法与omit()的方法;至于安装lodash这些不再说了或者看这个。原创 2023-11-23 15:55:33 · 382 阅读 · 0 评论 -
关于slot-scope已经废弃的问题
确实写了这api已经是废弃了,那就按它的说法,我们去使用v-slot,至于关于v-slot怎么用,这里就免了吧,毕竟谁还没用过插槽。因为使用了element-ui的组件库,所以在使用组件的时候往往就cv大法了,直到今天用webstorm写代码是,提示了如下的错误。说起来啊,这个问题啊,我之前一直没关注,还是webstorm给我的警告。我这一看,这不行啊,赶紧去查文档。第三种改法:还可以用解构。原创 2023-08-22 14:02:38 · 3250 阅读 · 3 评论 -
el-date-picker:选择日期的限制
element-ui作为vue的龙头ui组件库,深受前端开发者的喜爱。本文着重记录如何使用el-date-picker日期选择器,怎么去限制选择日期。先上官网链接---原创 2023-03-31 14:47:11 · 5795 阅读 · 1 评论 -
Vue3:自定义指令以及简单的后台管理权限封装
说起这个自定义指令的使用场景,我第一反应就是,后台管理的权限管理,要问我为什么?就是ruoyi系统用多了😂;本篇就聊聊vue3的自定义指令以及若依的管理权限封装。如果对vue指令还是有点懵,不清楚这是vue哪一块的知识,v-if,v-show,v-for总用过吧?没错,指令说的就是它们,这些都是vue内置的指令,同时vue还允许我们注册一些自定义的指令。既然作为指令,当然有它的一些规则,那么指令的规则就是以v字母开头的驼峰变量,当然这是在中可以这么写。在没有使用。原创 2023-02-24 16:13:15 · 4230 阅读 · 0 评论 -
Vue3:有关v-model的用法
提起v-model,想必都不陌生,作为vue的经典语法,帮助我们在编写项目的时候,省了很多很多的事情,本文着重记录v-model在组件上的绑定使用!在默认的情况下,组件的都是使用modelValue作为自己的prop,使用update:modelValue作为对应的更新事件,有时候我们需要去改动一哈!基本规则就是,自定义的prop:xxx, 对应的更新事件:update:xxx, 组件上就变成了v-model:xxx的写法,下面以value举例原创 2023-02-23 15:26:49 · 6327 阅读 · 1 评论 -
Vue3+Lodash:2023年了,我依然在使用Lodash
前两天,在水群的时候,发现居然有人不知lodash,这可把我吓了一跳,lodash难道都不被前端人所知了吗?Lodash官网。原创 2023-02-17 14:40:19 · 10060 阅读 · 0 评论 -
vue3:直接修改reative的值,页面却不响应,这是什么情况?
今天看到有人在提问,问题是这样的,我修改了reative的值,数据居然失去了响应性,页面毫无变化,这是什么情况?本着好奇心害死猫的原则,我就看了下,我直呼好家伙!原创 2023-02-15 15:02:02 · 3229 阅读 · 0 评论 -
uniapp:手把手写一个模糊搜索
模糊搜索的功能是很常见的一个功能,但是在写uniapp移动端项目时并没有发现很好用的组件之类的,所以决定自己小小的造一手,其实早在以前写过一个类似的功能并发布在了插件市场,但是回头再看时,感觉不太行。之后也会发布在插件市场,如果没有bug的话😁;原创 2023-02-09 16:37:28 · 2473 阅读 · 0 评论 -
vue3:安装配置sass
对于前端开发人员来说,css预处理的语言已经是家常便饭了,如sass,less等等,那么在vue3中该如何去使用sass呢?首先看个最基础的页面,木有任何的样式,接下来将一步一步的添加样式!原创 2022-10-11 15:30:08 · 13707 阅读 · 1 评论 -
vue3:如何使用@符代替 ./src
【代码】vue3:如何使用@符代替 ./src。原创 2022-10-10 16:13:48 · 4648 阅读 · 0 评论 -
推荐神器npm包(serve):如何不利用后端正式服务,看前端项目的正式运行
大多的情况下,我们在使用了vue也好,react也罢,项目要上线了,前端人员往往都会进行项目打包,执行build命令,会得到一个dist包或者build包,只需要把这个包交给后端人员,部署到正式服务器即可,但是有时候我们想先看看这个build出来包,能不能正常的运行什么的。在左侧可以看到有一个dist文件夹,这是我运行build命令后,得到的,是要交给后端人员放置到正式服务器上的包。现在就到我们刚才安装的serve包登场了,我们在当前dist目录下,运行cmd,输入serve,会看到如下界面。......原创 2022-08-03 11:14:47 · 1417 阅读 · 0 评论 -
JavaScript:更改this指向——call,apply,bind的用法
在上篇文章中已经记录了,在JS中关于this关键字的指向问题,那么本文就来记录一下,如何去更改this指向,以及ES6的箭头函数!上篇文章:JavaScript:一文搞懂this关键字指向_Jay丶千珏的博客-CSDN博客目录提出问题1. call,apply,bind——无额外参数传递1.1 call无额外参数传递用法 1.2apply无额外参数传递用法 1.3 bind无额外参数传递用法 小结2.call,...原创 2022-05-16 17:58:50 · 421 阅读 · 0 评论 -
JavaScript:一文搞懂this关键字指向
在JS中,this的指向会随着执行的环境不同,从而指向不同的对象,本文就是对this关键字指向来一波总结,以便那些,对于this指向比较迷的前端人目录1. 单独使用,this表示全局对象1.1 即使在严格模式下,this也依然表示全局对象2. 在function函数中2.1 常规模式2.2 严格模式3. 在对象的属性方法中,指向当前所处的对象3.1 常规模式3.2 严格模式4. 在html中,指向接收事件的html元素总结1. 单独使用,this表示全局.原创 2022-05-13 15:01:46 · 622 阅读 · 1 评论 -
vue3:组件通信v-model式写法
v-model作为vue中一个非常出色语法糖,帮助我们在开发的过程中省略了很多的麻烦,在进行组件通信的过程中,我们也可以用v-model帮助我们进行一些省事的操作!首先说一下我的需求,子组件是一个输入框,每在子组件中输入一段话,父组件中就多一条记录,我采用了element-plus的UI组件库,大概页面是长这个样子!做法有很多种,这里为了展示v-model的用法,我采用了在子组件中把数据组成数组,再返回至父组件,父组件直接渲染即可,先看看正常的采用props,emit的写法正常的采用pro.原创 2022-03-28 21:08:40 · 3898 阅读 · 1 评论 -
懒人必备:使用vue ui创建vue项目
工作的时候,大量的时间都是在思考需求,编写代码的,除了新起项目的时候,我们需要去创建一个项目,但是这个时候出现了一个尴尬的问题,创建vue的项目命令忘记了,这可咋办?我给安利一个,虽然很多人吐槽程序员用这玩意创建项目,你是看不起我吗?我倒是觉得啊,一个创建项目而已,怎么都行,管他黑猫白猫逮着老鼠就是好猫!1. 安装vue-cli这种就不说了,找到你要创建项目的目录,打开cmd,输入vue ui这个时候你的浏览器就会自动打开http://localhost:80002.点击创建...原创 2022-03-25 20:54:10 · 8551 阅读 · 4 评论 -
ES11:空值合并操作符(两个问号)&& 可选链操作符( ?. ) 真的挺好用的
在es11中,增加了我最喜欢,也在工作中经常使用的语法 空值合并操作符 和 可选链操作符,可能还有人是第一次知道,或者是看别人的代码写过,但是却不知道这语法叫什么,有什么作用?这篇文章已经帮你记录了!空值合并操作符(??)空值合并操作符是一个逻辑操作符,当左侧的值为null或者是undefined时,返回右侧的值,否则返回左侧的值举例:let name = null ?? '小明'let age = undefined ?? 18console.log(name) //小明co原创 2022-03-18 12:59:59 · 770 阅读 · 0 评论 -
Vue:自定义指令的简单用法以及自定义指令模块化
Vue中除了核心的默认指令集外,Vue是允许注册自己的自定义指令。请注意,在 Vue 2.0 中,代码重用和抽象的主要形式是组件 - 但是在某些情况下,您需要对普通元素进行低级别的 DOM 访问,这也是自定义指令仍然有用的地方指令是有五个钩子函数的!1. bind指令第一次绑定到元素上;只调用一次;可以做相关初始化的操作;2. inserted被绑定的元素插入到其父元素节点时调用;3. update当所在组件的VNode更新时调用;但是update和VNode的更新顺序不定,所原创 2022-03-17 11:00:39 · 526 阅读 · 0 评论 -
JS:随机生成一段字符串;随机生成布尔值;在两个数字中生成一个随机数
随机生成一段字符串在开发的过程中,有时候我们需要去生成一段随机字符串的场景,就拿我上篇文章举例,我们需要将图片上传到oss,对图片进行重新命名的操作比如 项目名称/模块名称/年/月/日/随意的字符串.图片格式 ,那这里的的随机字符串就需要我们出马了,我提供两种我自己经常使用的:1. 对随机字符串有一定的长度要求的,必须是16长度的字符串等等,len为我们设置的随机字符串长度,32应该够用了吧。。。function getGuid(len = 32, radix = null) {原创 2022-03-16 11:35:34 · 914 阅读 · 0 评论 -
关于async / await的异常捕获
ES6的语法在前端的工作中已经是很常见了,对于promise的应用相信也应该是或多或少有了一些认知,此文主要记录的是关于异常捕获这块的内容测试的方法 httpTest(status) { return new Promise((resolve, reject) => { setTimeout(() => { if (status === 'success') { resolve({ code: 200, msg: '操作成功' }); }原创 2022-03-11 14:43:05 · 9351 阅读 · 9 评论 -
Element UI: u-input控制只能输入整数
在平常的工作中,写表单是不可或缺的一项,关于一些值,我们只想填入整数,比如年龄,但是当我们设置type为number的时候,发现可以输入小数,这就有问题了,那么本篇就是用来记录如何设置输入整数,话不多说,直接上代码,提供了三种方法,应该够用吧?<template> <div class="home"> <el-form :model="ruleForm" :rules="rules"> <!-- 1. 使用v-model.number原创 2022-02-17 10:55:27 · 4895 阅读 · 0 评论 -
抓包神器Charles
我们在开发网站项目的时候,我们可以通过浏览器的debug模式来看request以及response的数据,那么如果我们开发移动端项目没有网页呢?如何抓取数据呢? 前几天有个做服务端的师弟跟我说他不用抓包工具,遇到问题直接debug代码,那我问他,如果线上服务的话,你怎么调?在实际项目中,没有遇到跟客户端相互扯皮的事情吗?我觉得很正常啊,客户端说他没问题,服务端也说他没问题,到底谁有问题?这时候没...转载 2022-01-27 10:16:25 · 189 阅读 · 0 评论 -
vue:前端压缩图片上传
网上关于vue前端压缩图片后再上传到的代码很多,大家可以一试~compressImage.js文件// 压缩图片export function compressImage({ file, config = {}, fileName }) { const read = new FileReader() read.readAsDataURL(file) return new Promise(function (resolve) { read.onload =原创 2022-01-19 14:03:47 · 1193 阅读 · 2 评论 -
js 数组内删除某个对象(或确定该对象索引值)
开发的过程中,我们会经常下面的业务需求,比如,我们有一个数组,数组内包含是对象,我想删除数组内的某个对象,那么我肯定会去选择splice的方法,那么我就需要知道我想要删除的对象的索引值,那么本文就是记录改如何去获取索引值! let arr = [ { id: 1, name: "小a" }, { id: 2, name: "小b" }, { id: 3, name: "小c" }, { id: 4, name: "小d" }, ];原创 2022-01-02 21:59:42 · 4458 阅读 · 0 评论 -
vue 基于eleui的自定义穿梭框Transfer
最近在写公司业务的时候,有需要用到transfer的业务场景,但是ele给的穿梭框组件并不是很符合期望要求,故自己基于eleui手写了一个穿梭框;效果如下:具体代码如下,给大家一个参考!<template> <div class="hello"> <div class="transfer"> <!-- 左侧列表 --> <div class="card"> <div cl.原创 2021-12-30 13:53:07 · 1540 阅读 · 0 评论 -
关于服务端返回值和前端需要值不对应时的操作
在开发的过程中,我们时常能够遇到,服务端响应的返回值并不是前端想要的,那么这个时候常见的方法就是:1. 前端字段更改与后端字段保持统一2.前端进行数据重组,已达到目的方法1就不多说了,老老实实改就完了,重点说说方法2。第一种数据重组(可能这种最常见的):第二种方法:第三种方法:大概就是这三种方法,其实实现的结果都一样,但是在方式2 ,方式3种用到了es6的解构赋值方法,方式3中,在解构赋值的过程中同时还赋值给了新的变量,看各位的各自的习惯吧,加油,打工人!...原创 2021-12-22 17:49:08 · 1194 阅读 · 0 评论 -
ES6 Class类的继承
引用菜鸟教程的一句话在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。class 的本质是 function。它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。下面我们来看示例1.我们首先去新建一个父类 Person,有三个属性值,分别是 name,age,like,有一个方法getMsgclass Person { // 构造函数,必选 constructor({原创 2021-06-29 11:34:30 · 283 阅读 · 0 评论 -
vuex 进阶篇 (4)getters的使用
紧接上篇,本片主要讲讲vuex 中 getters的使用,示例中使用了vuex的modules,getters的使用与vue组件中computed中使用类似,再学习的过程中,注意举一反三1.设置gettes 事件index.jsdict.js我们在index.js中设置了两个getters事件,在子模块dict.js中设置了两个getters事件2.使用调用<template> <div> <div> <di原创 2021-06-28 13:50:19 · 978 阅读 · 0 评论 -
vuex 进阶篇 (3)actions的使用
紧接上篇文章,本篇文章讲vuex ,如何去改变state ,actions的使用,我依然使用了vuex的modules1.设置actions事件index.jsdict.js2.在组件中去分发actions<template> <div> <div> 改变vuex index.js 下的state <div> {{ $store.state.userInfo.name + "--原创 2021-06-25 17:33:12 · 1106 阅读 · 0 评论 -
vuex 进阶篇 (2)改变state mutations的使用
紧接上篇文章,本篇文章讲vuex ,如何去改变state ,mutations的使用,我依然使用了vuex的modules1. 设置改变state的mutations事件index.jsdict.js2.提交mutations事件(常用的两种方法)<template> <div> <div> 改变vuex index.js 下的state <div> {{ $store.stat原创 2021-06-25 16:55:14 · 578 阅读 · 0 评论 -
vuex 进阶篇(1)取值
关于vuex的介绍我就不说什么了,没接触过的同学请直接移步vuex官网:vuex官网本篇博客主要介绍vuex的取值,可能有的前端人还未用过vuex中的modules模块,这里也一并介绍,话不多说直接上代码1.首先这是我的目录结构,index.js不必多过介绍,modules是分的模块,dict就是我用来存放字典的一个状态管理,我们需要在index.js中的modules中引用,否则无效;index.jsdict.js建议在modules下的文件下,加上namespaced:true.原创 2021-06-25 16:10:21 · 2527 阅读 · 0 评论 -
js 数组,根据数组内部的对象中的某个属性值进行分组
工作期间,遇到了一个问题,将let data = [ { value: 'A组小明', group: 'A' }, { value: 'A组小红', group: 'A' }, { value: 'A组小刚', group: 'A' }, { value: 'B组小蓝', group: 'B' }, { value: 'B组小天', group: 'B' },原创 2020-12-03 16:03:46 · 6329 阅读 · 0 评论 -
关于微信小程序二维码,条形码的问题
条形码,二维码是我们生活中很常见的东西,那么在本文中我就来给大家详细的总结一下,事先声明,我是用的taro框架写的微信小程序1.只需要有条形码,二维码显示的情况,样式参考微信小程序的乘车码小程序,只需要有一个二维码显示即可! 在taro框架中,有一个非常简单粗暴的UI组件taro-code,先用一下方法下载yarn add taro-code# ornpm instal...原创 2019-09-05 17:51:54 · 3718 阅读 · 0 评论 -
JS中的深拷贝和浅拷贝
为什么要使用深拷贝和浅拷贝在使用JS的过程中,我们有时候想要去备份一份原引用数据,但是我们会发现,当我们改变原数据的值时,会发现我们备份的数据也会跟着发生变化,而我们想要的是互不干扰的两份数据,比如两份相同的电脑文档,是一个独立的个体,修改其中一个,另外一个并不会因此受到影响。下面是举例。例: // 原数组arr1 var arr1 = [1, 2, 3, 4]; //...原创 2019-04-08 21:02:43 · 220 阅读 · 0 评论 -
原生JS 实现轮播图效果
轮播图的实现轮播图是我们在浏览网站的时候很常见的一个部分,比如小米商城,京东商城等等,轮播图可以使网页见面变得非常漂亮,所以学习JS的时候,轮播图是必不缺少的一部分。我在此分三个部分,html,css,js。HTML部分:<!DOCTYPE html><html lang="en"><head> <meta charset="...原创 2019-04-01 20:52:54 · 316 阅读 · 0 评论 -
JS轮播图的实现
轮播图的实现轮播图是我们在浏览网站的时候很常见的一个部分,比如小米商城,京东商城等等,轮播图可以使网页见面变得非常漂亮,所以学习JS的时候,轮播图是必不缺少的一部分。我在此分三个部分,html,css,js。HTML部分: <!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2019-03-16 10:59:12 · 981 阅读 · 1 评论 -
WebStorm的破解与安装
1.首先在官网上下载webstorm。链接地址:http://www.jetbrains.com/webstorm/2.下载完成后,我们要进行webstorm的安装。在选择安装路径的安装界面时,默认的是安装在C盘下,这里我们需要根据自己的计算机配置,选择安装的路径,这里我把它安装在E盘下。3,一路点击next ,下一步,安装install,然后运行webstorm,会到此界面...原创 2019-03-16 10:21:02 · 4248 阅读 · 2 评论