- 博客(46)
- 收藏
- 关注
原创 vue3和vue2 之 provide/inject 用法区别 ---vue3组件间通讯2
provide/inject 主要用于父组件和子孙组件间通讯,简单的父子组件间传值还是使用props、emits或是defineProps、defineEmits、defineExpose比较方便。父组件中提供数据,并在其后代的组件树,无论层级有多深,都可以中注入这些数据,从而实现了组件之间的数据传递。不用在父传子,子传孙,孙传重孙等数据传递了(解决了Prop 逐级透传问题)
2024-04-02 10:05:51
678
1
原创 vue之 h() 函数
Vue在生成真实的DOM之前,首先会将节点转换成VNode,而VNode组合在一起形成一颗树结构,就是虚拟DOM(VDOM),最后VDOM才渲染成真实的DOM;如果我们直接编写生成vnode的代码,效率会更高,这里我们就是h()函数。h函数我们也可以称为createVnode函数,是用于创建 vnode 的一个函数;h函数接收三个参数。例:()=>h('h1',{class="classsName"}, '大家好!')
2023-09-19 20:49:23
1311
原创 VS Code终端系统启动失败的问题
各种各样打不开,有的配置一下就可以了,有的改成管理员权限就可以了,我的是怎么设置都不行,安装了最新版本的不行,又退了几个版本才行了,1.56版本内网行,1.55版本能行,比这高的版本都不行。
2023-08-15 16:28:03
1817
原创 react-codemirror2 编辑器需点击一下或者延时才显示数据的问题
现象: 组件的数据已经赋上值的情况下,初始状态不渲染数据,需要点击编辑框获取焦点后才展示,或者延迟了几秒才显示出来。解决:1. 手动引入自动刷新的插件 2. 配置一下参数。
2023-08-10 19:19:20
1484
原创 defineExpose 、defineProps、defineEmits --- vue3组件间通讯1
1. defineExpose子传父(用在子组件,暴露想传递的值或方法,父组件通过ref属性获取子组件暴露的)2. defineEmits 子传父(用在子组件,将子组件的方法传递给父组件,用来声明emits)3. defineProps 父传子(用在子组件,接收父组件的传值,用来声明props)
2023-06-09 17:26:09
9446
2
原创 vue 中的 $ (持续更新...)
1.`${}`模板字符串;2. $是vue的命名规则,增强区分的,来说明这是内置的实例方法属性。自定义的就不要带$了。
2023-05-19 15:17:01
2936
原创 reduce函数及其用法
reduce()方法对数组中的每个元素按序执行一个由您提供的reducer函数,每一次运行reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。即:1. 为数组的每个值从左到右执行提供的函数;2. 将数组缩减为单个值(函数遍历整个数组后的结果)。
2023-04-27 19:42:11
975
原创 文件上传---FormData格式的传参
一般前端做 文件导入功能 / 上传功能 的时候会用到Formdata的格式,来上传文件和数据。会比较常用的两种方式:1. 直接表单传值可以使用FormData.append来添加键/值对到表单里面;2. 后端的多部分传参和后端接口保持统一,那么可能不全是表单格式的数据,可能设置的不同的格式,比如文件格式的文件和数据格式的数值,因此需要带格式传过去(new Blob方法)。
2023-04-26 14:32:07
7414
原创 数组去重,对象去重,数组对象去重
数组去重1.双层循环+splice 2.forEach+indexOf (利用对象属性key排除重复项)3.new Set(数组)4. filter()+indexOf()5.reduce() +includes;数组对象去重1.双层循环2.for循环+新数组3.利用对象属性4.reduce()5. Map()对象数组的去重,大多是在数组去重的基础上处理的
2023-04-25 18:16:01
1478
原创 判断两个对象数组是否有相同元素,对象数组合并去重
1.循环判断arr与arr2是否有相同元素,相同的添加isdelete:false字段,不同添加isdelete:true。2.循环判断arr与arr2是否有相同元素,不同的使用arr2里的元素。3. 判断arr与arr2合并去重。
2023-01-31 17:14:05
1466
2
原创 判断一个值是对象还是数组,数组或对象判空,判断数组或对象中是否包含某个值
1. 通过es6的一个方法Array.isArray()判断2. 通过 instanceof 运算符判断3. 通过 constructor 属性判断
2023-01-30 15:10:59
1676
原创 Vue2 传值(父子传值,provide/inject传值,vuex传值)
vue组件间通讯有什么方法: 1) 使用props、$emit 传值 (prop向下传递,事件向上传递;$emit触发父组件的自定义事件) 2) 使用provide、inject 传值 3) 使用bus.js (通过定义公共实例文件来进行非父子组件之间的传值) 4) 使用vuex 父子组件间传参,用props、$emit 比较便利好用; 跨组件传参,用provide/inject ,vuex
2022-12-08 16:27:43
3463
原创 IP和端口的格式校验(正则表达式)
IP地址:/^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/端口:/^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
2022-11-11 14:36:11
1729
原创 react hooks-页面实时刷新2(useRequest)
页面能够实时刷新,归根结底是用了定时器的原理1. 用setTimeout直接实现 ->react hooks-页面实时刷新(setInterval)2. 用封装好的hook函数实现 (useRequest)useRequest 轮询通过设置 options.pollingInterval,进入轮询模式,useRequest是一个强大的异步数据管理的 Hooks。
2022-11-10 19:40:11
2227
原创 react传值(父子传值,context传值,redux传值)
总述: 组件间通讯有什么方法: 1)使用props传值 2) 使用context传值 3) 使用redux传值 非跨组件传参,以上传参方式都可用,比较常用也好用的是跨组件传参,使用props一层层往下传,使用context,或者用redux 。
2022-10-24 17:35:27
3387
原创 vue页面基本用法
app这个变量会代理vue中的data数据,访问data中的数据时,直接app.name就可以了若后台修改数据,页面就会自动绑定改变。vue的各个指令操作...
2022-09-13 16:04:49
610
原创 Vue与React的异同
react中数据发生变化(调用setstate时),render函数就会执行,重新生成一个新的虚拟dom, 就会遍历 diff 当前组件所有的子节点子组件,新旧比较,得出差异然后渲染。vue组件中数据发生变化,会触发setter,由于vue组件中数据的getter的作用,收集了依赖,setter触发会根据这些依赖,生成新的虚拟dom,然后对比新旧虚拟dom进行渲染。...
2022-08-25 20:31:16
1370
原创 react hooks-页面实时刷新(setInterval)
页面实时刷新一般用定时器(setInterval())实现1. 页面使用定时器一定要记得清除。2. useEffect 的数组依赖不要忘记,不然只执行一次。3. 也可以使用useRef(为了避免setInterval变量形成闭包).........
2022-08-10 16:13:57
7986
原创 js 鼠标点击元素复制指定的内容
鼠标点击元素复制指定的内容,使用了Dom原生的API,document.execCommand(commandStr),该方法允许运行命令来操纵可编辑内容区域的元素。
2022-07-07 19:09:15
1140
原创 查看和导出 .html/.csv/.xls/.zip等类型的文件(前端从后端接受文件流来实现)
1. 查看html报告用XMLHttpRequest(客户端的一个 API)实现 去学习XMLHttpRequest --->通过XMLHttpRequest提供的方法实现页面的预览查看。const openReport=(fileId:string)=>{ const reqUrl = `/api/gsQueryWdr/download/${fileId}`; const token = localStorage.getItem('authori......
2022-05-28 16:30:38
1520
原创 react前端导出pdf(设置边距)
大体思路:html转换成canvas后生成图片导出pdf jspdf用法:将一个图片列表导出为pdf文件,根据图片宽高计算在pdf中的位置。1. 用到2个插件html2canvas:html转canvasjsPDF:canvas生成pdf(使用Javascript语言生成PDF的开源库)
2022-04-29 15:11:14
3379
5
原创 纯前端导出ecxel(用插件和不用插件[原生js])
一般的,下载excel是后端放到服务器上,然后读取文件流,然后给接口,前端直接就下载。一、用插件npm install -save js-export-excel1. 引入插件2. 定义导出的模板(表头、数据等)3. 定义导出的文件名二、用原生js实现(没有插件)将table标签,包括tr、td等对json数据进行拼接,通过将json遍历将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件
2022-04-21 19:37:58
3415
原创 bug:select组件多选时value不起作用
注意下面两点就解决了,费了半天的功夫,才发现多选的value会去option对象中去检测,然后显示选择的内容,如果传入的不是对象,就会导致找不到,value就不起作用了1.多选时value为 string[ ]2.存储选择的value时,不能只存储选择的值,而是整个对象 ItemProps[ ]interface ItemProps { label: string; value: string;}value起作用的代码:import { Select, Spa...
2022-03-22 15:49:27
1080
原创 upload组件多个文件上传、自定义文件列表显示及手动上传
1.多选和单选1)由multiple属性来控制2)保存state时,注意存的List内容即可//参数uploadProps={ name:'file', //接口入参名 accept:'.gz', //接受上传的文件类型 action:document.location.prot+'//'+location.host+'/apis', //接口url headers:{ authorization:localStage.getItem('
2022-03-17 16:06:26
4417
原创 js 数组集合和区间集合的相互转化
需求:总核:16 已用核:['1', '3-5', '8'] 求未用的核数即 :求 ['0', '2', '6-7', '9-15']思路:1. 将总核、已用核都转化成数组形式2. 从总核数组中删除已用核,得到未用核数组3. 将未用核数组转化成区间集合实现:...
2022-02-22 16:56:08
814
原创 自定义hooks实现监控页面高度
实现一个简单的功能,监听页面高度,把他维护未公共组件,其他想使用的组件都可调用。1. 和写功能一样,写好这个功能的代码逻辑。 只要注意use开头,最后导出即可import React, { useState, useEffect,useCallback } from 'react'// 自定义hooks,要以use开头function useWinSize() { const [size, setSize] = useState({ heig...
2021-12-31 17:58:08
686
原创 对高阶组件和自定义hook的理解
有时候我们会想要在组件之间重用一些状态逻辑。目前为止,有两种主流方案来解决这个问题:高阶组件和render props。自定义 Hook 可以让你在不增加组件的情况下达到同样的目的。每个组件间的 state 是完全独立的。Hook 是一种复用状态逻辑的方式,它不复用 state 本身。事实上 Hook 的每次调用都有一个完全独立的 state —— 因此你可以在单个组件中多次调用同一个自定义 Hook。...
2021-12-18 14:57:47
1117
原创 js 截取字符串里的IP和port
例如:str = 192.168.12. 2541. 用 ip和port 的正则let ip_reg = /([\d\.]*)/gi;let ip =ip_reg.exec( str );ip=ip[0] let port_reg =/.+:(\d{1,5})/let port=str.match(port_reg);port= port[1]2. 一步到位let ipPort=str.match(ip_reg)ip=ipPort[ 0 ];p..
2021-11-20 17:14:25
4985
原创 antd表单 Form.Item,Form.List 的自定义数据格式
1. 常用格式{ }表单内容:<Form> <FormItem name={'name'} lable={'用户'} > <Input placeholder='请输入'/> </FormItem> <FormItem name={'ip'} lable={'IP地址'} > <In.........
2021-10-23 14:51:19
4557
2
原创 Too many re-renders. React limits the number of renderers to prevent an infinite loop...
原由:页面是一个 ip 区间,在区间后面显示 一组数据是否都存在区间内的,都存在显示√,部分存在显示 ×,并显示不存在区间内的 ip页面崩溃的代码://页面<Row> <ipInput> </Input> { seeError(value)? <span> √ </span> : <span> × <Popover ..
2021-10-22 09:29:04
3832
原创 TypeScript高级类型-Partial、Required、Pick、Omit、Readonly
Partial (部分的; 不完全的)ts中就是让一个定义中的所有属性都变成可选参数,参数可以变多也可以少。我们定义 一个user 接口,如下interface IUser { name: string age: number department: string}经过 Partial 类型转化后得到type optional = Partial<IUser>// optional的结果如下type optional = { name?: strin...
2021-10-11 19:51:18
5274
原创 TextArea禁止输入空格和回车
在textarea 里面,空格和换行会被保存为/s和/n,如果我们前台输入和前台显示的文字都是在 textarea 里面,其实并不需要做任何处理,你在 textarea 里面编写的样式会按照你之前编辑时候的样式,正确的显示出来。那么,如果要 textarea 编辑提交的文字,从后台返回之后,不是显示在 textarea 里面,那么就需要考虑处理空格和换行了;这个情况可以看看下小朋友的博客,写的很赞 处理textarea中的换行和空格 - 下小朋友 - 博客园又或是......
2021-09-27 18:00:16
7855
2
原创 TypeScript - 泛型 总结
本文搬运于TypeScript中文网:https://www.tslang.cn/docs/handbook/generics.html目录一个例子!! 泛型变量一个问题,报错了! 泛型约束 使用泛型函数 泛型接口 泛型类一个例子!!创建一个identity函数:这个函数会返回任何传入它的值。不用泛型:function identity(arg: number): number { return arg;}或者,使用any类型来定义函
2021-09-04 17:52:23
189
2
原创 form表单遇的坑(react)
1.Modal 中直接调用 form 控制台会报错因为在调用 form 方法时,Modal 还未初始化导致 form 没有关联任何 Form 组件。通过Form.useForm对表单数据域进行交互。注意useForm是React Hooks的实现,只能用于函数组件,class 组件通过ref获取数据域。const [ form ] = Form.UseForm( )<Form form = {form} // form的控制实例 name ...
2021-08-18 16:57:54
1850
原创 TypeScript 是什么,以及它的一些基础语法
TypeScript 是 JavaScript 的运行时,带有编译时类型检查器。JS与TS的关系:四. 基础语法1. TS 的基本类型:2. 原语:3. 数组:4. 对象:5. 函数:6.空值void7.联合类型:8. 类型断言:9. 元组 Tuple:10. 枚举 enum:11.any:12.字面量类型+联合类型
2021-08-14 14:57:50
407
原创 多个接口顺序调用,实现方式的进化
场景:假设有4个异步方法要按顺序调用1. 嵌套调用为了顺序调用接口,出现多重嵌套,也就出现了俗称的 “回调地狱”; ajaxA("xxxx", ()=> { ajaxB("xxxx", ()=> { ajaxC("xxxx", ()=> {ajaxD("xxxx", ()=> { //处理dataXXXXXXX})...
2021-08-05 15:28:22
2808
3
原创 react-router 跳转原理及用法
1. 为什么使用react-router路由是提升用户体验的重要一环,当需要页面切换而又不想重新加载新页面的时候,就需要用到路由。同时还可以增强组织资源的语义,每个页面的业务功能都是高内聚,低耦合的,通过url就可以将页面进行很好的隔离。2. react-router的基本原理一句话:实现URL与UI界面的同步。其中在react-router中,URL对应Location对象,而UI是由reactcomponents来决定的,这样就转变成location与components之间的同步...
2021-07-27 21:02:47
3597
原创 react 纯前端实现数据分类、并可搜索
功能描述:把无序的数据按英文字母排序显示,实现搜索分类不变排序功能实现:搜索功能实现:代码实现:/* * 对以下数据按字母顺序排序 */let fruit = [ { 'name': '苹果', 'value': 'Appel', 'LienItems': [{ 'itemName': '苹果派',
2021-07-24 22:22:44
1274
2
原创 TypeError: arr[Symbol.iterator] is not a function
我们可以通过将类数组(array-like)对象转换为数组来绕过它。该对象将具有一个length属性,其元素必须可以被索引。我们来看一个例子:Array.from()方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。https://www.cnblogs.com/jf-67/p/8440758.htmlhttps://blog.csdn.net/weixin_36706903/article/details/86153740...
2021-07-17 14:33:10
1772
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人