- 博客(102)
- 收藏
- 关注
RSS订阅原创 vue3自定义指令实现输入框值范围大小限制
组件，在其他ui库使用，需更改自定义指令里面的代码，找到input输入框就行了。组件上使用，这里用的是element-plus里面的。
2025-03-11 19:22:03
327
原创 vue-router查漏补缺
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。类似，因为它在每次导航时都会触发，不同的是，解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。，所以会重复使用，并不会销毁，这就会导致页面不会重新创建，不会触发生命周期钩子，也获取不到最新的。默认情况下，所有路由是不区分大小写的，并且能匹配带有或不带有尾部斜线的路由。如果放在父级路由上，路由在具有相同父级的子路由之间移动时，它不会被触发。如果我们想匹配任意路径，我们可以使用自定义的。
2024-12-09 15:34:25
1000
原创 常用web API
一、MutationObserverMutationObserver接口提供了监视对DOM树所做更改的能力<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docume
2024-11-22 10:48:10
754
原创 vue3二次封装UI组件
直接上代码</</</</importfrom"vue";importfrom;</</通过useAttrs()获取组件上所有的属性，使用和vue3的透传将其绑定在组件上，通过useSlots()方法来获取所传入的所有插槽，通过动态生成的方式，来实现二次组件的插槽系统。
2024-10-31 14:22:55
484
原创 svg学习
SVG（Scalable Vector Graphics）是一种描述二维图形的语言。作为独立格式或与其他XML混合使用时，它使用XML语法，它和pngjpg等位图不同，它是一种矢量图，就算放大任意倍数，也不会出现失真的情况。
2024-09-30 09:17:51
1740
原创 vue scoped解析
从上面的图可以看出，给style加上scoped之后，会给这个模块的所有元素都加上一个自定义属性data-v-xxxx，这个xxxx就是这个文件的相对路径加上文件名生成的hash值，这样就能保证自定义属性独一无二。给所有元素加上自定义属于以后，会给每个类名后面都加上这个属性选择器，因为自定义属性是独一无二的，所以就实现了样式隔绝。从上面的图可以看出，因为开始了scoped，会给所有的类目加上自定义属性，但是呢，因为使用的是第三方库。之后，就不会给当前类目加自定义属性了，而是给上一级加，这样就能正常选中了。
2024-09-18 17:15:50
682
原创 vue3项目，本地页面正常显示，打包后页面空白
通过浏览器的页面元素选择定位到问题是因为路由没有正确加载，但是排查了路由文件，入口文件，vite.config.js文件，都没有发现任何问题，直到将路由文件里面的按需加载页面文件改成直接加载，才正确渲染出了页面，才发现按需加载写错了。
2024-09-11 16:05:00
1133
原创 react学习
这意味着，如果 React 正在重新渲染一个大型列表，但用户进行了另一次键盘输入，React 会放弃该重新渲染，先处理键盘输入，然后再次开始在后台渲染。相比之下，防抖和节流仍会产生不顺畅的体验，因为它们是阻塞的：它们仅仅是将渲染阻塞键盘输入的时刻推迟了。例如用户点击一个选项卡并且这个选项卡的内容需要大量时间渲染，但改变了主意并点击另一个选项卡，他们可以在不等待第一个重新渲染完成的情况下完成操作。如果用户的设备较慢，那么列表会相应地“滞后”于输入，滞后的程度与设备的速度有关。你也可以同时使用这些技术。
2024-08-31 13:07:26
968
原创 webpack学习
chunk 的格式（formats 默认包含 ‘array-push’ (web/WebWorker)、‘commonjs’ (node.js)、‘module’ (ESM)，还有其他情况可由插件添加）文件，这个是webpack的默认配置文件，会自动读取这个文件，当然也可以指定某个文件来读取，只需要在命令行中指定文件。前缀，将禁用所有已配置的 loader（preLoader, loader, postLoader）前缀，将禁用所有已配置的 normal loader(普通 loader)
2024-08-15 10:01:17
664
原创 axios传递application/x-www-form-urlencoded格式的参数
【代码】axios传递application/x-www-form-urlencoded格式的参数。
2024-07-24 17:13:42
615
原创 electron踩坑
这个报错是创建符号链接也叫软链接的时候没有权限，需要你首先用管理员身法打开cmd，一步一步的找到你的项目目录进行打包，之后就可以直接在vscode打包了。,很多配置都已经给你弄好了，而且还可以选择框架,并且直接使用electron，下载预编译二进制的时候，会超时。一定要开启这个下载代理，不然你不搭梯子，根本下不了一些文件。如果再执行打包命令的时候，出现以下报错。用啥electron,直接。
2024-07-12 16:49:41
367
原创 前端杂七杂八
只能退出内层循环，一般的做法都是如下，添加一个flag标记。这种方式确实也能实现功能，但是不优雅，推荐使用下面这种写法。的时候，需要直接退出循环，但是这样添加。如上面的代码，双层循环，满足。
2024-07-01 20:37:44
245
原创 关于ip地址的网页无法访问navigator的gpu、媒体、蓝牙等设备的解决方法
渲染器时，发现localhost以及127.0.0.1才能访问到navigator.gpu，直接使用ip会变成undefined,原因是为了用户的隐私安全，只能在。的情况，所以说ip地址就别想了，http的域名需要去配置为安全来源，方法是浏览器输入。中使用，非安全的上下文就会是undefined，安全上下文就是使用。这个配置默认是禁用的，配置好了还需要手动设置为启用。方案加载的页面，或者是开发者本地测试使用。，然后把http域名配置进去。在使用threejs的。
2024-06-25 16:20:05
915
原创 vite中使用scss技巧
上面的混入不可能每个文件都写一份吧，而且你直接在main.ts文件引入一个scss文件，是没法使用里面的混合器以及变量的，必须在vite里面配置。2.传递参数，参数后面的值为默认值。3.类似于vue插槽用法。
2024-06-21 22:51:51
1290
原创 闭包、内存泄漏、垃圾回收详解
那什么是内存泄漏呢，就是我们不再需要使用的内存空间依旧能够触达，导致垃圾回收器并不能将其回收，也就是上面例子中的nums，当内存泄漏过多的时候，就会影响代码的运行，因此需要手动将其变成无法触达的内存空间，操作很简单，在代码最后将nums赋值为null，那么数组[1,2,3]的内存空间将变成无法触达，也就会被垃圾回收器回收了。上面的nums是不是垃圾呢，不是垃圾，虽然看起来这三行代码运行结束后，没有再需要nums的地方了，按道理是不再需要的东西了，但是可以在浏览器的控制台打印这个nums，所以它不是垃圾。
2024-06-14 00:43:18
867
原创 自定义类似vite的命令行
命令，然后随便找个地方打开终端执行你自定义的命令，就能执行了。新建一个js文件，在其顶部加入这串代码。就是告诉系统这个是可执行脚本,随便新建一个文件夹，终端执行。就是用node来执行这个脚本。
2024-05-15 23:17:45
429
原创 vue3查漏补缺
在中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。在上面的例子中，vFocus即可以在模板中以v-focus的形式使用// 在模板中启用 v-focus</script><template>在没有使用的情况下，自定义指令需要通过directivessetup() {/*...*/},// 在模板中启用 v-focusfocus: {/* ... */
2024-05-11 15:48:24
845
原创 关于vue3在ts文件中使用vue-router的问题
在ts文件中，使用了useRouter来进行页面跳转，但是结果却是undifend根本原因是这种写法只能用于setup，不能用于hooks里面，所以报错。
2024-05-07 17:40:35
1493
2
原创 浏览器跨域详解
浏览器跨域是指当一个Web应用程序试图访问另一个协议、主机或端口不同的资源时，所发生的情况。这主要是由于浏览器的同源策略造成的，它是为了网站的安全而设置的安全限制，防止一个网站恶意访问另一个网站的资源。当然这是比较简单的回答，其实跨域请求也分为简单请求，预检请求。
2024-05-06 22:37:33
536
原创 js开启子线程及其使用
众所周知，js是单线程，但是可以开启子线程来帮忙处理一些数据，但是这个子线程是有限制的1.必须是同源2.完全受主线程控制3.不能在子线程中操作dom节点4.子线程没有window，可以使用self5.等等具体的查看进程切换是要耗时间的，所以进程不宜开太多，一般等于CPU内核数最好，可以通过来获取。
2024-05-05 23:18:41
551
原创 http和https的区别
但是这种方式也有一个弊端，那就是被篡改，就是在服务端第一次给客户端公钥key1的时候，第三方把公钥key1保存起来，然后第三方生成一个公钥key3和私钥key3，然后将公钥key3给客户端，客户端并不知道这个公钥key3是被篡改的，也用公钥key3来加密公钥key2，然后第三方窃取到这个加密后的公钥key2，通过私钥key3进行解密就可以拿到公钥key2，进行保存，然后再用之前保存的公钥key1来加密给服务端，这样第三方也能获取到公钥key2。不能理解的话就画图来表示，整个逻辑很简单的。
2024-04-27 23:04:19
7352
1
原创 node的事件循环
事件循环会先检查有无nextTick以及Promise，如果没有首先进入timers队列，然后再进入poll队列，在这个队列的时候，会有特殊操作，会去检查timers和check队列有没有需要执行的，如果没有，就会在poll队列等待，因为啥都没有，不可能事件循环一直空转吧，而且poll队列是I/O操作队列，node更想优先处理，当其他队列有任务的时候，事件循环会再次启动。将代码优化，加入一个300ms的阻塞不同版本的node会有不同的结果，然后当场破防，白写这么多。最新的事件循环等我找到了再写。
2024-04-21 22:48:26
253
原创 webpack-plugin详解
plugin其实就是一个类，类里面有一个apply方法，这个方法接收一个参数compiler，这个参数保存着webpack完整的配置，可以对其进行操作，来实现自定义的plugin了。webpack还提供了一系列的钩子函数，类似于vue的生命周期，可以在不同的钩子函数中进行操作。上面的entryOption就是一个钩子函数，可以通过同步tap来操作。操作分为三种，同步、异步、异步promis。
2024-04-09 14:40:24
237
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人