- 博客(130)
- 收藏
- 关注
RSS订阅原创 DeepSeek时代，AI 不是前端的 “终结者”，而是淘汰落后生产力的 “筛选器”
一、DeepSeek时代的技术底色 2025年，以DeepSeek（深度求索）为代表的AI大模型已渗透至软件开发全链路：从需求分析到代码生成，从测试部署到用户行为洞察，AI不再是工具，而是成为与开发者共生的“智能协作者”。从“代码执行者”到“AI训练师” ● prompt工程能力：学会用精确的自然语言指令引导AI（如“生成一个符合WCAG 2.1标准的表单组件，包含键盘导航和屏幕阅读器支持”）；三、前端开发者的“新生存法则” 在全员DeepSeek时代，前端不再是“切图仔”或“调样式的”，而是需要。
2025-03-20 21:00:00
715
原创 巧用 VSCode 与 AI 编码提升 Vue 前端开发效率
VSCode 与 Marscode AI、GitHub Copilot 等 AI 扩展工具的结合，为 Vue 前端开发带来了前所未有的便利和效率提升。通过合理使用这些工具，开发者可以快速生成代码、解决问题，减少重复劳动，将更多的精力放在业务逻辑的实现和创新上。希望本文介绍的方法和技巧能帮助更多的开发者利用这些工具，提升自己的 Vue 开发效率。在未来的开发过程中，不妨尝试将这些工具融入到自己的工作流程中，相信你会体验到它们带来的巨大改变。让我们一起借助科技的力量，开启高效的 Vue 开发之旅！
2025-03-17 19:30:00
1399
2
原创 Vue 的 render 函数如何与 JSX 结合使用
JSX 是一种强大的语法扩展，它可以与 Vue 的 render 函数结合使用，提供更灵活的视图层编写方式。通过 JSX，我们可以更直观地表达组件的结构和逻辑，同时享受 JavaScript 的全部能力。
2025-03-06 17:44:00
492
原创 神器 Turbo Console Log：让 `console.log` 操作一键搞定！
有了 Turbo Console Log 插件，调试代码变得轻松又高效。如果你还在为手动输入 console.log 而烦恼，不妨试试这款插件，相信它会成为你开发路上的得力助手！
2025-02-06 19:15:00
684
原创 CSS 溢出问题及解决方案：实用案例与技巧
CSS的溢出问题是一个常见但容易解决的问题，关键在于根据不同的使用场景选择合适的解决方法。通过上述的各种属性和组合，我们可以灵活地处理元素的溢出情况，提升页面的布局效果和用户体验。在实际开发中，我们需要根据元素的内容、容器的功能以及用户的交互需求来决定使用哪种溢出处理方式，确保页面的布局既美观又实用。希望本文提供的案例和解决方法能帮助你更好地处理CSS中的溢出问题，为你的网页开发工作带来更多的便利和效率。
2025-01-20 14:51:42
1408
原创 Grid 与 Flex 布局的用法及区别
在前端开发中，布局是至关重要的一环。Grid 和 Flex 布局作为现代 CSS 中强大的布局工具，各自有着独特的用法和优势。本文将深入探讨这两种布局方式的用法，并通过案例清晰地展示它们之间的区别。
2025-01-17 11:21:02
1080
原创 element-ui textarea备注 textarea 多行输入框
发现用这个组件，为了给用户更好的体验，要加下属性1. 通过设置autosize属性可以使得文本域的高度能够根据文本内容自动进行调整，并且autosize还可以设定为一个对象，指定最小行数和最大行数。2. 输入长度限制 maxlength3. 是否显示输入字数统计 show-word-limit。
2025-01-17 00:00:00
671
原创 解决vue列表页跳转到详情页，返回列表页时不刷新、保持原来的状态的方法（二）
先判断isBack的状态，如果为false, 则说明当前不是从详情页进来的（可能从其他菜单或则编辑页进入，需要更新数据），就更新列表数据（自己的列表数据逻辑，并将分页设为1），之后将isBack设置为false。1、列表页进入详情页，再从详情页返回时，列表页不刷新，比如列表当前分页为第二页，点击进入详情页，再从点击返回按钮，返回到列表页时，列表页保持在第二页。进入列表时，先判断是不是从详情页进入的，如果是，则将isBack设为true。2、列表页进入编辑页，再从编辑页返回时，列表页刷新。
2025-01-16 14:15:00
710
原创 vue用户点进详情页再返回列表页，停留在原位置
在 Vue 中使用来缓存组件确实可以提高用户体验，尤其是在移动应用中。然而，有时候你可能希望某些页面在每次访问时都重新加载，而不是使用缓存的版本。为了实现这一点，你可以结合key属性和 Vue Router 的导航守卫来控制哪些页面应该刷新。
2025-01-16 09:12:40
601
原创 Vue 实现当前页面刷新的几种方法
以下是 Vue 中实现当前页面刷新的几种方法： 通过Vue Router进行重新导航，可以实现页面的局部刷新，而不丢失全局状态。具体实现方式有两种：实现代码：代码解释： 使用是最简单直接的方式。它会完全重新加载当前页面，类似于浏览器的刷新按钮。实现方式如下：实现代码：代码解释： 优点：缺点： 实现代码： 代码解释： 实现代码：代码解释：优点：缺点：通过手动触发组件的重新渲染，可以实现更加细粒度的刷新。具体方法有以下几种：在模板中使用属性： 总结：你可
2025-01-15 16:31:38
3464
原创 vscode插件-ToDo Tree (待办事项插件)
Todo Tree是vscode中一款可以在侧边栏记录TODO注释（也可以配置其他的注释）并且可以高亮注释行的很优秀的插件。有的时候我们写程序的时候，难免会遇到一些情况需要标记或者搁置，在写代码的时候会用一些特殊的注释来表示不同的内容，使我们可以快速的定位我们注释的位置。
2024-11-27 15:17:18
947
原创 前端代码逻辑优化
通常这种，为了处理特殊状况，所实现的判断逻辑，都可以采用 “异常逻辑前置，正常逻辑后置” 的方式进行梳理优化。采用展开运算符，将原属性插入，然后从后面覆盖新属性，这样原属性就不会丢了。咋一看，这 1、2、3 又是什么意思啊？这样，其他人一看到常量名大概就知道，判断的是啥了。这些处理逻辑，我们可以采用 映射代替分支逻辑。要是有其他属性呢，其他属性不就直接没了吗~语义就很不明确，当然，你也可以在旁边写注释。这是连续嵌套的判断逻辑，要怎么优化呢？更优雅的做法是，将魔法数字改用常量。咋一看，好像没问题了呀？
2024-08-02 21:45:00
441
原创 Element-UI相关问题
2）el-dialog的显示层和遮罩层都设置了position:fixed，当然显示层的z-index肯定要比遮罩层的大，才能正常的显示弹出框。问题就出在此处，若el-dialog的父级也设置了position:fixed，并且其z-index比弹出框的遮罩层的小（遮罩层处于更高一层），那么弹出框的内容就会被遮罩层所遮挡住了。3）el-dialog的父级元素确实设置了position:fixed，并且其z-index比弹出框的遮罩层的小，所以就会出现遮罩层把内容挡住的问题。
2024-05-15 16:03:11
566
原创 项目中遇到的一些问题（持续更新中）
以上代码中，我们使用了ES6的解构语法，将对象中的age属性解构出来，并使用展开运算符将除了age属性之外的所有属性打包给item变量。接着，我们返回了一个仅包含item变量的新对象，这样就实现了去除原数组中每个对象的age属性的目的。需要注意的是，以上代码使用了箭头函数和ES6语法，如果您的项目中不能使用这些特性，那么可以考虑使用普通函数和常规的循环语句来实现该功能。数组，而是返回一个新的已排序数组。中的位置进行比较，从而得到排序后的结果。的结果，可以得到降序排列的排序顺序。请注意，这并不会改变原始的。
2024-03-08 16:18:57
449
原创 vue3中的基本语法
经过了漫长的迭代，Vue 3.0 终于在上 2020-09-18 发布了，带了翻天覆地的变化，使用了 Typescript 进行了大规模的重构，带来了 Composition API RFC 版本，类似 React Hook 一样的写 Vue，可以自定义自己的 hook ，让使用者更加的灵活。toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据。虽然history模式不需要#。
2024-02-29 21:57:11
1010
原创 Pinia｜VUe的状态管理库
patch 是 pinia 提供的一个api，用来批量修改 state 中的数据，接收一个对象参数，对象中的属性就是 state 中的属性，值就是要修改的值。创建store需要调用pinia中的defineStore方法,该方法接受两个参数，第一个参数是store的唯一 id，第二个参数是store的配置属性。可以直接使用userStore访问仓库中的属性。这是$patch的另一种写法，回调默认接收一个参数，也就是store中的state，在回调函数中修改state中的数据。
2024-01-31 16:52:43
1179
原创 Echarts饼图改变图片大小与位置
series下的 radius : [‘54%’, ‘90’], ------------这个属性设置图的大小；第一个参数是控制里面小圈的大小，第二个参数是控制外面大圈的大小；设置echarts饼图的大小。
2024-01-25 16:22:35
6147
原创 vue 点击按钮跳转另一个项目的链接地址，从另一个项目返回回来页面怎么让他刷新
如果你在 Vue 3 中点击按钮跳转到另一个项目的链接地址，然后从另一个项目返回时想要刷新页面，这就涉及到不同域的页面之间的通信问题。一种解决方法是在跳转到另一个项目的链接地址时，将一个标识参数传递给另一个项目。当从另一个项目返回时，检查 URL 中是否包含该标识参数，如果存在则执行页面刷新操作。请注意，在以上示例中，需要确保两个项目在不同的域名（或子域名）上，以便彼此之间可以进行跳转和通信。这样，点击按钮跳转到另一个项目后，从另一个项目返回时，会执行页面刷新操作。
2024-01-24 10:40:55
965
原创 Vue-router-tab的使用
通常，在用户重新登录或者切换角色的情况下，我们需要关闭用户所有页签并恢复页签初始状态，包括恢复初始页签、跳转到指定的默认页面等。强制刷新所有页签，忽略页面组件的 beforePageLeave 配置。此方法默认会刷新已有页签，如果希望全新打开页签，您可以尝试此方法。您可以通过 RouterTab 的实例方法。您可以通过 RouterTab 的实例方法。您可以通过 RouterTab 的实例方法。关闭当前页签并跳转地址，并刷新该地址。Vue Router 原生方式。方法来重置页签到初始状态。
2023-12-29 11:03:05
962
1
原创 element-ui遇到的相关问题
给列表整个div动态绑定 .noScroll 后，底部列表照样可以滑动，所以考虑继续向上追溯。利用watch监听蒙层是否显示，当显示时，设置body相应样式；但蒙层消失时，body样式恢复。但是在vue里怎么操作body里，虽然vue是数据驱动的，不提倡直接操作Dom。在vue中的 export default 中的methods中进addclassStatus以及addclassPriority方法的计算和赋值。在app.vue里面，（特备注意：注意是在app.vue里，不是在页面或者组件里！
2023-03-28 10:53:15
1102
原创 【URL】参数转换成对象
参数转换成对象let urlStr = 'http://my.oschina.net?name=judy&study=js&study=node'目标： { name: 'judy', study: [ 'js', 'node' ] }参数转换成对象// 参数转成对象function queryString(request){ let params = request.split('?')[1]; let param = params.split('&
2020-05-18 11:20:28
919
原创 Vue的基础理解(八)
为什么会出现vue修改数据后页面没有刷新的问题？受ES5的限制，Vue不能检测对象的属性的添加和删除Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。第一次页面加载会触发哪几个生命周期？4个生命周期 ： beforeCreate - created - eforeMount - mou...
2020-03-03 10:53:21
256
原创 Vue的基础理解(七)
Vue常用的修饰符有哪些？Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。.prevent : 拦截默认事件.passive: 不拦截默认事件.stop : 阻止冒泡事件.self : 事件不是从内部元素触发的，是前元素自身时触发处理函数.self.prevent 只会阻止对元素自身的点击。.once : 只会触发一次.capture ...
2020-03-02 10:00:35
234
原创 Vue的基础理解(六)
Vue中 v-html有什么作用？会导致什么问题？v-html可以用来识别HTML标签并渲染出去。**导致问题：**在网站上动态渲染html,很容易导致xss攻击，所以只能在可信内容上使用v-html，且永远不能用于用户提交的内容上。keep-alive在vue中的作用是什么？keep-alive是Vue提供的抽象组件，用来对组件进行缓存，从而节省性能，当组件在keep-aliv...
2020-03-01 15:53:13
207
原创 Vue自定义指令
Vue自定义指令15个自定义指令：https://my.oschina.net/liuyuantao/blog/3130325什么是自定义指令比如v-show元素的显示/隐藏，vue允许我们自己设置自定义的指令自定义指令传递的参数el: 指令所绑定的元素，可以用来直接操作DOM。 binding: 一个对象，包含指令的很多信息。 vnode: Vue编译生成的虚拟节点。...
2020-02-24 18:48:26
245
转载 Vuex的理解及应用
一、Vuex的概述1.什么是Vuex？1. vuex是为Vue.js应用程序开发的状态管理模式。采用集中式储存管理应用所有组件的状态，并以相应的规则保证状态已可预测的方式发生变化。2. 能够在Vuex集中管理共享的数据，便于开发和后期进行维护。3. 能够高效的实现组件之间的数据共享，提高开发效率。4. 储存在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新。2....
2020-02-23 16:33:02
213
翻译 【工具函数】数值+0和-0的区分
信息tag : Number题目描述JavaScript的“0”值有两个，+0和-0。那么怎么区分呢?解题思路我们看到+0和-0，大概想尝试把该数字通过toString()转化成字符串，在使用indexOf(’-’)判断是否等于0，或者charAt(0)判断是否等于-。很不幸，数值在进行toString()的时候就自动将其转为0了，所以此方法行不通。尝试另外一种思路：除法：有+I...
2020-01-21 10:44:39
752
翻译 【js】引用和操作符优先级
以下输出什么题目一：var a = {n: 1};var b = a;a.x = a = {n: 2};console.log(a.x)console.log(b.x)执行：1.先执行 a.x2.a = {n:2} ;//从右向左赋值3.a.x ={n:2}; //赋值操作解答思路：1、优先级。.的优先级高于=，所以先执行a.x，堆内存中的{n: 1}就会变成{n: 1,...
2019-12-19 16:34:56
653
转载 【vue】directive自定义指令
directive指令目的：实现自定义指令，比如v-focus<input v-focus />全局注册：Vue.directive('focus',{ inserted:function(el){ el.focus() }})局部注册：directives:{ focus:{ inserted:function(el){ el.focus();...
2019-12-10 11:09:01
118
转载 【vue】纯前端导出表格数据（vue+element-ui）
1.安装依赖安装依赖xlsx，file-savernpm install --save xlsx file-saver2.在组件中引入import FileSaver from 'file-saver'import XLSX from 'xlsx'3.添加下载方法#out-table为table节点的id outTab () { /* 从表生成工作簿对象 */...
2019-12-09 16:03:02
809
原创 【ES6】数组操作
一、找出第一个符合条件的数组成员项目中经常需要遍历数组寻找符合需求的数据，使用find()方法可以将代码从循环中简化出来。假如在数组中寻找值为“Annie”的成员，方法如下var people = [ { name :'Annie', age:'18' }, { name:'wayne', age:19 }, { name :'...
2019-12-06 13:54:30
175
翻译 【http】一次完整的HTTP事务是怎样的一个过程？
域名解析发起TCP 3次握手建立TCP连接后，发起http请求服务器收到http请求，浏览器得到html代码浏览器解析代码，请求代码中的资源浏览器对页面进行渲染并呈现给用户...
2019-11-28 10:56:59
276
原创 [ Array 工具函数 ]
Array 工具函数只是想要使用起来方便1.在数组中查找所有出现的元素x，并返回一个包含=>匹配索引的元素// 查找数组a中的值1出现的位置，并返回数组var a = [1, 2, 3, 4, 5, 6, 1, 1, 1, 4];//result => [0,6,7,8]function aIndex(a, v) { var result = [], ...
2019-11-25 11:21:40
154
原创 [ JS ]保留2位小数需注意事项
JS保留两位小数,首先想到的是toFixed(),还有什么方法呢？toFixed(2) 四舍五入var num = 13.999;var numToturn = num.toFixed(2);console.log(numToturn)//=>14.00Math.floor(num*100)/100 不会四舍五入var num = 13.999;var numT...
2019-11-22 11:36:17
242
原创 【 VUE 】vue中的filter
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
2019-11-21 11:47:19
120
原创 【vue】computed的应用
计算属性的应用对于输入框模糊搜索，动态监听改变数组(使用过滤器)计算属性计算时所依赖的属性一定是响应式依赖，否则计算属性不会执行计算属性是基于依赖进行缓存的，就是说在依赖没有更新的情况，调用计算属性并不会重新计算，可以减少开销<template> <input type="text" v-model="query" /> <li v-for=...
2019-11-20 14:13:12
251
原创 VUE 获取路由参数
vue 获取当前页面的路由参数 this.$route在当前页面 this.$route 输出当前页面路由信息 { name: "home", meta: {…}, path: "/", hash: "", query: {…},fullPath:'/',matched:[{}] ,params:{} }获取当前页面的路由信息 this.$route...
2019-11-19 15:21:43
1005
原创 [ Object ] 去重 合并具有相同属性的数组
去重合并相同属性的数组思路：1.定义目标数组 var result = [];2.定义对象放置目标对象属性例如：var obj = { name : true,age:18 }var orders = [ { name : 'wayne', order:'1' }, { name:'wayne', o...
2019-11-18 14:06:30
234
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人