- 博客(38)
- 收藏
- 关注
RSS订阅原创 前端实现图片压缩
在平时进行前端图片上传时，有时直接上传的图片大小较大，会导致上传时间过长，同时也会增大服务器传输的数据量，增大服务器的负载。那么也没啥办法能将图片大小压缩后进行上传呢。
2025-03-31 09:46:33
296
原创 在ts中Record使用
Record是一个非常实用的泛型类型，用于快速定义对象的键值对结构。通过结合其他类型操作符，可以灵活地定义各种复杂对象类型，满足不同的开发需求。
2025-03-31 09:26:54
204
原创 手写图片懒加载自定义指令
console.log('目标元素进入视窗');// 在此处理进入视窗后的逻辑} else {console.log('目标元素离开视窗');// 在此处理离开视窗后的逻辑});
2025-03-27 16:13:14
218
原创 计算属性set方法没被执行的原因
computed属性的set没有显式设置计算属性的值。直接修改依赖的数据源，而不是通过计算属性的set方法。set方法的逻辑没有正确实现。计算属性没有在模板或代码中被使用。要确保set方法正确执行，需要显式地给计算属性赋值，并确保其逻辑正确更新依赖的数据源。
2025-03-20 16:53:54
324
原创 使用computed计算属性实现购物车勾选
这样，当计算属性的值被修改时，可以触发相应的逻辑来更新相关的数据。属性默认是只读的，但你可以通过提供。在 Vue 3 中，
2025-03-17 17:10:06
337
原创 toRef 和 toRefs 的区别
在 Vue 3 中，toRef和toRefs是两个用于处理响应式数据的函数，它们都与ref和reactive相关，但它们的使用场景和功能有所不同。
2025-03-14 17:39:43
232
原创 TypeScript 极速梳理
使用type和interface定义自定义类型。// 高一、高二、高三name: '张三',age: 18,grade: 1。
2025-03-11 15:49:27
492
原创 Vue3 的生命周期钩子与 Vue2 相比有一些调整和变化
Vue3 的生命周期分为四个主要阶段：创建、挂载、更新和销毁，每个阶段提供对应的钩子函数。，用于追踪虚拟 DOM 的依赖收集和触发重新渲染的具体依赖。总结来说，Vue3 中父子组件的挂载顺序是：父组件的。此外，Vue3 还新增了调试钩子。
2025-03-11 09:35:53
317
原创 Vue3生命周期钩子函数
Vue3 的生命周期分为四个主要阶段：创建、挂载、更新和销毁，每个阶段提供对应的钩子函数。，用于追踪虚拟 DOM 的依赖收集和触发重新渲染的具体依赖。此外，Vue3 还新增了调试钩子。
2025-03-11 09:31:47
320
原创 Java面向对象-接口
接口是一个引用数据类型，是一种规范关键字：a、 interface 接口 public interface 接口名{}b、implements 实现 实现类 implements 接口名 {}
2025-03-11 09:27:29
299
原创 Java面向对象-抽象
抽象类是怎么来的抽取共性方法，放入父类，发现改方法没法实现，因为每个子类对该方法是实现方式是不一样的，此时方法具体说不清道不明，可以定义为抽象类。抽象方法所在的类，一定是抽象类关键词abstract抽象方法修饰符abstract返回类型 方法名（参数）；抽象类：public abstract class 类名{}可以将抽象看成一类事物的标准，只要属于这一类的，都必须拥有抽象类中的方法，必须要进行实现，怎么证明拥有了 -> 重写至于这个方法怎么实现，就看子类中怎么实现方法体了。
2025-03-10 17:43:21
275
原创 Java面向对象-继承
用来存放相同重复的公共代码继承 => 子类extends父类注意：子类可以继承父类的私有和非私有成员 ，但是不能使用私有成员构造方法不能继承。
2025-03-10 17:35:10
256
原创 使用css画三角形
在CSS中，可以通过利用border属性来创建三角形。其原理是通过设置一个元素的宽高为0，然后给其设置不同方向的边框，并将不需要的边框颜色设置为透明，从而形成三角形的形状。
2025-03-10 17:30:39
466
原创 在vite搭建的项目中，使用import导入图片出现报红
在vite搭建项目中，使用import导入图片时常会出现以上错误提示，原因是Vite 默认会将。解决方法：可在项目里新建一个 images.d.ts 文件，里面写入内容。目录内的静态资源（如图片、字体等）视为模块依赖，并自动处理。
2025-03-07 17:06:10
391
原创 html基础入门
做网站：前端（眼之所及，皆是前端）+ 后端（服务器）网页开发：html+css360浏览器 ，google+chrome, 火狐在浏览器中有一个内核来解析代码内核又可以分：渲染引擎（html+css）+ 解析引擎(javascript)快速生成页面的结构快捷键： !+tab六.段落标签p七.常见的样式标签粗体 strong b(bold) font-weight: bolder (700)斜体 em i (italic)
2025-03-07 16:55:47
271
原创 nodejs快速入门
程序员写的代码都放在哪里了?服务器前端语言与后端语言最大的区别是代码都在服务器上,只是代码在什么地方执行的地方不同,在服务器执行,就是后端语言.在浏览器执行,就是前端语言.前端(frontEnd): 代码在浏览器解析的 如: html css js img font后端(backEnd): 代码在服务器端解析的 如: php python java node go。
2025-03-07 16:52:22
802
原创 js基础入门
规则由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name严格区分大小写。var app;和 var App;是两个变量不能 以数字开头。18age 是错误的不能 是关键字、保留字。例如：var、for、while变量名必须有意义。var un = undefined // 这个变量有值 但是不知道数据类型。
2025-03-07 16:38:58
489
原创 transition过渡动画失效问题分析及解决
将key放在动态组件上会导致子组件的过渡动画失效，因为key的变化会导致组件被销毁和重新创建，过渡动效所依赖的组件直接被销毁，leave钩子没来得及执行，无法展示过渡动效。解决这个问题的关键是确保组件复用，而不是销毁和重新创建。可以通过确保key的值在路由切换时保持不变，或者不使用key，或者使用keep-alive缓存组件来实现这一点。的值在路由切换时保持不变，或者不使用key，或者使用keep-alive缓存组件来实现这一点。
2025-03-07 15:36:10
388
原创 组件销毁流程
Vue 组件销毁是一个有组织的过程，涉及多个步骤和生命周期钩子。理解这个过程有助于更好地管理组件的生命周期，避免内存泄漏和意外行为。通过合理使用和，可以在组件销毁前释放资源、清理副作用。
2025-03-06 17:29:30
416
原创 css基础学习笔记
css的作用：网页布局，设置样式css学习两大块内容： 1.选择器 2.属性与属性值2.行内式3.外链式二.选择器1.基本选择器a.通配符（*）b.标签选择器（e 如：p,h1,div,span…）c.类选择器（以"."开头）d.id选择器 (以"#"开头)2.复合选择器a.后代选择器 (空格 如： ul li)b.子代选择器 ( > 如： ol > li)c.并集选择器 ( , 如: div,span)d.交集选择器
2025-03-06 17:28:49
759
原创 webAPI基础知识
1.前端js的组成部分：ECMAScript(语法), DOM,BOM2.API: application programming interface 应用程序接口生活中的接口：如遥控器程序中的接品：函数（我们学的内置对象函数就是接口），请求地址3.webAPI: 网页API接口，浏览器给我们提供了一些函数，我们只需要用函数1.什么是DOM: document Object Model 文档对象模型2.DOM树：文档，元素，节点1.2根据 标签名称 找元素 document.getElement
2025-03-05 17:43:21
751
原创 JS 数组常用的方法
方法说明：可以接受多个数量的值，并且逐个添加到数组的尾部，返回修改后的数组；push()可放入的值：number、string、array、表达式等，可同时存在多个值或多种类型的值。
2025-03-05 17:18:56
974
原创 拖拽排序功能实现（模仿vuedraggable）
js原生实现元素拖拽需要使用drag事件和相关的属性和方法。我们需要通过监听dragstart事件来开始拖拽，监听dragend事件来结束拖拽，并且要设置draggable属性为true。然后，结合一些计算和样式修改，可以实现元素的拖拽效果。这种方式相对底层，需要手动处理一些细节。当前也存vue第三方库来实现拖拽排序，比如有，可进行查阅和使用。关于如何使用原生的drag事件，可以前往进行进一步了解和学习，其中有相应的说明、案例以及浏览器兼容性。
2025-03-05 17:06:43
163
原创 使用html5新特性拖拽实现
使用html5新特性实现拖拽实现原理实现流程：将拖拽的元素设置成可拖拽， draggable = trueondragstart 开始拖拽的回调函数 获取并存放拖拽元素ondragover 拖拽完成 阻止浏览器默认行为，浏览器默认不可拖拽ondrop 拖拽释放用来获取拖拽元素，将目标元素添加到当前盒子内代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /&
2022-05-22 00:00:44
583
原创 在 vue 框架中使用 Mock 模拟后台数据
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、Mock 是什么？二、Mock 使用1.Mock 基本使用1.1生成模拟数据的两种方法2.在 vue 中使用 Mock2.1创建项目并导包2.2创建 mock 文件效果展示前言在前端开发的时候，在某些情况下后端接口没有准备好，但页面需要数据渲染来查看效果，此时可以使用 Mock 这个包来生成随机数据，方面前端获取数据渲染页面。一、Mock 是什么？生成随机数据，拦截 Ajax 请求。不需要改变现有代码，就可以.
2022-05-04 01:33:48
782
原创 使用scrapy框架项目实践
任务说明：使用scrapy框架爬取58同城上面的租房信息，同时解密被加密的文字，最后将结果上传到MongoDB，期间启动中间件来反爬虫。这里使用Python3.7开发（考虑到Python对汉字不太友好，这里选择Python3版本就是为了避免因为汉字而导致程序报错）首先我们打开pycharm创建项目，创建好的项目目录如下图：定义item确定我们要爬取的内容，进入58同城的租房板块，进入租房...
2018-12-22 18:27:28
387
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人