- 博客(114)
- 收藏
- 关注
RSS订阅原创 vue3+ts实现表格单元格编辑功能
方法来更新表格的可编辑状态。当表格中的单元格数据发生改变时，会触发。// 在这里可以对单元格数据进行处理，比如保存到后端或者做其他操作。属性用来配置编辑时的样式和允许编辑的列。方法，可以在这个方法中对单元格数据进行处理。// 处理 Switch 组件状态改变事件。组件来控制表格的可编辑状态，并且使用。// 控制表格是否可编辑的开关状态。属性来控制表格是否可编辑，而。// 处理表格单元格数据改变事件。组件的状态发生改变时，会触发。
2024-04-14 22:05:16
403
原创 实现文章内容过多时的展开收起效果
通过计算文章内容的高度来确定是否需要显示展开按钮，然后根据用户的点击来展开或收起文章内容。'文章内容，这里是一段很长的文章内容。文章内容，这里是一段很长的文章内容。文章内容，这里是一段很长的文章内容。判断文章内容是否溢出，如果溢出则显示展开按钮。然后根据用户点击来切换。的值，以展开或收起文章内容。，可以调整文章内容的最大高度。
2024-04-14 21:56:05
370
原创 前端项目边界处理
在前端开发中，边界处理是非常重要的一个部分。边界处理涉及到错误处理、输入验证、 边界情况处理等。一个良好的边界处理可以提高用户体验，保证系统的稳定性和安全性。
2024-03-15 22:44:31
650
原创 前端代码整洁与规范之js篇
常见的代码检查工具有ESLint、JSLint等，这些工具可以帮助开发者发现代码中的潜在问题，并提供修改建议。同时，避免使用过长或过于复杂的命名，可以适当使用缩写，但要确保缩写是容易理解和记忆的。函数是代码的基本组成单位之一，一个良好的函数定义可以提高代码的可读性，减少重复性代码。变量命名是代码可读性的重要因素之一，良好的变量命名可以让他人更容易理解代码逻辑。代码复用是提高代码质量和开发效率的关键之一，避免代码重复可以减少代码的维护成本。良好的代码格式化可以提高代码的可读性，使代码更加整洁。
2024-03-15 08:15:00
1118
原创 前端代码整洁与规范之CSS篇
CSS 类名的命名应该简洁清晰，能够准确描述元素的作用。避免使用无意义的名称，例如“a”、“b”等，而应该使用有意义的英文单词或单词缩写。同时，也要避免使用驼峰命名法和下划线命名法混杂使用，要保持一致性。CSS 代码的缩进对代码的可读性和语义性有很大的影响。建议使用四个空格或两个空格的缩进，而不是制表符。代码缩进应该有层次感，使代码结构清晰易读。在编写 CSS 代码时，应该避免冗余的代码。尽量将通用的样式合并在一起，避免重复定义样式。同时，也要避免不必要的样式设置，保持代码精简。
2024-03-14 23:02:36
318
原创 前端代码整洁与规范之HTML篇
在为HTML元素添加class和id时，应该尽量使用语义化的命名，以便更好地描述元素的用途和作用。避免使用无意义的名称，提倡使用具有描述性的class和id名称，这样可以提高代码的可维护性和可读性。注释应该简洁明了，避免冗长和无关的内容。在编写HTML代码时，标签应该按照正确的嵌套规则来使用，即每个标签都应该有正确的开始标签和结束标签。在编写HTML代码时，应该尽量使用小写字母来书写标签和属性，因为HTML是不区分大小写的。在编写HTML代码时，我们应该尽可能使用语义化的标签来描述页面的结构和内容。
2024-03-12 20:56:27
335
原创 如何解决浏览器兼容问题2.0
在HTML标签、属性等方面也存在兼容性问题，尤其是在HTML5中新增了很多新的标签和属性，不同浏览器对其支持程度也不同。
2024-03-12 20:51:48
1310
原创 浏览器内核小知识
不同的浏览器使用不同的内核，例如Chrome使用的是Blink内核，Firefox使用的是Gecko内核，Safari使用的是WebKit内核。JavaScript执行：如果页面中有JavaScript代码，浏览器内核会调用JavaScript引擎来解析和执行代码，实现交互和动态效果。兼容性差异：由于不同的浏览器内核对网页的解析方式不同，可能会导致网页在不同浏览器上显示效果不一致，也会出现兼容性问题。页面渲染效果不同：不同的浏览器内核在渲染页面时可能会有差异，导致页面显示效果不同，例如布局、字体渲染等。
2024-03-11 20:46:08
582
原创 vue3+ts实现倒计时组件
该组件将显示一个倒计时，直到给定目标日期（在此示例中是2022年12月25日）。组件将显示剩余的天数，小时数，分钟数和秒数。倒计时会每秒更新一次，直到倒计时结束。
2024-03-10 12:09:20
387
原创 开发小需求：页面滚动一定距离后，顶部导航栏消失
在Vue3和TypeScript中实现网站顶部导航栏固定，并在页面滚动大于200px时，顶部导航栏消失，出现新的固定在顶部的导航栏。
2024-03-10 12:08:27
405
原创 vue3+ts实现一个简单的音乐组件，包括播放、暂停、切换歌曲
这个简单的音乐播放器组件包括一个音频元素（audio）和几个按钮，可以实现播放、暂停和切换歌曲的功能。播放器展示当前播放的歌曲标题和歌手，同时提供一个下拉菜单来选择要播放的歌曲。播放、暂停和切换歌曲的功能通过调用相关的方法来实现。每个歌曲是一个对象，包括id、标题、艺术家名称和URL。
2024-03-04 23:19:49
520
原创 vue3+ts实现表格的增删改查（二）
每一行数据都包含一个"Edit"按钮和一个"Delete"按钮，点击这些按钮会调用相应的方法来编辑或删除数据。表格下方有一个"Toggle Form"按钮，点击该按钮可以切换显示/隐藏添加数据的表单。// 假设接口返回的数据格式为 { data: Item }// 假设接口返回的数据格式为 { data: Item }方法调用后端接口获取数据，并将返回的数据赋值给。方法调用后端接口添加数据，并将返回的数据添加到。// 调用后端接口添加数据。// 调用后端接口编辑数据。// 调用后端接口删除数据。
2024-03-03 12:24:43
642
原创 Vue3实现tab切换
最终效果就是点击不同的选项卡会切换到对应的内容，并且选中的选项卡文字带下划线，下划线宽度比文字宽度短，并且与文字居中。这三个响应式变量，分别存储选项卡的文字、内容以及当前选中的选项卡索引。当点击某个选项卡时，调用。在样式中，我们定义了选项卡的样式，并且通过。的值，从而更新选项卡的样式。来控制显示对应选项卡的内容。函数来切换选项卡，并更新。
2024-03-02 23:31:02
736
原创 Vue2实现tab切换
以下代码实现了一个tab切换的功能，点击不同的tab会切换到对应的内容，并且选中的tab文字带下划线，下划线宽度比文字宽度短，并且与文字居中。
2024-03-02 23:16:06
399
原创 vue3实现可编辑表格
属性的值来判断是显示“Edit”按钮还是“Save”按钮。数组中添加一个空的行，点击“Edit”按钮会将对应行的。在每一行中，使用条件渲染来显示不同的按钮，根据。数组，该数组包含了表格的数据。属性，用于控制该行是否可编辑。指令在表格中渲染每一行，并使用。点击“Add Row”按钮会在。，点击“Delete”按钮会从。，点击“Save”按钮会将。指令绑定每个输入框的值到。函数来创建一个响应式的。
2024-03-01 22:58:27
677
原创 vue3+ts实现图片预览功能
首先，需要创建一个Vue组件，用于显示图片和预览图。在父组件中使用这个图片预览组件。数组，将每个图片的路径传递给。当用户将鼠标悬停在图片上时，当用户将鼠标移出图片时，在父组件中，通过遍历。
2024-03-01 22:57:26
431
原创 vue3+ts实现Tab滚动居中
来实现水平滚动的效果。每个Tab元素设置了一些基本的样式，激活的Tab元素设置了加粗的字体。和当前激活的Tab元素的引用，然后计算出滚动的位置，使激活的Tab居中显示。最后，在样式中设置了容器的宽度为100%，并设置了。方法来初始化时居中显示当前激活的Tab。方法来将新的激活Tab居中显示。方法中，切换Tab时，会更新。方法来实现滚动效果。
2024-02-29 21:06:03
523
原创 轮询的知识点
在前端开发中，轮询是一种常见的技术手段，用于定期向服务器发送请求以获取最新数据或状态更新。通过轮询，前端可以实时获取服务器端的数据变化或者定刷新页面内容，从而提高用户体验和页面的实时性。在实际应用中，前端轮询通常会使用定时器来定期发送请求。在前端开发中，轮询通常用于实时监控系统、实时数据展示、在线聊天、定时通知等场景。通过轮询，前端可以定期向服务器请求最新数据，并将其展示给用户。前端轮询是一种简单易用的前端技术，可以用于实现实时更新数据的效果。然而，它也有一些缺点，如增加服务器负载和网络流量。
2024-02-28 08:30:00
909
原创 浅拷贝和深拷贝
复制方式：浅拷贝只复制对象或数组的第一层属性或元素，而深拷贝会递归复制所有属性或元素，包括嵌套的对象或数组。引用关系：浅拷贝复制的对象或数组中的引用类型属性仍然会指向同一个引用，而深拷贝会创建新的引用，使得新对象或数组与原始数据结构完全独立。性能开销：由于深拷贝需要递归复制所有属性或元素，所以性能开销比浅拷贝更大。在处理大型对象或数组时，深拷贝可能会导致性能问题。应用场景：浅拷贝通常用于复制简单的对象或数组，而深拷贝适用于复制复杂的对象或数组，特别是包含嵌套的对象或数组。
2024-02-27 21:49:09
1092
原创 如何处理浏览器兼容问题
兼容性问题是指在不同的浏览器中，同一份网页在显示和功能上可能存在差异或错误的情况。由于不同浏览器的内核和实现方式不同，导致网页在不同浏览器上的呈现效果不一致。为了解决兼容性问题，我们需要了解不同浏览器的特点和常见的兼容性问题，并采取相应的解决方法。
2024-02-27 21:44:52
906
原创 算法：判断素数
首先检查输入是否为一个数字，然后使用一个循环来检查从2到该数字的平方根之间的每一个数是否能整除该数字。如果找到一个能整除的数，则该数不是素数，返回false；否则，返回true。
2024-02-24 22:28:33
257
原创 算法：判断回文数
指向的字符是否相等，如果出现不相等的情况则返回false，否则继续向中间移动指针。最终如果整个字符串都比较完毕都没有出现不相等的情况，则返回true，表示是回文数。首先将数字转换为字符串，然后将字符串转换为数组并反转，最后将反转后的数组转换为字符串，最后比较原始字符串和反转后的字符串是否相同来判断是否为回文数。两个指针分别指向字符串的开头和结尾。方法一：将数字转为字符串，然后利用字符串的。首先将输入的数字转换为字符串，然后使用。
2024-02-24 22:11:28
176
原创 react基础知识（二）
副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（例如:手动修改DOM、数据请求、localstorage操作）非受控组件：通过手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值。受控组件：input框自己的状态被React组件状态控制。在函数组件中获取真实的dom元素对象或者是组件对象。
2024-02-23 09:00:00
180
原创 react基础知识（一）
概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构。3、条件渲染，可以使用 三元运算符 或 逻辑与(&&)运算符。作用：在React中创建HTML结构（页面UI结构）
2024-02-23 08:45:00
285
原创 uniapp踩坑记
在使用生命周期时，需要注意生命周期在不同平台上的执行顺序和时机，可以使用条件编译的方式，针对不同平台编写不同的生命周期代码。在使用API时，需要注意API在不同平台上的兼容性，可以使用条件编译的方式，针对不同平台编写不同的API代码。不同平台对于生命周期的参数可能会有差异，例如小程序中的onLoad生命周期的参数是一个对象，而H5中的onLoad生命周期的参数是一个路由参数。在使用组件时，需要注意组件在不同平台上的兼容性，可以使用条件编译的方式，针对不同平台编写不同的组件代码。2.1 组件差异问题。
2024-02-23 07:30:00
428
原创 微信小程序踩坑记
正确的写法是以"/"开头的绝对路径，而不是相对路径。1.在wxml中使用{{}}进行数据绑定时，如果绑定的数据是一个对象或数组，页面却没有显示任何内容，这是因为对象或数组中的数据没有通过setData函数进行更新。2.在页面跳转时，使用wx.navigateTo进行跳转，但是跳转后页面却显示空白，这是因为跳转的目标页面没有在app.json文件中注册。1.在微信小程序中进行网络请求时，如果请求的地址是https协议，但是在app.json文件中没有配置合法域名，请求会被拦截，无法正常发送。
2024-02-22 09:15:00
568
原创 算法：有效的括号
这个算法使用栈来实现，遍历输入的字符串，如果是左括号则入栈，如果是右括号则出栈并判断是否匹配。最后判断栈是否为空，如果为空则表示所有括号都匹配，返回true，否则返回false。
2024-02-21 22:14:42
225
原创 vue3+ts实现购物车案例
数组，显示购物车中的商品列表。每个商品后面有一个“移除”按钮，点击按钮会调用。数组，显示可供选择的商品列表。方法用于将选择的商品添加到购物车中。方法用于从购物车中移除指定ID的商品。函数来设置组件的响应式数据和方法。数组中查找该商品对象，并将其添加到。，用于存储当前选择的商品的ID。获取当前选择的商品的ID，然后在。方法将选择的商品添加到购物车中。数组来存储可供选择的商品列表。，用于存储购物车中的商品列表。方法找到要移除的商品在。方法将其从数组中移除。数组中的索引，并使用。在添加商品部分，使用。
2024-02-21 09:00:00
1422
原创 vue3组件通信
Vue3是Vue.js的最新版本，它引入了一些新的特性和改进，包括更好的性能、更好的类型检查、更好的开发体验等。在Vue3中，组件通信仍然是一个非常重要的话题，因为在大多数应用程序中，不同的组件之间需要进行数据传递和交互。在Vue3中，组件通信有多种方式可供选择，包括props、事件、provide/inject、listeners、ref和响应式API等。下面将详细介绍每种方式的使用方法和特点。包含了父组件传递的所有属性，
2024-02-21 08:00:00
764
原创 算法：两数之和
使用哈希表，通过一次遍历数组，将每个数的值和索引存储在哈希表中，同时查找是否存在符合条件的数。：使用暴力法，通过两层循环遍历数组来查找符合条件的两个数。而哈希表的时间复杂度为。暴力法的时间复杂度为。
2024-02-20 21:50:39
327
原创 2024前端面试准备之nuxt篇
Nuxt.js是一个基于Vue.js的通用应用框架，用于构建服务器渲染的应用程序。它提供了许多有用的功能，如路由、状态管理、静态文件生成等，使开发者能够更快速地构建复杂的应用程序。Nuxt.js还支持服务端渲染(SSR)，可以提高应用程序的性能和SEO优化。
2024-02-20 20:30:00
593
原创 2024前端面试准备之微信小程序篇
减少页面的大小和数量，减少页面中的图片、视频等资源的大小，减少网络请求的次数，尽量使用异步加载和懒加载技术。：使用性能分析工具进行监控和分析，及时发现和解决性能问题，对关键路径进行优化，持续优化和改进小程序的性能。：优化页面结构和样式，减少不必要的重绘和重排，减少使用复杂的CSS选择器和嵌套，避免频繁修改DOM。：减少请求的大小和次数，合理使用缓存和预加载，使用CDN加速，优化接口的响应时间和数据格式。：及时释放不再使用的资源，避免内存泄漏，合理使用缓存和存储，避免频繁创建和销毁对象。
2024-02-20 07:30:00
701
原创 2024前端面试准备之uniapp篇
UniApp的性能和用户体验相对较好，因为它使用原生渲染技术，可以实现更接近原生应用的性能表现。：React Native和Flutter拥有更大的社区和生态系统，有更多的第三方库和插件可供开发者使用。在App.vue或需要使用字体图标的页面中，引入字体图标库的样式文件。uniCloud是uniapp提供的云开发服务，可以通过uniCloud提供的API来实现数据的存储和读取。：根据目标平台选择相应的打包工具，如HBuilderX、Android Studio、Xcode等，进行应用包的生成。
2024-02-20 07:00:00
728
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人