- 博客(139)
- 收藏
- 关注
RSS订阅原创 Vue3学习和进阶
Vue是一款用于构建用户界面的javascript框架。它基于标准的HTML、CSS、JS进行构建，并且提供的一套声明式的，组件化的编程模型，进而帮助我们高效开发用户界面。无论是复杂还是简单的界面，我们都可以用vue进行胜任的。setup() {return {以上的示例可以完全给我们进行展示了Vue的两大核心的功能声明响应式：Vue基于标准的HTML拓展的一套模板语法，使得我们可以声明式的描述最终输出的HTML和Javascript状态直接的关系响应式。
2024-04-01 17:44:21
825
原创 通过http链接形式下载文件报错（referer不通过）
这个问题是被bucket-referer策略拒绝，服务给拒绝访问的。我们可以通过给a标签设置no-referrer。
2024-03-14 15:58:49
361
原创 vue实现自定义树形穿梭框功能
我们在开发过程中，会遇到需要将一个数据选择做成穿梭框，但是要求穿梭框左侧为树形结构、右侧为无层级结构的数据展示，ElementUI自身无法在穿梭框中添加树形结构，网上搜到了大佬封装的插件但是对于右侧的无树形结构一点还是不太满足。以下是我们简单的封装写的组件可以实现此功能。如果我们想要用插件实现，推荐使用。
2024-02-29 16:25:58
643
原创 vue3里面使用el-image-vie出现图片预览导致页面卡顿停止加载问题
需求：我们在使用element-plus组件里面的图片预览时候，通过点击按钮来实现图片预览的效果。在开发过程中我们会遇到图片预览的时候出现卡顿出不来，导致当前的页面停止加载了。
2024-02-27 19:04:21
710
原创 npm安装下载修改镜像源
network request to https://registry.npmjs.org/postcss-pxtorem failed, reason: connect ETIMEDOU，这是因为默认npm安装会请求国外的镜像源，导致下载缓慢容易断开请求下载失败的。request to https://registry.npm.taobao.org/axios …根据错误提示信息，是由于原淘宝npm镜像地址：“ https://registry.npm.taobao.org ” 的证书失效，
2024-01-30 16:11:02
469
原创 el-tree基础的树形节点设置节点不能选中高亮出来，对已经选中的节点设置disabled，对当前节点刚选中后设置禁用disabled
我们使用element-ui或者element-plus的时候会遇到树形控件的使用，我们使用树形控件会限制有的节点不让选中和高亮出来，这个时候需要我们做限制。在实现中我们发现了element-ui和element-plus的时候他们实现的方式还是有点区别的，我们就简单来实现一下。发现element-ui中更改current-node-key值无效，最后用this.$refs.tree.setCurrentKey方法实现了。
2024-01-26 15:24:03
1655
原创 详解Vite创建Vue3项目+vue-router+ts+vite+element-plus
在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。
2024-01-17 17:04:04
1300
原创 vite和webpack的区别和作用
Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。
2024-01-17 12:00:32
1150
原创 轮询和长轮询的讲解和实战
当今web应用程序对实时通信的需求越来越高，为了满足客户需求，轮询和长轮询成为常用的技术手段。本文将深入讲解一下轮询实现原理、优缺点和使用场景。
2024-01-16 17:38:30
1006
原创 vue实现导航里面锚点定位和滚动监听功能
</div></div>">二级类目1 商品内容</div>">二级类目2 商品内容</div>">二级类目3 商品内容</div>">二级类目4 商品内容</div></div></div>
2024-01-12 15:31:13
728
原创 vue2、vue3里面去掉访问地址中路由‘#‘号--nginx配置
如果浏览器支持History API，那么就可以使用history.pushState()和history.replaceState()方法来更新浏览器的URL路径，从而可以实现前端路由，而不用像传统的多页面应用一样每次都请求服务器获取新的HTML页面。我们在vue2中，默认情况下出现#号的，是因为Vue 的 router 默认是 hash 模式，在 hash 模式下，是会有#号在URL上；在 router 的 index.js 页面内，mode 默认是 hash，修改为 history。
2024-01-10 17:12:29
1575
原创 自定义列表里面实现多选功能
我们在开发过程中有时候会遇到列表里面会有多选，然后列表样式也要进行自定义。这里我们如果直接使用ElementUI组件el-table表格的时候这里实现起来可能比较复杂不方便，我们这里手写自定义一下列表里面多选的功能。1- 我们这里先建一个子组件LiteratureTable.vue。
2024-01-04 16:19:15
408
原创 Vue3+TS+ElementPlus的安装和使用教程【详细讲解】
本文简单的介绍一下vue3框架的搭建和有关vue3技术栈的使用。通过本文学习我们可以自己独立搭建一个简单项目和vue3的实战。随着前端的日月更新，技术的不断迭代提高，如今新vue项目首选用vue3 + typescript + vite + pinia+……模式。以前我们通常使用Vue2时，使用的是选项式API进行vue项目的开发，当vue3的出现，组合式API进行对项目实例化和构建。另外需要注意vue项目需要nodeJS环境的支持，而vue3需要nodeJS的版本最低是node14.18版本。
2024-01-03 16:46:00
1625
2
原创 Vue3使用的Compostion Api和Vue2使用的Options Api有什么不同？
在逻辑组织和逻辑复用方面Composition API 是优于 Options API因为 Composition API 几乎是函数，会有更好的类型推断。对tree-shaking 友好，代码也更容易压缩Composition API 中见不到 this 的使用，减少了 this 指向不明的情况如果是小型组件，可以继续使用 Options API，也是十分友好。
2023-12-26 14:55:18
1109
原创 Vue3设计目标和优化
另外对组件而言，如果模板中使用不在当前组件中定义的变量，那么就会不太容易知道这些变量在哪里定义的，这就是数据来源不清晰。这里还需要说明的是，Composition API 属于 API 的增强，它并不是 Vue.js 3.0 组件开发的范式，如果你的组件足够简单，你还是可以使用 Options API。Composition API 除了在逻辑复用方面有优势，也会有更好的类型支持，因为它们都是一些函数，在调用函数时，自然所有的类型就被推导出来了，不像 Options API 所有的东西使用 this。
2023-12-25 18:14:43
931
原创 uniapp项目在微信开发工具里打开报错Error:app.json:在项目根目录未找到app.json
uni-app 项目我们在微信开发工具里面打开报错。
2023-12-25 13:58:18
1768
5
原创 vue3使用echarts漏斗，根据数据计算比例大小
需求：我们在开发过程中会遇到漏斗图的使用，如果用echarts里面自带的算法绘制渲染漏斗图时候，如果后端给的数据相差不大很接近时候，漏斗图渲染的结果不明显看不出来变化的。
2023-12-22 11:36:54
720
原创 vue3父子组件之间的通信使用
想要了解父子组件之间的通信方式和使用我们首先要知道什么是组件通信？组件通信就是指组件与组件之间的数据传递组件的数据是独立的，无法直接访问其他组件的数据想使用其他组件的数据，就需要组件通信工作中我们的代码量会非常多，为了后期便于维护和调整，我们可以把一个业务模块根据基础的功能模块拆成多个小组件，例如：list展示件、form 表单模块、弹窗等……此时我们就用到了父子组件通信。知道原理后，我们要回到实际开发应用中去：一般情况下。
2023-12-06 15:58:46
962
原创 vue3里面生命周期的使用
vue2里面的生命周期和vue3生命周期是非常的相似的，我们通过访问生命周期钩子来处理不同场景之间的应用。生命周期钩子的函数定义：每一个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中的阶段我们称为是生命周期钩子函数。这里我们使用的vue3生命周期函数为组合式API下的生命周期函数的。【组合式写法没有 beforeCreate / created 生命周期，并且组合式写生命周期用哪个先引哪个。
2023-12-05 18:44:50
1158
原创 vue3里面使用ref和toRef、toRefs
vue3 里面我们经常会使用。创建可以使用。这里，对象有一个value属性，其值就是所传递的原始值。ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象。ref、toRef、toRefs 都可以的本质是拷贝，修改响应式数据，，修改响应式数据，一次仅能，接收两个参数，，它会，然后挨个调用toRef执行。
2023-12-05 16:23:36
914
原创 vue3使用echarts中国地图
需求：Vue3 + vite +TS 项目内使用 Echarts 5 绘制中国地图。鼠标悬浮省份上面显示指定的数据，地图支持缩放和拖拽的功能，页面放大缩小支持自适应，window.addEventListener(‘resize’, resize);添加防抖动函数debounce。
2023-11-28 16:23:37
1043
原创 校验验证码是否过期（定时刷新验证码）
我们在登录的时候会遇到通过接口请求验证码的操作，这里的验证码会有过期的时间，当我们验证码过期了，我们要进行重新刷新验证码。我们这里根据后端返回的当前时间和过期时间判断，过期的时间超过了当前时间的时候这里进行刷新验证码操作。我们这里使用dayjs控件进行时间转换。
2023-11-03 17:38:03
458
原创 ElementUI编辑表格单元格与查看模式切换的应用
需求：有时候在填写表单的时候，想要在输入的时候是input输入框的状态，但是当鼠标移出输入框失去焦点时，希望是查看的状态，这种场景可以通过 v-if实现。
2023-10-12 17:30:45
891
原创 vue设置页面超时15分钟自动退出登录
需求：用户登录后，如果长时间未操作页面这个时候需要自动退出登录回到登录页面。注意点：这里我们如果把超时的时间放到浏览器里面存储，我们要放到本地存储里面localStorage里面。
2023-10-11 14:41:07
1341
1
原创 Vue-diff算法和双向数据绑定原理
在这三个部分中，Observer是最核心的部分，其原理是通过递归遍历数据对象的每个属性，并为其添加getter/setter，当属性被读取或者修改时，能够触发相应的回调函数，从而实现数据的监听和更新。如果不同，则需要根据差异类型进行相应的更新操作。在新旧虚拟节点的对比过程中，为了提高对比效率，需要为新旧虚拟节点创建映射表，将旧节点对应的关系记录下来，方便后续比对过程中的查找和匹配。对于模板中的指令（如v-model），会通过directive进行处理，即对指令进行解析，得到绑定的数据对象和对应的key。
2023-09-26 18:06:39
188
原创 vue里面使用EventBus（事件总线）
轻量级: Mitt只有200字节大小，不会增加你的应用程序的负担方便易用：只需要引入mitt并配置即可使用支持任何Javascript环境：Mitt支持在任何Javascript环境下使用，不仅限于Vue应用场景：组件通信。
2023-09-25 16:58:30
1081
原创 vue里面通过elementUI组件实现图片预览
需求：我们在开发中经常会遇到通过点击某个按钮或者文字实现图片的预览功能。这里我们分别介绍vue2和vue3里面如何实现图片预览方法。
2023-09-25 14:37:10
1163
3
原创 HTML实现移动端布局与页面自适应
结论：1.如果只做pc端，那么静态布局（定宽度）是最好的选择；2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
2023-09-13 14:21:37
6897
1
原创 检查Javascript对象数组中是否存在对象值，如果没有向数组添加新对象
有没有办法循环遍历数组，以检查特定的用户名值是否已经存在，如果它什么都不做，但是如果它没有用所述用户名(和新的ID)将新对象添加到数组？我假设id s在这里是独一无二的。这里我使用了带有.filter的ES6箭头功能来检查是否存在新添加的用户名。
2023-08-25 18:09:09
527
原创 JS对数组对象判断是否存在对象值，没有向数组添加新对象
方案2：这里我使用带有 .filter 的 ES6 箭头函数来检查新添加的用户名是否存在。方案1：我们假如id这里是唯一的，我们通过使用some进行检测数组中事务（
2023-07-14 11:47:56
722
原创 elementUI使用步骤条自定义显示内容和显示某一区间段的颜色
主要就是动态绑定class,然后覆盖element底层的样式css的代码如下：(如果不生效我们这里可以使用穿透实现：less默认是不支持 >>> ，但是可用 /deep/ 和 ::v-deep；scss支持 >>>和::v-deep// 蓝色 . el - step . is - horizontal . key1 {} } } // 黑色 . el - step . is - horizontal . key2 {
2023-07-10 14:27:16
14
原创 vue-devtools的安装与使用
2，安装完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文件，将vender 文件下的 manifest.json ，修改persistent 为 true。components： 显示当前点击组件的可用数据,并可以修改和添加，修改可实时反应在界面中，非常方便调试一些业务流程比较繁琐，可以任意展示其中的一步操作的界面。events： 记录事件，比如点击事件，当你点击之后，这里会显示出来点击事件来源于哪一个组件，以及事件名等信息。只有在本地运行的项目才能查看。
2023-07-07 15:02:09
1991
原创 vue父组件调用子组件的Form表单校验
3，在父组件中点击【确 定】按钮调用方法。1，如果是父组件校验多个子组件。1，在父组件中引入子组件。2，子组件中的校验方法。
2023-07-07 11:48:49
2095
原创 vue用使用异步+reduce实现循环调用接口（上一个接口调用完毕再调用下一个接口）
vue循环请求同一个接口，等接口返回数据之后在进行下次循环（在项目中，有时候会需要批量操作，有些更特殊的还需要按顺序调用接口。注意点：（批量下发10个任务，按任务序号顺序下发，同时需要等上一个任务下发完成再进行下一个任务的下发（不然可能会有后面的接口执行更快提前下发的情况））// 批量下发 multipleIssue() {
2023-04-27 19:28:23
2564
1
原创 Cascader 级联选择器指定值禁用添加其他参数+清空上一次校验
Cascader 级联选择器选中后需要传递除了label和value后的其他参数，这里我们可以通过再递归方法里面再添加循环动态列表判断选中的值等于列表里面值然后赋值生产力值produceValue。每次新增后选中对应值，再点击新增后不让选择之前选中过的数据。（2）Cascader 级联选择器选中后需要传递除了label和value后的其他参数，这里我们需要使用到生产力值的参数值。然后再调用禁用方法里面通过递归循环，获取选中的数据，递归给已经选中的数据添加disabled=true属性；
2023-03-30 16:30:23
1262
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人