- 博客(39)
- 收藏
- 关注
RSS订阅原创 vue3 生命周期函数（挂载、更新、销毁）
3、销毁变了 onUnmounted , onBeforeUnmount。1、vue3的生命周期就是在vue2的基础上前面增加（on）2、vue3去除创建前后生命钩子，取而代之的为setup。
2025-04-01 17:21:47
210
原创 uniapp image组件mode属性及显示效果
uniapp的图片组件存在一个mode属性，该属性会影响到图片显示的效果，可以说这是一个尤为重要的一个属性，但往往会有的时候忘记其属性及对应的效果就有点懊恼，这篇文章就很直白的为你呈现其属性及其对应的效果。1、scaleToFill（不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image）其余不太常用的便不一一进行展示啦，可以对照下面的属性值及说明进行使用，包可以的~2、aspectFill（缩放填满容器，但是图片可能显示不全）3、widthFix（以宽度为基准，等比缩放长）
2025-04-01 17:21:30
396
原创 dayjs dayjs时间格式化工具（时间计算、时间格式化）
时间格式化，我这边推荐的是dayjs工具函数，因为Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。在前端项目开发中，不可避免的会和时间打上交道，我为什么这么笃定呢，因为避免的人不会来看我这篇文章-_-嘿嘿~~公式大致是：dayjs(结束时间).diff(开始时间，单位)减：subtract(数量，单位)加：add(数量，单位)简单的举例一下使用方法。
2025-03-31 17:08:08
586
原创 vue2 全局封装axios统一管理api
在vue项目中，经常会使用到axios来与后台进行数据交互，axios丰富的api满足我们基本的需求。但是对于项目而言，每次都需要对异常进行捕获或者处理的话，代码会很繁重冗余。我们需要将其公共部分封装起来，比如异常处理，请求拦截等。本文讲述，如何在vue中封装axios。创建utils>request.js文件。创建api>index.js文件。
2025-03-31 17:07:48
180
原创 uniapp 获取dom信息（封装获取元素信息工具函数）
在uniapp开发中，需要获取到dom的信息，需要用到uniapp的指定方式uni.createSelectorQuery()，但是每次需要用到的时候都需要很长一段的繁琐代码，本篇文章将呈现获取dom信息方法封装，话不多说，上菜：
2025-03-27 09:00:42
290
原创 uniapp 自定义展开/收起组件（适配H5、微信小程序等）
可通过text属性传入文本，也可以通过默认插槽传入自定义内容，任君选择~今天遇到啦个需求，内容展开收起功能，没有的用，那边手搓一个吧。
2025-03-27 09:00:08
523
原创 vue3 计算属性（computed）
在 Vue 3 中，计算属性（Computed）是一种基于响应式依赖进行计算并返回结果的功能。它的特点是具有缓存性，即当依赖的响应式状态没有发生变化时，计算属性不会重新计算，从而提高性能。注意点：数据修改时要注意数据地址是否改变，会影响到数据是否能在页面上双向绑定。计算属性在vue3中是以一个方法的形式存在，需要使用时要进行导入再使用。2、get/set方法使用。
2025-03-26 08:14:44
208
原创 uniapp 去除顶部导航栏（隐藏导航栏）
开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。在具体路由下面的style中配置 "navigationStyle":"custom"3、根据平台去除导航栏（举例H5端）全部配置都在page.json文件。1、全平台去除导航栏。2、单页面去除导航栏。
2025-03-26 08:14:21
318
原创 vue3 数据监听（watch、watchEffect）
作用：数据监听语法：watch(监听的数据, (改变后的数据, 改变前的数据) => {})注意点：watch写法上支持一个或者多个监听源，这些监听源必须只能是函数，ref数据，reactive对象，或者是数组类型。
2025-03-25 10:43:20
698
原创 vue 组件开发
封装插件的流程大致为：明确需求、定义 Props 和 Events、使用插槽slot、保持组件独立性、样式隔离、可复用性可扩展性；设计原则遵循单一职责原则、可复用性原则、可配置性原则、单向数据流原则进行对组件进行设计封装。props接收传入数据、emit完成组件事件触发和数据传递、slot使得组件灵活性变强，增加可复用性。如果不考虑好与坏，那全部踢掉，遵循三行原则：（好用就行、好看就行、好写就行）如何封装Vue组件？2、可复用性原则（使组件成为通用的解决方案）3、可配置性原则（增加组件的灵活性）
2025-03-24 16:13:37
246
原创 vue 生命周期钩子函数（创建、挂载、更新、销毁）
本文介绍了Vue的生命周期概念和8个钩子函数的作用和用法，以及在不同阶段可以获取的数据和DOM元素。通过代码示例和注释，帮助读者理解Vue的初始化，更新，销毁等过程。
2025-03-24 08:56:25
214
原创 vue watch数据监听
概念：监听数据变化，当数据更新是自动执行函数应用场景：搜索数据、当一个数据发生了变化需要进行二外的操作时需要用到watch。
2025-03-24 08:56:04
351
原创 vue 插槽的三种形态（匿名插槽、具名插槽、作用域插槽）
特点：可以在引用组件里面使用到子组件的数据。匿名槽口统一叫做：default。特点：可以按需对组件的渲染。
2025-03-23 16:43:45
486
原创 vue 事件修饰符
once 阻止事件重复触发（once与stop不能一起使用，否则再次触发事件，依然会冒泡）(*).lazy 不立刻更新，输入后光标失焦或者回车才更新内容。.prevent.stop 阻止默认事件的同时阻止冒泡。@keyup.enter="enterFn" 回车事件。.stop 阻止事件冒泡(*)(用于子级)语法：表单修饰符 v-model.xxxx。.self 点击自身才触发(用于父级).prevent 阻止默认事件(*).trim 去除前后空格。.number 数值。
2025-03-23 16:41:59
306
原创 uniapp 微信小程序图片下载保存功能
在开发这个功能之前，要先确保小程序的隐私条约是否加上相册（仅写入）权限，设置路径：微信公众平台->账号设置（左下角头像悬停）->用户隐私保护指引（去完善）->相册（仅写入）权限。首先使用uni.downloadFile方法将图片进行下载，然后再使用uni.saveImageToPhotosAlbum方法对下载后的临时图片路径进行保存到本地。
2025-03-22 10:51:34
616
原创 vue3之ref和reactive的区别及特点
小伙子，看到这里说明你的好奇心还挺强呀，说白啦都是定义变量的东西，在你的项目里爱咋咋用，敞开的来就是啦，ref到底都没问题。这样子在一定情况下可以减少代码里面的.value的刻板字段，看起来顺心意点，效果嘛，一个样哈。（最常见的是布尔值、字符串和数字）以及对象作为参数，而 reactive()函数可以替换整个对象实例，但是在使用 reactive()2、在定义一些对象、数组等复杂类型数据倾向于reactive。1、在定义一些原生数据类型的时候基本使用ref。2、正如我们上面讨论到的，ref()
2025-03-22 10:51:01
369
原创 vue项目配置服务器代理，解决请求跨域问题
1、基于vue-cil（webpack）框架项目。字段，模拟请求来自目标服务器。2、基于vite框架项目。
2025-03-21 13:46:38
256
原创 vue项目运行打包环境变量配置
三个文件内容大致相同，不同的为VUE_APP_BASE_API的值。其余同理，即在运行命令的后面增加上--mode xxx。package.json文件。在根目录创建三个文件。
2025-03-21 11:51:22
230
原创 NUXT3 build打包 css文件减少优化
配置后再重新打包，程序上的css等文件的引用会相应的减少，增加seo爬取的友好性。减少css文件优化配置。
2025-02-13 10:21:15
263
原创 NUXT3 build打包运行 代码格式化
程序在后台nitro运行请求后生成html文件，将html文件通过js-beautify工具进行美化后再返回服务端，简单的说就是压缩再解压完再给回用户，很蠢的过程但又暂时解决啦我的燃眉之急，有跟好的方法评论区敲~~~~~~这几天按需求建站，需要做seo优化，目光便来到NUXT3框架的身上，经过讨论决定，便以这框架哐哐哐一顿操作猛如虎，项目一期上线啦，一切看起来也还顺利，直到看到二期优化需求.....在代码压缩都已是常态的世界你让我去把压缩关掉，我xxxxxxx。嗯..........到这个样子的变化-->
2025-02-13 10:14:37
334
7
原创 vue 使用vue-qr插件实现在线生成二维码组件（Vue2 & Vue3）
本文讲解在vue项目（vue2&vue3）中使用vue-qr组件快速实现链接生成二维码的功能，废话不多说，下面直接上代码：
2024-10-17 15:33:55
1058
原创 el-cascader 之省/市/区 区域选择组件封装
基于element-ui的el-cascader级联选择器组件封装一个区域地址选择组件，废话不多说，下面直接上代码：
2024-10-17 14:29:44
486
原创 vue vue-router 项目自动化之-路由自动生成，解放手动配置
但是观察下来，你会发现配置路由这一块会有些许眼熟，正是与我们文件路径重合啦有一个大胆的想法，就是直接使用我们的文件路径当做路由，便可以免去路由配置这一动作本文将介绍如何使用 Vue2+ webpack 实现路由自动配置。
2024-10-15 14:43:29
431
原创 vue项目自动化 - 获取指定文件中的所有文件路径及资源
功能可用于前端vue项目vue-router自动生成、utils工具包统一汇总、store仓库统一汇总等方面。1、webpack require.context(参数一,参数二,参数三)2、vite import.meta.globEager('参数一')例如：（'@/utils',false,/.js$/）参数二（boolaen）：是否获取子目录文件。参数一（string）：指定文件夹路径。例如：（'@/utils/*.js'）参数一（正则）：文件路径及匹配文件。
2024-10-15 14:13:10
554
原创 element-ui el-select组件 传递多个数据
el-select下拉框在项目中是常用到的一个下拉框组件，通过v-model绑定对应的值即可简单完成使用。但是往往会在一些业务需求上，我们得记录多个值时，单独绑定一个值往往已经满足不了我们的开发需求。
2024-10-15 13:52:03
528
原创 uniapp u-view u-popup ios 组件 弹出被覆盖
问题：uniapp开发中遇到u-popup组件弹出被下方fixed定位元素遮挡出现问题平台：iphone 微信小程序端
2024-10-12 11:54:04
740
1
原创 element ui 按需引入
不再使用es2015，改成@babel/preset-env，两者都是用来编译es6语法；好处：分离main.js文件代码，简化代码结构，让代码更加具可读性。版本为4.x，babel配置文件为babel.config.js。3、安装 babel-plugin-component。，我们可以只引入需要的组件，以达到减小项目体积的目的。推荐用代码分离法，也可在main.js中直接书写。在main.js中进行调用js文件。4、 .babelrc 文件配置。2、安装element ui。1、创建vue脚手架。
2023-03-27 23:40:43
245
原创 react使用hook实现TodoList
全篇重点掌握react函数组件的使用、react的hook的定义与使用、函数式组件的父子间通讯、函数式组件的多级组件间通讯等，相应的知识点笔记后期会更新上，尽请期待.....注意点：需要调用ArrDisposeFn(()=>[...arr])回调方法，实现逻辑层与视图层同步改变，如果不调用会出现逻辑层数据改变，视图层数据不更新的bug。整个程序使用到的知识点：自定义组件、父子组件间通讯、多级组件间通讯、hook、自定义hook等。TodoList.jsx文件。Input.jsx文件。List.jsx文件。
2022-12-26 21:25:14
661
1
原创 react数组循环渲染
正常来说我们的页面很多数据都是动态渲染的，我们一般根据一个数组来进行动态渲染。在react里面没有类似vue的指令，所以我们必须自己手动循环生成。
2022-12-23 16:04:18
2494
原创 react多个类名写法
在react里面还有一个html属性也是和js的关键字冲突的。label标签有一个for属性，也是和js的for是冲突的，所以在react里面使用labelFor来代替(了解)。当然我们也可以使用类名的方式控制样式。但是要注意，因为class属性与es6的class关键字会产生冲突，所以在react里面使用了className代替了class属性。
2022-12-23 15:21:51
834
原创 react的行内样式和外链样式
注意点：值得注意的是，style的后面我们写了两对大括号。最外面的一对是指我们要在html里面开启js执行环境，里面的一对是我们写的对象语法的括号。其中外链样式最简单，只需要在组件里面引入对应的外部样式就行。如果你的行内样式没有生效，看一下是不是写少了一个花括号。MyStyle.css文件。MyStyle.jsx文件。
2022-12-23 15:05:52
482
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人