Vgbire-CSDN博客

代码如下，在搜索时调用handleSearch方法，去实时更新下拉选择的选项数据。但是下拉选项没有因为搜索更新，打印搜索后的list结果，发现list确实更新了有数据，但是视图没有更新，显示为空。<a-select v-model="xxx" show-search placeholder="Please enter" :show-arrow="false" :not-found-content="null" @search="handleSearch"> &

2021-09-14 17:29:51 3146 5

原创 forEach return无效

今天在leetCode上刷第一道两数之和的算法题时，遍历nums数组时想用forEach，希望在找到两数和时返回结果并结束forEach循环，代码如下：var twoSum = function(nums, target) { const map = {} nums.forEach((item, index) => { if(map[target - item] === undefined) map[item] = index else return [map[t

2021-08-17 14:33:38 570

原创 Element el-table组件的show-overflow-tooltip的实现原理

Element el-table组件的show-overflow-tooltip属性可以让单元格的文本内容在超出单元格宽度的才显示tooltip

2021-05-05 12:19:17 3885

原创驼峰命名、短横线命名和下划线命名

5月限定文章

2021-04-25 11:30:12 3095

原创 Object.defineProperty使用爬坑

错误使用很多人刚开始使用defineProperty都会有的错误，看报错是调用栈满了为什么调用栈满了，因为你在get方法里面使用object.propery返回值的时候又触发了get方法，导致无休止的get方法调用而报错。set方法同理，那么怎么用呢？const object = { property: { a: 1, b: 2 }};let value = object.propertyObject.defineProperty(object, 'property'

2021-04-24 15:26:35 408

原创关于vue3.0+vite+jsx视图不会更新问题的解决

之前我的项目是vue3.0+webpack搭建的，但是vite2.0出来之后，我就想试试水把webapck替换成vite，毕竟vite启动太快啦。但是很快我就遇到了一个难以解决的问题，代码如下：<template> <xx :render="render"/></template><script lang="tsx">import { ref, defineComponent, h } from 'vue'export defaul

2021-03-22 09:59:57 2322 1

原创尾递归优化

1

2021-02-10 21:59:52 192

原创箭头函数直接返回对象的简写语法

// 菜鸟Vgbire今天才发现的语法，希望更多没注意到人这种简写方式的人看到[1,2,3,4].map(item => ({a: 1}))// 之前的写法[1,2,3,4].map(item => { return {a: 1}})

2021-02-03 14:48:07 1442

原创前端如何防止多次接口请求

结论如果你是为了解决在极短的时间内多个筛选条件同时变化导致的一次操作发送了多个一样的接口那么你可以给你的请求方法加一个100ms的防抖去解决多次请求发送的问题不要问为什么结论写在前面，因为我知道你没时间看为什么会有多次请求当你的数据获取需要筛选时，比如表格数据类的获取，为了方便用户，就会支持多个条件的筛选。比如常见的有时间筛选、类别筛选和其他一些业务相关的筛选，经常筛选条件会有3~5个。正常情况下我们需要收集这些筛选条件，当其中任意一个条件变化，调接口获取数据局部刷新表格。但复杂情况可能

2021-01-28 11:20:18 3735

原创 socket.io-client报404错误爬坑与自己封装websocket

socket.io-client最近在公司的项目里需要用到websocket通信。于是找到了socket.io-client库用于websocket通信。这让我调试了一天也没连上后端开启的websocket。但是用原生websocket去实现又可以正常和后端进行通信。...

2021-01-15 16:45:26 1798

原创 Vue3将弹窗封装到插件里调用

Vue2封装 Vue2封装弹窗插件比较简单快捷使用Vue.extend方法就可以了。import MessageDialog from './MessageDialog.vue'export default { install: Vue => { const DialogConstructor = Vue.extend(MessageDialog) const instance = new DialogConstructor() instance.$mount(document

2021-01-06 17:32:54 1185

转载分享8个非常实用的Vue自定义指令

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。批量注册指令，新建 directives/index.js 文件import copy from './c

2020-12-21 10:35:07 117

原创 Vue3 jsx组件绑定自定义的事件、v-model使用

绑定的事件名称前面加上on，事件名改为驼峰命名法并且首字母大写，拼接上前面的on即可绑定自定义事件。跟onClick绑定事件方式一致。举例：renderDropdown(h){ return <el-dropdown onVisibleChange={val => { console.log(val) }}> code... </el-dropdown>}...

2020-12-18 16:02:54 10148 8

原创 vue3.0 + vite搭建前端项目爬坑

1

2020-11-30 11:29:17 484 2

原创用C学数据结构与算法的感想

为什么当初会选择C语言学习数据结构Js在大多数情况下可以认为它的底层是C、C++实现的，因为谷歌浏览器V8引擎，也就是JS的运行环境就是C、C++写的。这里会有许多不同的看法，为什么我会提出这种观点，可以看我的博客【js是用什么语言编写实现的】。如果想看V8源码，可能会有一些帮助。可以了解更多关于内存的知识。包括堆栈、内存分配和释放这些。C的数据结构会在讲顺序表、链表、栈和队列这些数据结构的时候专注讲这些数据结构的实现。算法也在数据结构的实现过程中有所涉及。对于编程语言有了更深的了解，因为JAV

2020-11-28 13:58:31 332

原创 axios拦截器、中间件和发布订阅模式杂谈

'use strict';var dispatchRequest = require('./dispatchRequest');// 拦截器类function Interceptor() { this.handlers = [];}Interceptor.prototype.use = function uses(fulfilled, rejected) { this.handlers.push({ fulfilled: fulfilled, rejected: re

2020-11-22 21:25:00 861

原创重学前端html、css篇总结

标签大多数时候使用div和span进行开发也是没有任何问题的。语义化标签适合机器阅读。增强标签可读性。便于读屏软件读取。em表示强调ruby与rt、rp可以做音注的效果

2020-11-21 11:35:09 136 2

原创 window下自动进行前端构建并将构建的前端文件拷贝到指定的后端文件夹里面（个人记录）

方便用于将前端代码经过webpack打包后的文件替换掉后端相应文件夹下的前端资源。用作记录，因为每个项目的目录结构不同，以下shell脚本需要做出相应调整。windows系统使用，将以下脚本命令放进.bat文件执行即可。注意每一个分支都必须下载好node_modules不然执行npm run build无法构建。::关闭多余的输出@echo offecho 请输入前端分支名，以回车结束set /p from=echo 请输入后端分支名，以回车结束set /p to=::将分支名映射到.

2020-11-13 20:37:00 316

原创前端框架Vue如何渲染几千几万条数据（DOM）而不卡顿

首先介绍原生的js渲染大量DOM会出现的问题和解决方法一、以下代码会出现的问题会出现较长的白屏事件。<html> <head> <title>渲染会卡的代码示例</title> </head> <body> <ul>列表</ul> <script> // 插入十万条数据，渲染十万个DOM const total = 100000; let ul = doc

2020-11-11 23:28:07 12999 3

原创使用axios的onUploadProgress制作上传进度条--以及onUploadProgress的源码解读

今天早上刚接到上传视频要显示上传进度的需求。作为小白的我，脑子一热，这怎么写，我上传就上传了，我怎么拿到当前这个视频上传了多少数据，难道我还要和后端配合，在上传完成前在极短的时间间隔内例如5ms，不断告诉我当前上传了多少数据？后面网上找了一下，我还是太年轻了，axios竟然有现成的API onUploadProgress去帮你完成这么复杂的事情。onUploadProgress从名字就可以看出来，这是允许为上传处理进度的事件。他是axios的请求配置之一。const config = { .

2020-10-27 19:38:34 14916 14

原创重学前端JS篇总结

String类型有最大长度，长度为2^53-1对于0.1+0.2!==0.3的问题可以使用Math.abs(0.1+0.2<=Number.EPSILON)来解决，EPSILON时js的提供的最小精度常量Number、Boolean和String是两用的，当跟new搭配时，产生对象。直接调用，表示强制类型转换“ABC”.toString()，基本数据类型能调用方法是因为进行了装箱操作String，new Number(1)+2能进行运算是因为进行了拆箱操作，调用了valueOf()和toStr.

2020-10-18 16:43:45 140

原创 localStorage的数据为什么要用vuex维护——localStorage的读取性能

localStorage的读取是一次磁盘文件的读取

2020-10-12 14:31:40 2046

原创 vue实现一个指令用于鼠标点击一下就将内容复制到剪切板

Vue.directive('copy', { bind: function(el, binding, vnode) { el.onclick = function(){ // 兼容v-copy="copyText"与v-copy="{content: copyText, tip: '复制成功后提示给用户的message'}" const content = binding.value.content || binding.value const input = document.c

2020-10-12 13:48:06 423

原创 Axios cancelToken学习使用

参考axios官网官网的有点难理解，自己看官方文档也搞了好久才明白，以下是我的总结。axios发送请求时，添加cancelToken配置项可以用于取消请求，cancelToken的取值有两种方式axios有一个CancelToken属性，他是一个类，用于获取取消请求的cancel方法，获取了该方法之后就可以在合适的地方执行cancel()取消请求了。这种方式比较麻烦，但是可以用于取消多个请求，你可以将c这个取消请求的方法push进一个数组，然后在你需要取消多个请求的时候，循环这个数组，依次执行里.

2020-10-12 12:45:16 6523 10

原创让你的网页任意一处都变得可编辑

让你网页任意地方可以按你想要的进行编辑修改，包括按钮。感觉挺有意思的，记一下。以下两个命令任何一个命令都可以。document.body.contentEditable='true'document.designMode='on'

2020-09-08 20:02:48 401

原创 js的进制转换方式

十进制数字转其他进制的数字Number的toString() 方法返回指定 Number 对象的字符串表示形式。他有一个参数用于表示当前数字要转换成几进制的数字(从2到36)。如果未指定 radix 参数，则默认值为 10。注意这里转化后是字符串类型，可根据需要将其转为数字类型。// 转二进制var number = 12345number.toString(2) //"11000000111001"// 转八进制number.toString(8) //"30071"// 转十六进制

2020-09-03 17:26:30 524

原创前端笔记 --- undefined 和 null

undefined是一个全局变量而不是一个关键字Undefined是JS的数据类型之一，它表示变量声明了，但是没有初始化赋值的时候，这个变量的类型是Undefined。Undefined类型只有一个值那就是undefined。任何变量在没有赋值之前都是Undefined类型，值是undefined。一般我们可以使用全局变量undefined（名为undefined的变量）来表示这个值，或者使用void 0来表示。void 运算符通常只用于获取 undefined的原始值，一般使用void(0)（等

2020-08-31 00:42:20 645

原创输入url到页面显示中间的处理过程（笔记）

1、根据用户输入的url进行DNS解析，获取web服务器的IP地址。 2、然后与服务器三次握手建立tcp连接。 3、然后浏览器向服务器发送http请求。然后依次经过应用层、传输层、网络成、数据链路层、物理层到达服务器。 4、服务器响应请求,并发送对应的数据。 5、浏览器根据收到的html文档，构建DOM树和CSSOM规则树，然后合并为渲染树。这里排除了非视觉节点。比如script、meta和display为none这些节点。之后根据元素的尺寸、位置进行布局。最后进行color、背景颜色的

2020-06-22 15:47:23 248

Vue3.0 devTools谷歌调试工具--内网安装

空空如也