- 博客(21)
- 收藏
- 关注
原创 ref和reactive的区别
目前vue3已经使用的很广泛了,但是有些小细节却是我们所没有过多深究的,今天就其中的一个小点,进行整理。1、ref可与包装任意类型(数字,对象,字符串等),访问的时候通过.value获取对应的值。1、ref对基本类型使用轻量劫持,对对象内部调用reactive的Proxy实现。当你需要一个简单的响应式引用时,使用 ref 是一个不错的选择。2、reactive仅支持对象和数组,可以直接访问属性值。适合用于基本数据类型、单一变量、或需要在模板中绑定的值。更适合用于复杂的数据结构,如嵌套对象、数组等。
2025-12-26 10:31:23
46
原创 在vue3项目中引用Tailwind CSS
最近开始新的项目的开发,团队也在一直扩大,原有的css样式定义规范,也开始稍显吃力了,所以果断引入Tailwind CSS,虽然体积稍显大了一点点,但是为了后期维护,还是决定启用它了~~配置PostCSS(如果你使用Vue CLI创建的项目),在。通常是main.ts(main.js)中引入css文件。文件,这是Tailwind CSS的配置文件。在项目中创建一个CSS文件(例如。
2025-12-19 15:47:18
90
原创 正则校验-手机号和座机号校验
手机号和座机号的正则表达式可以用来验证输入的号码格式是否正确。以下是针对中国手机号和座机号的正则表达式及其示例。:对于大量数据验证时,建议使用更高效的正则匹配工具。:根据实际需求调整正则表达式,例如是否允许分机号。:如果需要支持国际号码,可进一步扩展正则表达式。开头,区号为 2-3 位数字,后接。可以将两种正则表达式组合在一起,用。的数字,后面跟随 9 位数字。3、同时验证手机号和座机号。和 7-8 位数字。
2025-09-22 21:04:07
348
原创 使用axios封装request请求
Axios是一个基于Promise的HTTP客户端,用于浏览器和node.js。它非常流行,因为它提供了简洁的API,支持Promise API,允许进行请求拦截和响应拦截等高级功能。这样的用法,这实际上是通过Vue的原型链注入Axios实例来实现的。可以在Vue应用中全局配置Axios,使其可以通过。我们通过封装,进一步简化页面的请求,创建request.js文件。在Vue.js项目中,Axios经常被用来处理API请求。在Vue.js项目中使用Axios时,你可能会看到。记录bug不断地我。
2025-07-07 15:39:07
377
原创 uniapp-qrcode生成二维码
1、通过软件生成二维码(例如:草料二维码),适用于比较固定且单一的时候的使用。2、通过插件形成,适用于公司进行物品登记等多次使用的时候。此次使用的是插件uniapp-qrcode。业务需求,需要在手机端生成一个额可以访问的二维码。生成条形码也可使用该插件。记录不断bug的我。
2025-07-07 14:55:27
360
原创 Cookies,SessionStorage和localStorage
前端数据存储方式比较 前端常用的数据存储方式包括Cookies、sessionStorage和localStorage。 Cookies:存储量小(4KB),每次HTTP请求自动携带,适合身份认证,但性能消耗较大。 sessionStorage:存储量5MB,会话级别存储,关闭页面数据消失,适合临时数据。 localStorage:存储量5MB,数据长期保存,需手动删除,适合持久化存储,但不支持复杂数据类型。 三者各有优缺点,应根据需求选择合适的存储方式。
2025-07-07 10:22:31
1558
原创 vue通过url下载图片-跨域问题
本文介绍了通过前端技术实现隐私图片的安全下载方案。针对包含敏感信息的图片,采用el-button替代el-link进行下载控制,通过设置disabled属性防止二次点击。核心实现步骤包括:1)使用canvas将图片转换为Base64格式;2)解决跨域问题(crossOrigin设置);3)通过动态创建a标签触发下载。该方法既保证了图片下载功能,又有效保护了上传者的隐私信息,适用于需要严格管控的图片下载场景。
2025-07-04 16:38:39
207
原创 VUE部署后刷新页面显示404
当我们设置mode为history时,前端发送路径的服务器时,服务器端不认识省略#的url,所以返回404。2、hash模式解决了通过http请求来切换页面,改变路径,可以直接改变页面,无需进行网络请求,这叫前端路由,在hash模式下改变的是#中的信息,项目编写完就开始在服务器部署了,不知道小伙伴有没有遇到过,从首页通过导航点击进入子页面,没有问题,但是进入后刷新页面就会报错404。该模式下,发送请求只会截止到/#前,所以对于服务器端来说,即使没有配置location,也不会返回404。
2025-07-04 15:40:59
392
原创 css-添加右下小三角
在css中,为指定的div添加三角小图表,可以使用::before和::after伪元素,结合border一起实现。这样我们就能准确的通过css控制三角形的形状,大小和位置且不需要添加多余的元素,可以减少代码量。的大小(这里是10px),你可以改变三角形的大小。这种方法非常灵活,允许你轻松地调整三角形的位置和大小。为透明,我们可以创建一个指向右下角的三角形。:这两个伪元素用来创建三角形。属性为空字符串来创建它们,并使用绝对定位(相对于。
2025-07-04 11:40:13
336
原创 UView UI内置文字换行和省略号
在uview中文字换行,可以使用其内置样式u-line-1,u-line-2,u-line-3,u-line-4,u-line-5五个类名在文字超出内容盒子时,分别只显示一行、两行、三行、四行、五行+省略号。在App.vue文件中引入。
2025-07-04 10:05:12
183
原创 uni-app界面上传图片报错
手机端上传图片,报错‘a padding to disable MSIE and Chrome friendly error page’或者‘413REQUEST ENTITY TOO LARGE’,出现这两种文字的时候,通常是由服务器磁盘空间不足导致的。可通过/usr/local/nginx/logs/error.log日志检查到。1、清除垃圾日志或者是其他垃圾程序。2、修改nginx配置。
2025-07-04 09:35:52
403
原创 uni-app跨域请求
如果仍有问题,可以添加vue.config.js,里面配置和vue跨域配置一样。在manifest.json文件 --》源码视图,在里面添加proxy代理。
2025-07-02 10:57:58
333
原创 uni-app实现手机拍照、上传图片、图片展示、删除和预览
API 将上传或拍照的图片,返回的tempFilePaths[0]就是图片地址,如果只上传一张可以直接使用,如果为多张,地址不能直接使用,需要将其放入新的数组中,循环遍历出来。indicator:图片指示器样式,可以是default(底部圆点指示器)、number(顶部数字指示器)或none(不显示指示器)。longPressActions: 长按图片显示操作菜单的配置,如果不填,默认为保存到相册。complete: 接口调用结束的回调函数(无论成功或失败都会执行)。fail: 接口调用失败的回调函数。
2025-06-26 15:23:42
718
原创 uni-app中template和block的区别
渲染方式template编译后会生成真实节点;block仅作逻辑容器,无节点输出。复用性template可跨组件调用;block仅限当前组件内控制流程。数据隔离template通过data属性传递独立数据;block直接共享父组件数据。适用场景template适合封装复用UI片段;block适合条件渲染或循环渲染内容分组。注意:在uni-app中,block标签在小程序端编译为<block>,在H5端会被移除,仅保留子节点。
2025-06-24 16:56:57
550
原创 常见的数组操作(es5)
4.1 创建一个新的数组,先数组为原数组中每个元素都调用一次提供的函数后的返回值,常用于做运算,不能过滤原有数组和原有数组元素。里面三个参数分别为循环中当前元素(item), 所在数组中的位置(index),从0开始,循环的数组数组。返回数组中满足条件的元素,形成新的数组,元素只能做布尔类型判断,不会改变原有数组,主要用于数据过滤。,找不到则为-1,必传参数为所需查找的元素,选填参数为开始查找的位置。,找不到则为-1,必传参数为所需查找的元素,选填参数为开始查找的位置。查找参数元素在数组中的位置,
2025-06-24 10:15:51
169
原创 常见数组操作(es4)
不改变原数组,只截取指定位置的数组,形成一个新的数组,里面的两个参数分别是开始位置和结束位置,下标从0开始计算,如果只有一个参数,则默认从指定位置到尾部。: 直接console.log(a.join(" ")),得到的还是原有的数组,如果想得到新的拼接数组需要将其赋值给新的与元素。删除数组中的任意元素,需要两个参数,要删除的位置和删除的个数,得到的是删除元素的新数组。数组中数据的添加,通过此方法将需要添加的数据添加到数组的最后面,改变原数组长度。对数组进行排序,只会改变原数组的顺序,不会生成新的数组。
2025-06-24 09:07:43
270
原创 vue2+Element UI项目创建
一、vue2项目创建二、Element-UI引入并使用三、配置路由四、配置axios安装Node.js(建议v14.x+)选择配置BabelRouterVuexLinter,其他按回车使用默认配置。安装。
2025-06-19 16:31:00
974
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅