- 博客(30)
- 收藏
- 关注
原创 Vue 中 v-model 的 “双向绑定”:从原理到自定义组件适配
当我们封装自定义组件(如 “自定义输入框”“数量选择器”)时,默认无法直接使用v-model—— 需要手动告诉组件:“绑定哪个属性?触发哪个事件来更新数据?如果不想用默认的value和input(比如组件已用value做其他用途),Vue3 允许通过model-- 子组件:在defineProps外添加model选项 -->// 自定义v-model的prop名(从value改为count)和事件名(从input改为update:count)model: {
2025-09-01 13:50:14
586
原创 深入理解 Vue3 Composition API:从语法到实战,彻底告别 Options API 痛点
封装了特定逻辑,且返回响应式数据或方法的函数,命名通常以use开头(如useRequest、useTimer)。Composition API 并非对 Options API 的否定,而是对 Vue 组件逻辑组织方式的补充和优化。它通过 “按逻辑组合代码” 的思想,解决了大型项目中的逻辑复用和代码维护难题,同时让 Vue3 对 TypeScript 的支持更友好。
2025-09-01 13:45:26
1191
原创 3 个你每天在用却未必懂的 H5/JS 小知识
早期手机浏览器为了判断用户是 “点击” 还是 “滑动缩放”,会特意留 0.3 秒延迟。你有没有发现:在手机浏览器里点按钮,经常要等 0.3 秒才反应?下次写 H5 或 JS 时,不妨多留意这些细节,能让你的代码更顺手~想在用户浏览器里存点数据(比如登录状态、浏览记录),不用找后端 ——H5 的。不过要注意:别存敏感信息(比如密码),因为用户能直接在浏览器里看到这些数据。它会告诉浏览器:“这是适配手机的页面,不用等,直接响应点击!,能避免很多 “明明值对了,却判断错” 的坑。
2025-08-29 17:13:46
171
原创 Vue 项目首屏加载速度优化
前面 3 个方案解决了核心问题,最后通过打包优化,进一步压缩体积。1. 拆分公共代码(避免重复打包)原理:Vue、lodash 等第三方库,会被多个组件引用,拆分后只打包一次,后续组件复用;实现(Vite 配置):build: {output: {// 手动拆分公共代码vue: ['vue'], // Vue相关代码拆成一个chunklodash: ['lodash'], // lodash拆成一个chunk。
2025-08-29 17:01:47
1483
原创 vue-admin-template权限管理
vue-admin-template` 实现权限管理的核心在于 **角色权限模型 + 动态路由 + 按钮权限控制**。
2025-08-22 15:23:24
475
原创 vue2怎么修改el-table样式
在el-table中加入row-style属性,可以更改任何你想要的表格内容样式,包括颜色,字体,大小等。如行高,字体大小,颜色边框等。在el-table中加入header-cell-style属性,可以更改任何你想要的表头样式,包括颜色,字体,大小等。另外如果只想修改单元列的宽度时,只需要在<el-table-column>上加上width='xxx'属性即可。
2025-08-22 15:04:03
430
原创 js判断手机操作系统(ios、安卓、华为)
在网页中我们经常会针对不同操作系统做不同处理,我们通过js该怎么写才能更精准的判断出不同手机系统呢?系统自带的navigator.userAgent方法是没法精准区分安卓和华为的,所以海糖的建议是直接下载ua-parser-js插件来判断,很简单,直接按照我的步骤操作就可以啦!
2025-06-12 16:36:08
1372
1
原创 Vue2 与 Vue3对比
在前端开发领域,Vue.js 以其简洁高效的特点深受开发者喜爱。随着技术的不断发展,Vue3 在 Vue2 的基础上进行了大量优化和创新,从底层架构到上层应用都发生了显著变化。本文将通过代码示例和详细解析,深入探讨 Vue2 与 Vue3 的核心差异,帮助开发者更好地理解和选择适合的技术版本。
2025-05-30 18:06:17
1353
原创 web端 firebase google analytics使用,入门级
如何将google analytics集成到web端给我们前端开发人员使用,超简单易懂!
2025-05-28 17:23:31
599
原创 wx.getPrivacySetting接口needAuthorization一直返回false
我们在开发小程序的隐私协议授权时往往会使用到wx.getPrivacySetting接口,当返回的needAuthorization为true时候提示我们需要去授权,但你们有没有遇到过needAuthorization一直为false的情况呢,下面是最常见的三个解决方法,都完善了基本就没什么问题了。如果以上方法没能解决这个问题,欢迎评论留言,海糖很愿意帮助大家哦!
2025-05-22 15:37:22
741
1
原创 微信小程序 隐私协议弹窗授权
梳理流程逻辑:(tips:文章最下面有完整代码,直接复制粘贴就可以使用啦)现在隐私协议弹窗有两种方式:第一种是需要调用隐私协议时弹窗,第二种是小程序进入页面就授权,只需要授权一次,授权之后就可以使用所有隐私接口了。现在我们一般都是用第二种,更符合用户体验。咱们先梳理下第二种方法的流程:注意接下来我使用的是uniapp1.进入首页使用 uni.getPrivacySetting 接口判断是否需要授权,需要则展示弹窗;
2025-05-22 15:14:39
4260
4
原创 ts axios中报 Property ‘code‘ does not exist on type ‘AxiosResponse<any, any>‘
ts语法有严格的格式,如果我们在处理响应数据时,出现了axios响应中非默认字段,就会出现标题那样的警告,我们可以通过创建axios.dt.ts解决这个问题。
2025-05-06 17:39:07
1176
原创 vue3 computed方法传参数
我们对computed的基础用法不陌生,比如前端项目中经常会遇到数据处理的情况,我们就会选择computed方法来实现。但大家在碰到某些特殊场景,比如在template模板中for循环遍历时想给自己的计算属性传参,这个该怎么实现呢,很简单,在computed里返回一个函数就可以了,代码式例贴出来了,希望能够帮助你!
2025-05-06 17:07:45
1143
原创 vue3 computed方法使用详细讲解
Computed方法用于创建计算属性,它的值由其他响应式数据计算得出,并且会在依赖数据发生改变时自动更新。因为vue3兼容vue2的选项式api,所以习惯用vue2的小伙伴可以直接用vue2的方法写是没有问题的。
2025-05-06 14:29:27
1271
原创 vue3如何配置环境和打包
很多新手友友们或刚从vue2切换到vue3的同学,对vue3不同环境配置和打包有很多困惑的地方,Jenna这就把vue3打包配置流程详细的写下来,你们只需要copy就好啦。
2025-03-07 15:28:08
1961
原创 什么是响应式设计?如何实现响应式网页?
哈喽友友们好,响应式开发是我们在前端开发中经常遇到的需求,下面是针对开发提供的几种方案:响应式设计(Responsive Web Design, RWD)是一种网页开发技术,旨在使网站能够根据用户设备(如桌面、平板、手机)的屏幕尺寸、方向和分辨率自动调整布局和内容显示,从而提供最佳浏览体验。使用相对单位(百分比、em、rem)代替固定单位(如px),使元素根据屏幕尺寸动态缩放。图片、视频等媒体资源通过或object-fit等属性自适应容器。
2025-02-26 11:53:57
2946
原创 分析三大主流跨平台开发框架:Uniapp、React Native、Flutter
对于新手或希望快速变现的开发者:建议从Uniapp/Vue切入,因为其学习成本低,且能够快速覆盖多个平台。对于全栈工程师或希望抢占技术高地的开发者:建议掌握Flutter,因为其性能优越,且随着Fuchsia OS的推进,可能成为下一代跨平台标准。对于老牌团队或希望深耕React技术栈的开发者:建议继续使用React Native,并关注其新架构(如Fabric/TurboModules)的落地情况,以充分利用其性能优势和生态优势。
2025-02-21 18:19:13
1699
原创 deepseek的安装和使用
通过以上步骤,您可以成功安装并使用DeepSeek。无论是通过API、Web UI还是命令行界面,DeepSeek都能为您提供强大的智能助手功能。或者根据配置文件中的服务器端口等参数进行启动。
2025-02-18 16:18:26
2052
原创 使用nvm管理多版本node
下载链接:官网地址:https://github.com/coreybutler/nvm-windows/releases注:安装路径必须是英文,安装路径默认就行。
2025-02-17 17:48:57
438
原创 uniapp开发微信小程序时怎么分包,详细教程
我们用uniapp开发微信小程序时,几乎每个开发者都会在真机调试环节遇到包体积过大无法进行模拟的问题。微信小程序官方规定每个包的大小不能超过2MB。如果超过这个体积这时候我们就需要去分包了,分包的意思就是把你当前体积过大的包分成若干个子包,避免单一包过大的情况,下面有详细代码,帮你解决这个问题~
2025-02-14 10:46:56
2123
原创 正则表达式:如何匹配邮箱
本地部分(local-part):可以包含字母、数字、点()、下划线()、连字符()等字符。@符号:分隔本地部分和域名部分。域名部分(domain):由字母、数字、点()、连字符()组成,并且必须以字母或数字开头和结尾,中间可以包含若干由点分隔的子域。顶级域名(TLD):域名部分的最后一部分,通常由2到6个字母组成。
2025-02-13 17:03:22
1165
原创 uni-app app.vue中onLaunch函数和首页onLoad异步问题
onLoad(){//token是我在vuex中存储的数据,你们可以自定义自己存储的变量//有token就好办了,直接写代码就好啦,我们不是本来就要解决token获取不到的问题嘛hhhhhh}else {//正常因为异步问题我们这个时候大概率是拿不到token的,所以我们需要在这里定义app.globalData.loginCallBack回调方法//这里res就是你要的token,既然拿到你想要的数据了,下面就可以随便写代码啦,开始涂鸦吧!//你的代码你的代码你的代码你的代码。
2025-02-13 16:04:50
1080
原创 防抖和节流的使用
以上就是防抖和节流手动和插件两种使用方法和介绍啦,Jenna很乐意给友友们做问题解答,希望我们的思维能碰撞出技术的火花~是 lodash 提供的防抖函数。你可以将需要防抖的函数和延迟时间作为参数传递给。是 lodash 提供的节流函数。你可以将需要节流的函数和节流间隔作为参数传递给。除了上面介绍的手写防抖和节流的方法,我们还可以使用。,它将返回一个防抖后的函数。,它将返回一个节流后的函数。先说一下防抖和节流的概念。
2025-02-12 16:24:28
965
原创 小程序位置GCJ-02转换成WGS-84
首先介绍下WGS-84:是国际上通用的坐标体系,目前是全球范围内定位和测量的统一基准。GCJ-02:是由中国国家测绘局(现为中国国家测绘地理信息局)制定的地理信息系统的坐标系统。综上可知,GCJ-02坐标系是在WGS-84坐标系的基础上,通过加密算法对经纬度数据进行加密处理得到的。这种加密算法会加入随机的偏差,使得公开的坐标数据与真实的坐标数据之间存在一定的偏移。
2025-02-10 17:33:52
887
原创 git的基础使用
仓库(Repository):Git 仓库是用于存储项目文件的地方,它可以是本地仓库或远程仓库。分支(Branch):分支是一个独立的开发路径,用于在项目的不同版本之间进行切换和合并。提交(Commit):Git 通过提交来记录项目文件的修改。合并(Merge):合并是将一个分支的修改合并到另一个分支的操作。这些是 Git 的基本概念和使用方式,通过学习和使用 Git,可以更好地管理和追踪项目的版本历史。命令查看当前项目的状态,包括新增、修改和删除的文件。命令提交暂存区的文件修改到仓库,并添加修改描述。
2025-02-08 15:54:20
208
原创 微信小程序拍照授权流程,实现拍照功能
微信小程序调用系统摄像头完成拍照功能,通过以下三个步骤就可以完美实现调用uni.authorize方法,scope:'scope.camera',来让用户授权,(因为涉及到隐私,我对弹窗中的内容做了马赛克处理hhhhhh)2.拍照功能:使用uni.chooseMedia拍照或从相册中选择图片用户同意授权摄像头权限后,我们就可以直接调用uni.chooseMedia方法进行拍照了以下是这个步骤的代码:3.最后处理用户拒绝授权的解决方法用户拒绝授权后会到uni.authorize方法的fai
2025-02-08 13:29:06
4556
原创 微信小程序 获取位置权限,用户拒绝授权后重新引导用户授权
在微信小程序开发中,有很多场景需要强依赖用户位置信息,但获取位置信息必须要显式的经过用户授权,然而很多用户对授权比较敏感,可能会点击拒绝,本文介绍如何用户拒绝授权后重新引导用户授权。
2025-01-24 10:08:46
2151
2
原创 微信小程序实现后台定位和实时位置更新
最近在做小程序时遇到了一个棘手的问题,通过uni.getLocation方法只能在小程序中才能获取用户位置,但我们业务场景需要小程序在切到后台时也能持续不断的获取位置信息,在查看了文档之后我又重新调整了方案,才最终实现了小程序前后台位置获取和位置实时更新,这个过程踩了不少坑,我把完整的步骤和避坑方法详细罗列出来,希望能帮到大家!
2025-01-23 14:06:20
4045
12
原创 微信小程序如何使用蓝牙,详细步骤
在蓝牙初始化成功后调用uni.startBluetoothDevicesDiscovery开启蓝牙搜索功能,搜索成功后需要调用uni.onBluetoothDeviceFound方法去寻找你想要找的设备,uni.onBluetoothDeviceFound方法调用成功后,按照我贴的代码获取蓝牙设备返回的数据段,与你们后端返回的数据进行比较,匹配成功,就调用uni.stopBluetoothDevicesDiscovery方法关闭蓝牙搜索,减少资源消耗。
2025-01-21 15:44:04
3990
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅