- 博客(140)
- 收藏
- 关注
RSS订阅
原创 JavaScript基础知识（二）
面向对象是一种编程思想，这种编程思想可以当做一个学科来研究。除了 JavaScript，例如 C++、Java、Python、PHP 等等编程语言都可以使用这种面向对象的编程思想来开发应用程序。DOM：是一套标准编程接口。我们通过 DOM 这套接口来操作HTML元素。
2023-10-23 20:25:11
498
原创 JavaScript基础知识（一）
函数是一个可执行的语句块（通过function关键字声明）。声明的时候不执行语句块，调用函数时执行。优点：声明之后可以反复调用，提高代码的复用能力。//声明函数 function fun() {//语句... } //调用函数 fun();六种数据类型中的一种，对象可以重新设置属性。属性的无序集合。// 创建一个对象 let cat = {name : "miaomiao" , //注意是逗号 age : 2 , };
2023-08-07 17:48:47
914
原创 移动端适配
移动端font-size的适配有的时候，我们在使用font-size和rem来给移动端做适配会遇到这样一个问题，年轻人把字体调小，老年人把字体调大，这样会让我们原本的适配失效，造成页面字体样式错位的问题，下面的方法会根据html的font-size与1px的倍率会页面重新进行适配。代码如下：(function (win, doc) { function createScaleElement() { let scaleDom = document.createElement('div')
2020-07-16 11:51:54
347
原创 第一章-React入门
React用于构建用户界面。它采用组件化模式和虚拟DOM技术，提高开发效率并优化性能。学习React前需掌握JavaScript基础知识，如ES6语法、class等。React通过JSX语法简化虚拟DOM创建，JSX最终会转换为JavaScript对象。相比原生JS操作DOM，React的虚拟DOM更轻量，能减少重绘重排。入门案例展示了如何用JSX创建虚拟DOM并渲染到页面。React适合解决原生JS操作DOM繁琐、复用率低等问题，是现代化前端开发的重要工具。
2025-12-01 11:06:28
794
原创 git详细使用教程
本文介绍了Git的基础和高级使用方法，包括项目初始化、文件状态管理、提交记录查看、版本回滚等基础操作，以及代码暂存(stash)、分支管理(创建/切换/合并/删除)等高级功能。重点讲解了紧急修复bug的标准流程：1)提交当前开发内容；2)切换到主分支；3)创建bug分支修复；4)合并修复内容后删除bug分支。通过status的不同颜色(红/绿/白)可直观判断文件状态，使用stash相关命令能有效管理未提交代码。
2025-11-05 11:55:25
672
原创 PC端使用rem适配
摘要： 本文介绍了在PC端使用rem进行适配的方法，以解决设计稿元素过大导致小屏幕显示异常的问题。核心步骤包括：添加viewport meta标签限制缩放，并引入rem.js动态计算根字体大小（基于1920px设计稿按比例缩放）。但该方法存在局限性，浏览器窗口缩放或调试时可能导致样式错乱，因此常规PC项目仍推荐采用百分比布局结合媒体查询的适配方案。
2025-09-10 18:26:56
234
原创 使用el-form完成表单验证
本文介绍了如何使用Element UI的el-form组件进行表单验证。主要内容包括：1) el-form的基本结构，包含父元素el-form和子元素el-form-item；2) 表单验证的实现方法，通过设置rules规则对象和prop属性；3) 提交按钮的全局验证，使用validate()方法；4) 常用正则表达式总结，如手机号、身份证号等验证规则。该方案适用于vue+element-ui技术栈，能有效实现表单数据的规范验证。
2025-09-03 16:34:20
536
原创 前端实现上传和下载
本文介绍了在Vue+ElementUI项目中实现文件上传和下载功能的方法。上传功能通过el-upload组件获取文件，使用FormData对象转换格式后提交，注意设置contentType为multipart/form-data。下载功能通过创建a标签，设置href为后台返回的URL并模拟点击实现。两种功能的实现都较为简单，关键在于理解表单数据格式转换和下载链接处理。文章提供了完整的代码示例和关键配置说明，帮助开发者快速实现文件传输功能。
2025-08-22 19:43:51
308
原创 在组件中使用el-dialog时，遮罩层覆盖了弹窗
Vue中el-dialog被遮罩层覆盖的解决方案 问题描述：在封装的Vue组件中使用Element UI的el-dialog时，弹窗被遮罩层覆盖且交互失效。 原因分析：这是由于遮罩层默认插入到body元素，而弹窗可能插入到层级更深的父元素中，导致z-index冲突。 解决方案：为el-dialog添加modal-append-to-body="false"属性，将遮罩层插入到弹窗的父元素内，避免覆盖问题。
2025-08-22 19:00:23
287
原创 vue中监听页面滚动位置
本文介绍了在Vue中监听页面滚动位置的方法。通过e.target.scrollTop获取页面滚动高度，当超过700像素时显示侧边栏导航。在mounted生命周期添加scroll事件监听，beforeDestroy时移除监听，以避免内存泄漏。核心代码包括滚动判断和事件管理两部分，实现页面滚动到指定位置展示侧边栏的功能。
2025-08-22 18:48:30
314
原创 vuex如何在js文件中使用
摘要 本文介绍了如何在.js文件中使用Vuex。通过导出Vuex store模块，在.js文件中直接导入并调用mutations方法，实现状态管理。代码示例展示了从vuex-store.js导出store，并在util.js中调用updateIsLogin mutation的过程。文章强调Vuex不仅限于.vue文件，也可灵活应用于.js文件，扩展了Vuex的使用场景。 关键词：Vuex、状态管理、mutations、JavaScript模块
2025-08-22 17:46:31
400
原创 在图片没有加载完成时设置默认图片
文章摘要：前端开发中，图片未加载时显示空白会影响用户体验。本文介绍两种设置默认图片的方法：1）使用img标签的placeholder属性直接指定默认图；2）通过onerror事件处理加载失败情况，动态替换为默认图。前者简洁但依赖浏览器支持，后者兼容性更好且支持复杂逻辑处理。根据实际需求选择适合的方案可有效改善页面加载体验。（149字）
2025-08-22 17:37:59
469
原创 最近开发PC端关于静态页面的一些心得与感悟
PC端官网项目在笔记本上出现样式问题，主要原因是：1）布局采用固定px导致响应式失效，建议改用百分比和flex布局；2）背景图设置不当导致留白或显示不全，应调整background-position和background-size；3）1X图片在高分屏模糊，需替换为压缩后的2X图；4）外部字体未完整引入导致字重不一致，需分别引入不同字重的字体文件。项目开发周期紧张导致加班严重，建议开发者合理规划需求，优先保证身心健康。
2025-08-22 11:16:38
197
原创 vue中实现锚点定位
本文介绍了在Vue项目中实现锚点定位的解决方案。传统使用id和a标签的href方法会与路由的hash值冲突。推荐使用scrollIntoView()方法，它通过获取DOM元素并调用该方法实现平滑滚动定位，具有不改变URL、可设置缓冲效果等优点。该方法解决了Vue中锚点定位的常见问题，是更优的实现方案。
2025-08-11 11:08:50
330
转载 es6的Set 和 Map 数据结构
ES6的Set和Map是两种新的数据结构。Set类似于数组，但成员值唯一，可用来数组去重，提供add/delete/has/clear等操作方法，支持遍历和集合运算（并集、交集、差集）。Map是键值对集合，键可以是任意类型，提供set/get/has/delete等方法，支持遍历操作。两者都可通过扩展运算符转换为数组，在数据存储和操作上提供了更灵活的选择。
2025-08-04 11:56:35
212
转载 es6的Symbol
本文介绍了ES6引入的Symbol数据类型，它是一种表示唯一值的原始类型，用于解决对象属性名冲突问题。Symbol通过Symbol()函数生成，每个值都是独一无二的。它可以接受字符串参数作为描述，但不能与其他类型运算。Symbol值可用作对象属性名，但需用方括号而非点运算符访问。文章还讲解了如何通过description属性获取Symbol描述、使用Symbol消除魔术字符串，以及遍历Symbol属性的方法Object.getOwnPropertySymbols()。
2025-07-30 11:02:22
40
转载 es6对象的新增方法
ES6新增了Object.is()和Object.assign()方法。Object.is()解决了===运算符中NaN不等于自身和+0等于-0的问题，实现了"同值相等"比较。Object.assign()用于对象合并，将源对象可枚举属性复制到目标对象，特点是浅拷贝、同名属性替换、支持Symbol属性。主要用途包括为对象添加属性和方法、克隆对象等，但需要注意它对非对象参数的处理方式及浅拷贝带来的引用问题。这些方法为JavaScript对象操作提供了更强大的功能支持。
2025-07-28 18:07:25
133
转载 es6对象的扩展
ES6对象扩展主要包括：1）属性简洁表示法，允许直接写入变量和函数作为对象的属性和方法；2）属性名表达式，支持用表达式定义属性名；3）方法的name属性，可返回函数名或Symbol描述；4）属性的可枚举性控制，新增Object.assign()会忽略不可枚举属性。这些特性简化了对象操作，增强了代码可读性，其中属性简写和方法简写在模块输出和函数返回值中尤为实用。注意属性名表达式与简洁表示法不能混用，且对象作为属性名会自动转为字符串"[object Object]"。
2025-07-23 18:39:34
154
转载 es6数组的扩展
ES6扩展运算符（...）可以将数组展开为参数序列，主要用于函数调用，能够替代apply方法。它支持复制数组、合并数组（浅拷贝）、与解构赋值结合、转换字符串为数组等功能。扩展运算符要求对象必须实现Iterator接口，适用于数组、NodeList、Map、Set等可迭代对象，但不适用于普通类数组对象（需用Array.from转换）。使用需注意扩展运算符在函数调用时的特殊语法要求。
2025-07-18 17:39:32
108
转载 es6函数的扩展
尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。以下三种情况，都不属于尾调用// 情况一return y;// 情况二// 情况三g(x);上面代码中，情况一是调用函数g之后，还有赋值操作，所以不属于尾调用，即使语义完全一样。情况二也属于调用后还有操作，即使写在一行内。情况三等同于下面的代码。g(x);尾调用不一定出现在函数尾部，只要是最后一步。
2025-07-11 12:02:34
78
转载 es6新增运算符总结
ES6运算符扩展摘要 ES6新增了多项运算符扩展：1）指数运算符**用于幂运算，具有右结合性；2）链判断运算符?.简化深层属性访问，避免繁琐的空值检查；3）Null判断运算符??提供更严格的默认值设置，仅对null/undefined生效；4）逻辑赋值运算符||=、&&=、??=结合逻辑运算与赋值操作。这些新特性显著提升了代码简洁性和安全性，特别是?.和??配合使用能有效处理嵌套对象和默认值场景，而逻辑赋值运算符则简化了条件赋值写法。使用时需注意运算符优先级和特殊边界情况。
2025-07-02 18:25:46
124
转载 es6字符串、数值新增方法总结
ES6字符串与数值新增方法摘要 字符串新增方法： 判断方法：includes()、startsWith()、endsWith()用于检查字符串包含关系 重复方法：repeat()可重复字符串指定次数 填充方法：padStart()和padEnd()用于补全字符串长度 去空格方法：trimStart()和trimEnd()分别去除首尾空格 替换方法：replaceAll()可全局替换字符串 字符获取：at()支持正负索引获取指定位置字符 数值扩展： 数值分隔符：允许使用下划线(_)分隔数字，提高可读性，如1_
2025-07-02 18:11:37
77
原创 Vue中引入外部字体并使用
1.下载需要引入的字体包；2.创建一个新的资源目录 font 文件夹，将需要的字体放在该目录下并创建一个font.css；3.在 font.css 文件中引入想要的字体；4.在项目中全局引入写好的 font.css 文件；5.那么现在就可以在 vue 组件中随意使用引入的字体样式啦！
2025-06-25 15:35:15
1416
原创 用css实现文字字体颜色渐变
摘要： CSS3的background-clip属性配合渐变背景可实现文字颜色渐变效果。通过设置background-image为线性渐变（如从绿到白），并应用background-clip: text与-webkit-text-fill-color: transparent，使文字呈现从左到右的颜色过渡。代码简洁，兼容性需前缀支持，效果直观。
2025-06-25 11:43:21
616
原创 vant Dialog组件调用的坑
在做移动端项目时，需要完成一个带有倒计时按钮的弹窗，这就需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。Dialog 是一个函数，不是组件，因此不支持局部注册，正确的注册方法是 Vue.use(Dialog)，即使用全局引入的方式。
2025-04-23 18:53:10
490
转载 CSS 使用calc()获取当前可视屏幕高度
我们可以获得当前屏幕的视窗宽度，所以在css中，通过计算这个高度即可使得div的高度自动撑开到屏幕高度，而计算这个高度可以使用css3的。需要注意的是，该方法适用于网页高度等于当前屏幕视窗高度，按实际需求可能还是需要JS的。相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。先了解一下CSS3的相对长度单位。
2025-03-13 11:11:34
553
原创 截取一对中括号里面的内容
/ 小括号和中括号作为正则里的特殊字符，需要使用转义字符\)\)/g;// 小括号)\]/g;// 中括号// 下面这些括号，则不需要，不过加了也没关系)}/g;// 大花括号)）/g;// 中文小括号)】/g;// 中文中括号。
2025-03-10 10:29:19
289
原创 vue项目-img 标签的 error 事件
在做vue项目的时候，对img的src动态赋值后，还需要监听下 img 标签的 error 事件，如果这个图片不存在的场景下，需要设置为默认的。
2024-10-23 11:53:33
758
原创 解决页面刷新时白色闪屏问题
在浏览网页时，每次页面刷新都会有一段短暂的白屏，十分影响用户体验。其实有一个最简单的解决方法，就是直接把body元素的background-color直接设定为页面的主色调，我这里是黑色。这样处理完成后就没以后闪白屏的情况了
2024-09-26 17:41:14
848
原创 input输入框支持明文暗文切换
我们通常实现密码框的时候会直接使用 input ,设置它的 type 为 password，如果要实现明文和暗文的切换，实际上就是 type=“text” 和 type="password"的切换。
2024-03-14 11:29:09
802
转载 给伪元素(::before / ::after) 绑定点击事件
伪元素没有 dom 结构，所以无法直接绑定事件。可以利用事件捕获，把事件处理程序绑定到父元素上，再用css禁掉父元素的点击事件 (点击父元素无法再触发点击事件)，同时开启子元素的点击事件。
2024-01-18 11:34:23
1201
原创 关于对象数组的一些方法总结
很多时候，我们想要复制一个对象数组的值，如果使用 map()或者 lodash中的 _.clone()，会发现对于数组里面的JSON对象，指针还是相同的，改变原数组时，对该复制数组是有影响的。这时候可以使用{...obj}语法对数组里面的Json对象进行值的复制。
2023-09-27 18:23:38
590
转载 element ui - el-input 实现点击插入关键词功能
el-input文本框，通过点击下方关键词，在文本框中插入该词；光标移动到文本之间，再点击下方关键词，在光标的位置插入该词；插入关键词后，文本框获取焦点，并将光标的位置定位到关键词后点击按钮，在文本框指定位置插入该按钮的关键词。参考链接：输入文本框实现点击插入词功能。
2023-09-15 18:37:54
1169
2原创 去掉number输入框末尾的箭头
在很多场景下，输入框是会被要求限制只能输入数字，不能输入文字或者符号的。通常我们会使用input事件 + 正则表达式 去实现这个功能，但今天提供另一种css的方法，将 type=”number” 的数字输入框去掉末尾的箭头，直接实现一个只能输入数字的输入框
2023-07-31 11:27:37
590
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人