- 博客(54)
- 收藏
- 关注
RSS订阅原创 JavaScript 中 apply、call 和 bind 方法的手写实现
本文介绍了JavaScript中apply、call和bind三个方法的手写实现。call方法通过将函数绑定到context对象并以逗号分隔参数执行；apply方法与call类似但参数以数组传递；bind方法返回新函数并永久绑定this和预设参数。每个方法实现都包含参数处理、this绑定、函数执行和清理临时属性等步骤，并提供了测试代码验证其正确性。这些自定义实现有助于深入理解这三个核心方法的工作原理，展示了如何通过原型扩展为所有函数添加新方法。
2025-06-12 15:56:30
399
原创 vue防止按钮重复点击方案
本文总结了Vue中防止按钮重复点击的4种方案：1)禁用按钮与状态锁定，通过isLoading控制按钮状态；2)使用CSS的pointer-events属性禁用点击；3)自定义指令实现统一防重逻辑；4)使用防抖函数延迟执行。重点推荐自定义指令方案，可复用性强，支持配置防抖时间和加载状态。文中提供了完整的代码示例，包括禁用样式、加载动画等实现细节，适用于表单提交等常见场景。
2025-06-11 15:27:06
287
原创 javaScript switch语句替代方案
JavaScript中替代switch语句的优雅方案包括：对象映射（使用键值对关联处理逻辑）、Map数据结构（支持任意键类型）、策略模式（封装独立函数）、函数式编程（高阶函数组合）以及数组映射（利用includes检查值）。这些方法相比传统switch更简洁、易维护且扩展性强，如actions[action]?.()和strategies[action]?.()的调用方式避免了冗长的case语句，同时保持高性能和可读性。根据不同场景可选择最合适的方案优化代码结构。
2025-06-10 13:59:07
780
原创 vue3 简易的pc端音频播放器组件
本文介绍了一个基于Vue3的简易PC端音频播放器组件，主要功能包括：播放/暂停控制、进度条拖动、当前播放时间/总时长显示以及音频文件名展示。该组件采用Composition API实现，核心功能包含：通过audio元素实现音频控制，通过进度条事件处理实现播放进度交互，以及格式化显示播放时间。组件封装了完整的播放控制逻辑，包括鼠标/触摸事件处理，支持响应式操作。代码展示了模板结构、脚本逻辑（如播放控制、进度更新等）和样式实现，是一个轻量级且功能完备的音频播放解决方案。
2025-06-09 15:20:22
313
原创 javascript中Cookie、BOM、DOM的使用
DOM 是浏览器提供的一个接口，用于操作 HTML 文档的结构和内容。DOM 提供了一组对象和方法，用于访问和修改 HTML 文档的元素、属性和内容。BOM（Browser Object Model）是指浏览器对象模型，它提供了与浏览器交互的接口和对象。BOM 提供了丰富的方法和属性，用于与浏览器进行交互，例如打开新窗口、导航、获取用户输入等。在客户端存储小型文本数据（通常 ≤ 4KB），常用于会话管理、个性化设置等场景。
2025-06-06 23:20:38
1457
原创 javascript 中 函数this的指向
JavaScript 中 this 的指向规则总结： 全局环境：浏览器指向 window，Node.js 指向 global；严格模式下为 undefined。 绑定规则： 默认绑定：独立调用时指向全局对象 隐式绑定：通过对象调用时指向调用对象 显式绑定：call/apply 指定 this，bind 永久绑定 new 绑定：指向新创建的实例 特殊情况： DOM 事件：this 指向触发元素 箭头函数：继承定义时外层作用域的 this，无法修改 核心特点： this 指向取决于调用方式，而非定义位置（箭头函
2025-06-04 13:26:10
682
原创 ES7、ES8、ES9、ES10、ES11、ES12新特性
ES7和ES8引入了多个重要新特性：ES7新增了Array.prototype.includes()方法用于更直观地检查数组元素，以及指数运算符**简化幂运算；ES8提供了Object.values()/entries()获取对象键值对，字符串填充方法padStart/padEnd实现格式化效果，Async/Await异步编程语法简化Promise使用，以及Object.getOwnPropertyDescriptors()获取对象属性描述符。这些特性分别增强了数组操作、对象处理、字符串格式化和异步编程能力
2025-05-30 13:37:23
1414
原创 vue3自定义指令来实现 v-focus 功能
本文介绍了在Vue 3中实现v-focus指令的方法。通过创建focus.ts文件定义自定义指令，在元素插入DOM后自动聚焦，并在值更新时重新聚焦。随后在main.ts中注册指令，最终在Vue组件中通过v-focus使用该功能。该指令可方便地为输入元素添加自动聚焦特性，提升用户体验。实现过程包括指令定义、全局注册和组件使用三个步骤。
2025-05-27 17:48:14
399
原创 vue3自定义指令来实现 v-lazyImg 功能
本文介绍了在Vue 3中实现图片懒加载的自定义指令v-lazyImg。通过IntersectionObserver API监听图片是否进入视口，当图片可见时才加载真实图片地址。实现要点包括：创建观察器配置阈值参数，定义图片加载成功/失败的处理逻辑，在指令生命周期中管理观察行为，并提供错误图片回退方案。使用时只需在img标签上添加v-lazyImg指令并传入图片URL即可。该方案能有效提升长列表页面的加载性能。
2025-05-26 17:18:26
474
原创 vue3自定义指令来实现 v-copy 功能
本文介绍了在Vue 3中实现复制功能的v-copy自定义指令。指令通过Element Plus的ElMessage提供反馈，支持click/dblclick事件和静默模式。核心实现包含现代API(navigator.clipboard)和传统方法(execCommand)两种复制方式，并通过指令参数定制提示消息。使用示例展示了如何通过按钮和输入框绑定要复制的文本，支持动态更新复制内容。该指令具有良好的兼容性和可定制性，适合需要复制功能的Vue项目。
2025-05-23 22:43:15
858
原创 vue2、vue3项目打包生成txt文件-自动记录打包日期：git版本、当前分支、提交人姓名、提交日期、提交描述等信息 和 前端项目的版本号json文件
在Vue2项目中，通过自定义Webpack插件BranchVersionWebpackPlugin，可以在打包时自动生成两个文件：version.txt和version.json。version.txt记录Git版本信息，包括当前分支、提交人姓名、提交日期、提交描述等；version.json记录项目版本号和打包时间。插件通过读取package.json文件更新版本号，并根据Git命令获取相关信息
2025-05-19 17:32:17
655
原创 vue3 事件处理stop、self、prevent
在Vue.js中，事件处理通过v-on指令（简写为@）实现，用于监听DOM事件并执行相应的JavaScript代码。事件处理器可以是内联的JavaScript语句，也可以是指向组件方法的属性名或路径。Vue支持事件修饰符（如.stop、.prevent等）来改变事件的默认行为，按键修饰符（如.enter、.tab等）来监听特定按键事件，以及系统按键修饰符（如.ctrl、.alt等）来监听组合键事件。此外，鼠标按键修饰符（如.left、.right等）允许监听特定的鼠标按键事件。这些功能使得Vue.js在事件
2025-05-16 11:21:58
459
原创 vue3中无全局的过滤器, 推荐方案。
在Vue 3中，由于移除了全局过滤器的支持，开发者可以通过多种方式实现类似功能。首先，可以将过滤器挂载到全局属性globalProperties上，通过app.config.globalProperties.$filters来访问。其次，可以使用组合式函数（hooks）来实现时间格式化等功能，这种方式更加灵活且符合Vue 3的组合式API设计理念。最后，还可以通过计算属性来实现数据的格式化处理。这些方法都能有效替代Vue 2中的全局过滤器，且更具可维护性和扩展性。
2025-05-16 09:37:14
537
原创 vue3的深入组件-组件 v-model
Vue 3.4 引入了 defineModel() 宏，简化了组件中 v-model 的双向绑定实现。通过 defineModel()，子组件可以轻松与父组件同步数据，并支持默认值、修饰符等功能。defineModel() 返回一个 ref，其值与父组件的 v-model 同步，子组件的修改也会触发父组件的更新。此外，v-model 支持参数和多个绑定，允许在不同属性上使用不同的修饰符。例如，v-model:username.trim 可以处理 username 的 trim 修饰符，而 v-model:a
2025-05-08 22:27:19
802
原创 vue3的深入组件-透传 Attributes
click 监听器会被添加到 <MyButton> 的根元素，即那个原生的 <button> 元素之上。同样的，如果原生 button 元素自身也通过 v-on 绑定了一个事件监听器，则这个监听器和从父组件继承的监听器都会被触发。需要注意的是，虽然这里的 attrs 对象总是反映为最新的透传 attribute，但它并不是响应式的 (考虑到性能因素)。“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。
2025-05-07 18:04:20
876
原创 vue3的深入组件-Props
Vue 组件可以更细致地声明对传入的 props 的校验要求。所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。如果声明了 default 值，那么在 prop 的值被解析为 undefined 时，无论 prop 是未被传递还是显式指明的 undefined，都会改为 default 值。另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。
2025-05-06 16:14:08
1349
原创 vue3内置组件Suspense的使用
Suspense> 组件会触发三个事件：pending、resolve 和 fallback。这意味着如果组件关系链上有一个<Suspense>，那么这个异步组件就会被当作这个<Suspense> 的一个异步依赖。在这种情况下，加载状态是由 <Suspense> 控制，而该组件自己的加载、报错、延时和超时等选项都将被忽略。<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。
2025-05-01 22:23:14
433
原创 vue3基础侦听器 watch watchEffect的详细使用
在setup函数中调用了watchEffect函数，并给该函数传递了一个回调函数，传入的回调函数会被立即执行一次，并且在执行的过程中会收集依赖（收集count的依赖）。注意，onWatcherCleanup 仅在 Vue 3.5+ 中支持，并且必须在 watchEffect 效果函数或 watch 回调函数的同步执行期间调用：你不能在异步函数的 await 语句之后调用它。而当DOM挂载时，会给buttonRef变量的ref对象赋值新的值，副作用函数会再次执行，打印出对应的元素。
2025-04-30 08:44:18
1630
原创 vue3 app.component组件注册、全局注册、组件名格式
如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。但需要注意的是，在 JavaScript 中定义和注册组件时，仍需使用 PascalCase。相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。在父组件中使用子组件时，不太容易定位子组件的实现。一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。动态注册组件允许你在运行时根据需要注册组件，这在构建复杂的单页面应用时非常有用。
2025-04-29 10:20:04
1445
原创 Vue3的内置组件-Teleport详细使用方法
理想情况下，我们希望触发模态框的按钮和模态框本身的代码是在同一个单文件组件中，因为它们都与组件的开关状态有关。对于此类场景，多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上，但都在目标元素中。有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在其他地方，甚至在整个 Vue 应用外部。这样可以确保模态框在页面上的定位不受当前组件的样式影响。
2025-04-28 10:46:35
697
原创 vue3 内置组件KeepAlive的使用
当缓存实例数量超过 max 时，最早缓存的实例会被移除。当 current 的值切换时，被缓存的组件不会被销毁，而是被保留在内存中，以便下次切换时快速渲染。keepAlive 提供了 include 和 exclude 属性，用于控制哪些组件需要被缓存，哪些组件需要被排除。onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。keepAlive 通常用于包裹动态组件，以实现缓存功能。这两个钩子不仅适用于 缓存的根组件，也适用于缓存树中的后代组件。
2025-04-27 14:49:45
515
原创 Vue3的内置组件 -实现过渡动画 TransitionGroup
你还可以通过向 传递 moveClass prop 为移动元素指定自定义过渡 class，类似于自定义过渡 class。enter-active-class：定义进入时的活动类。leave-active-class：定义离开时的活动类。move-class：定义移动时的类（用于列表项的重新排序动画）。这些类允许你自定义进入、离开和移动时的动画效果。
2025-04-26 14:36:25
420
原创 vue3内置组件过渡动画transition
template></div></div><script>setup() {// 在元素被插入到 DOM 之前被调用// 用这个来设置元素的 "enter-from" 状态// 在元素被插入到 DOM 之后的下一帧被调用// 用这个来开始进入动画done();}, 100);// 当进入过渡完成时调用。// 在 leave 钩子之前调用// 大多数时候，你应该只会用到 leave 钩子// 在离开过渡开始时调用// 用这个来开始离开动画。
2025-04-25 23:29:39
1203
原创 Vue3 中使用 vite-plugin-fake-server 的介绍
plugins: [include: './mock', // 设置目标文件夹，将会引用该文件夹里包含 xxx.fake.{ts,js,mjs,cjs,cts,mts} 的文件enableProd: true // 是否在生产环境下设置 mock}),],})注意如果在生产环境下设置了 mock，那么在开发环境下也会使用 mock 数据。mocK 的文件路径plugins: [
2025-04-24 10:59:45
538
原创 Vu3 函数式API：方法函数 isRef()、unref()、toRef()、toValue()、toRefs()、isProxy()、isReactive()
【代码】Vu3 函数式API：方法函数 isRef()、unref()、toRef()、toValue()、toRefs()、isProxy()、isReactive()
2025-04-23 12:54:24
1394
原创 vue3 主题模式 结合 element-plus的主题
CSS 变量是一种在 CSS 中定义可重用值的方式。在主题模式中，可以将颜色、字体大小等样式属性设置为 CSS 变量。然后通过 JavaScript 或 Vue 的响应式特性来切换这些变量的值，从而实现主题的切换var.css:root {.dark {html,body {*,:after,:before {margin: 0;padding: 0;index.scss。
2025-04-21 22:33:53
638
2原创 vue3 defineExpose的使用
当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
2025-04-16 22:41:06
637
原创 Vue 3 的组合式 API-hooks
基本的自定义 Hook</script><template><div></div>路由跳转// 基本跳转// 替换当前路由// 返回上一页// 前进return {goBack,goForward,router在组件中使用示例const {goBack,goForward// 路径跳转// 命名路由带参数})// 带查询参数})// 替换当前路由</script><template>
2025-04-15 22:46:23
893
原创 vue3 ts 自定义指令 app.directive
template>created：在元素的属性或事件监听器应用前调用。beforeMount：在元素插入到 DOM 前调用。mounted：在元素插入到 DOM 后调用。beforeUpdate：在元素更新前调用。updated：在元素更新后调用。beforeUnmount：在元素卸载前调用。unmounted：在元素卸载后调用。v-copy// 确定事件类型和提示消息const message = arg || '复制成功' as stringtry {
2025-04-13 22:47:07
745
原创 从零开始搭建一个 Vue 3 + Vite 的项目
通过 Vite 搭建 Vue 3 项目非常简单且高效。Vite 提供了快速的开发体验和现代化的工具链支持，非常适合现代前端开发。如果你有任何问题或需要进一步扩展功能，可以随时查阅Vite 官方文档或Vue 3 官方文档。
2025-04-11 09:46:17
816
原创 数组的基本使用（push ,pop,unshift,shift ,map ,filter, reduce）
【代码】数组的基本使用（push ,pop,unshift,shift ,map ,filter, reduce）
2025-04-04 19:29:14
652
原创 前端压缩视频(@ffmpeg/ffmpeg)和图片(browser-image-compression)
/ 压缩图片maxSizeMB,try {console.error('图片压缩失败:', error);// 压缩失败则使用原文件},// 初始化 FFmpegtry {// 加载关键资源})// 验证初始化完成if (!throw new Error('FFmpeg 核心加载失败')console.log('FFmpeg 初始化完成');console.error('初始化失败:', err)// 压缩视频if (!.loaded) {
2025-04-03 11:22:07
448
原创 Vue 3 中组件数据传递
通过 props 将数据从父组件传递到子组件。// 父组件：parent.vue。// 父组件：parent.vue。子组件：base-son.vue。子组件：base-son.vue。父组件：parent.vue。
2025-03-31 21:44:51
462
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人