oumae-kumiko-CSDN博客

原创【vue3 路由使用与讲解】vue-router ：简洁直观的全面介绍

vue-router,动态路由,动态添加路由addRoute,命名路由name,路由重定向redirect,路由传参params,query,组合式Api,路由跳转页面router-link,push,replace,获取路由参数,路由导航守卫,路由模式,路由缓存,嵌套路由,路由别名,声明路由

2024-03-02 03:43:15 2768

原创 vue3.4新特性：v-bind同名简写、defineModel

在上一篇 vue3.3 文章中，虽然写了 defineModel ，但并未考虑到写的时候3.4版本里defineModel 才作为稳定的API正式加入( 两年没看vue3 更新的内容了... )，并增加了对支持修饰符相关的内容；基于此，如果在vue3.3的版本里使用defineModel碰到某些错误的话，也许就会是该版本不支持，vue3.4也算是较为重要的一个小版本吧，建议还是使用3.4而不是3.3defineModel是配合父子组件使用的，所以下面分为2个代码块作为案例演示用法：

2024-02-29 21:59:05 888

原创 vue3.3 版本新特性总结 defineOptions、defineModel、defineSlots、defineEmits

新特性主要围绕着父子组件之间的相关的功能更新。本文主要以代码展示的风格来介绍功能。大家可以直接搞个父子组件，把对应代码复制粘贴进去，然后一个个试验即可。自己也动动手，加深理解。除了标题的4个宏指令，还有 toRef 和toValue，但让我挺无语的。。感觉没啥用，求指教。。以下案例包含的vue3.3新内容：defineOptions、defineModel、defineSlots、defineEmits、toRef、toValue

2024-02-29 21:08:32 1061

原创【vue3】命令式组件封装，message封装示例；（函数式组件？）

仅做代码示例；当然改进的地方还是不少的，仅作为该类组件封装方式的初步启发；理想大成肯定是想要像 `饿了么` 这些组件库一样。

2024-02-29 01:25:02 1403

原创 vue3跨组件(多组件)通信：事件总线【Event Bus】

【vue3/vue2】event库概述：本次所使用到的库为通用库，若在node环境使用则无需npm安装，本身自带的；浏览器环境下使用才需要npm安装。events库是从 Node.js 上移植Events模块的功能，因此可用的API完全一致（除了仅限在node环境下使用的API）；若想进一步深入，去看node官网的event文档即可。（注意版本差异！根据npm文档的描述，该库目前并未同步最新Node里对应的events模块）在VUE3的官方文档中描述到：【平级组件或是跨越多层嵌套的组件间通信，

2024-02-08 10:32:07 6017

原创 Fabric 画布缩放、拖动、初始化大小

作为自己项目的基础功能之一，自然是需要第一个回顾记录的了！1.拖动画布2.缩放画布3.监听窗口大小变化，从而初始化画布位置、大小涉及相关API：键盘快捷键功能、滚轮功能、监听窗口变化、fabric.js相关事件及API；

2023-12-08 11:29:46 2976

原创【vue3】defineSlots, useSlots, $slots 记录/讲解

【vue3】defineSlots, useSlots, $slots 记录/讲解。插槽＜slot＞ / v-slot 的使用与讲解。仅支持 Vue 3.3+ 的版本。就因为新增了这API，让我写了这文章。其他功能描述同 $slots 一致。这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。defineSlots() 只接受TS类型参数，没有运行时参数。也就是说你项目不是TS的话，就不用看这个了。它还返回slots对象，该对象等同于在 setup 上下文中暴露或由us

2023-08-02 18:35:51 11196

原创项目架构：eslint 代码检测、提交代码审查

项目代码开发规范配置；项目代码 git commit 提交时自动检测是否符合规范；

2022-12-01 17:40:01 1571 1

原创项目架构：prettier 提交检测、全局||自动格式化代码

1、每次保存文件后自动格式化；2、每次提交代码前运行命令进行全局格式化；3、每次提交代码时自动对提交的文件进行代码格式化；

2022-12-01 17:19:15 2316

原创项目架构：husky + lint-staged + eslint - git提交前自动检查代码

拒绝代码潜在错误，尽量减少代码屎山，从我做起~~目前该方法在 git 提交代码前时，无法检测处理ts 类型报错，Ts相关报错由于不是eslint的报错，所以无法处理。如果有小伙伴们知道解决方法的，欢迎告知、交流~~（个人使用的是vite）

2022-09-19 22:38:09 797

原创【vue3组件之 keep-alive 功能细节讲解】优先级、生命周期、离开&再度激活、缓存销毁

注意事项：1.优先级:如果`exclude`和`include`内都有同个组件名，`exclude`优先级高于`include`2.缓存销毁:`max`当已缓存的组件数量超过`max`值，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。3.生命周期:被缓存的组件才会调用`activated` 这些缓存相关的生命周期 ,换句话说就是`exclude`内的组件不会触发activated！！4. 离开组件、再度激活:当组件在`

2022-04-04 23:45:41 5073

原创【vue3 之 emits & $emit() 讲解】监听子组件事件、emit事件验证、options写法、composition setup写法

emits 可以是数组或对象，从组件触发自定义事件，emits 可以是简单的数组，也可以是对象。1、数组形式和对象形式的值为null，表示该emit事件无验证函数。2、对象形式且值为函数表示该 emit 配置了事件验证验证函数必须有return 真假值，真值表示通过验证，假值则 vue 会自动抛出 warn 警告！不 return 值默认当做失败，抛出 warn 警告！验证函数主要就是验证参数是否正确，并不会在 return false 时中断emit() 事件！

2022-04-03 23:18:34 28989 1

原创【vue3 组件生命周期流程 & 功能】13个生命周期详解

单一组件、父子组件的生命周期。仅限开发环境下有效的生命周期。不讲SSR的生命周期：serverPrefetch。也就是只讲客户端的13个生命周期！this的数据：除了`beforeCreate`，其他12个生命周期的 this 都能获得组件实例对应初始化完成的内容。`beforeUpdate()` 永远只在所有父子组件的 `mounted() `之后才会触发！例子里的生命周期根据功能进行了划分，生命周期的顺序都标了数字！setup() 调用时间，与调用时间相关功能的讲解。onMounted之类的

2022-02-27 22:01:38 5708

原创【vue3 Pinia使用与讲解】vue3新一代的Store应用工具

本文章旨在快速帮助上手Pinia基础与核心部分。Pinia 的主要 Api * createPinia - Plugins * defineStore * storeToRefs * mapState * mapGetters * mapActions * getActivePinia- Store的核心配置： + State + Getters + Actions与 Vuex 相比，Pinia 提供了一个更简单的 API，没那么死板。

2022-02-24 01:21:41 13085 3

原创 vue3 `inheritAttrs`属性继承与`$attrs`使用与讲解

当template有根元素的时候，绑定到组件上的属性和事件会自动继承到根元素上。当组件返回单个根节点时，非 prop 的 attribute 将自动添加到根节点的 attribute 中。同样的规则也适用于事件监听器：如果组件是片段(多节点)，并且组件标签绑定了attr和事件，都不会继承，并且会抛出警告！也就是说，片段组件需要将 inheritAttrs 设置为 false。当然不设置为 false 也有个好处，抛出警告告诉编程人员，这个组件是多节点的！你对该组件标签设置的 attr 和事

2022-02-12 00:23:41 7183 3

原创【vue3 ＜script setup＞ props 使用与讲解】defineProps、withDefaults | ts类型限制、默认值设置

本章主要涉及api内容：defineProps、withDefaults；defineProps 只能是要么使用`运行时声明`，要么使用`类型声明`。同时使用两种声明方式会导致编译报错。；defineProps、withDefaults 是只在 <script setup> 语法糖中才能使用的编译器宏。他不需要导入且会随着 <script setup> 处理过程一同被编译掉。withDefaults 只能与基于类型的defineProps声明一起使用；参数类型、默认值、是否必传、自定义验证。

2022-01-28 00:55:10 59145 15

原创【深入vue3 之 directive 指令的使用与讲解】

自定义全局指令：实例app.directive()参数：{string} name{Function | Object} [definition]返回值：如果传入 definition 参数，则返回应用实例。如果不传入 definition 参数，则返回指令定义。用法：注册或检索全局指令。自定义指令概念：在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。自定义指令是vue提供给我们用原生DOM封装一系

2022-01-26 23:19:13 24398 8

原创【VUE3 之 v-model 绑定子组件的新特性讲解 & 使用】绑定单个&&多个 v-model、自定义修饰符

本章内容：v-model绑定子组件的默认方式、绑定多个v-model、自定义v-model修饰符。讲解知识点:`v-model`参数、多个`v-model`绑定、自定义`v-model`修饰符自定义修饰符：对于带参数的 v-model 绑定，生成的 prop 名称将为 arg + "Modifiers"，然后`[参数名]Modifiers.[修饰符名]`使用`props`的内容：`[参数名]`，自定义修饰符的为`[参数名]Modifiers``emits`的内容：`update:[参数名]`

2022-01-10 15:35:34 3837 1

原创【vue 3 之 `watch()` & `$watch()` 侦听器的使用与讲解】各侦听源&各配置参数案例讲解

watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。缓冲回调：缓冲回调不仅可以提高性能，还有助于保证数据的一致性。在执行数据更新的代码完成之前，侦听器不会被触发。简单来说，同步修改数据时，修完操作执行完毕后才会触发回调。注意是同步！所以异步操作的时候，要注意多次触发watch的问题。（所有同步操作为1次，异步操作有几次就触发

2022-01-10 14:36:28 2061

原创 Element Plus 的 ColorPicker 颜色选择器：定制按钮

截止至饿了么 Element Plus 2.8.1版本的组件库，color picker组件不支持自定义颜色选择弹窗里的按钮！只好另辟蹊径解决这个问题。

2024-08-29 19:20:28 365 1

原创【vue/JS】拖拽图片加载图片文件到页面&画布等

2、声明拖拽的区域，为该区域html标签添加drop拖拽事件。4、循环文件列表并且判断文件类型。5、最终读取文件后加载图片即可！1、阻止浏览器默认行为事件。3、获取拖拽的文件数据列表。

2024-07-26 18:03:24 199

原创【激光雕刻机上位机的成品软件】核心功能 - 参考wecreat

体验软件如上，自行下载体验。价格5W，本人为 wecreat 创立之初上位机软件开发的核心员工，详细内容私信我。由于该公司快3个月未给我竞业补偿了，对我不仁那我也不必客气。届时所有协议作废时，正式卖，我会从0写一份图形编辑器那部分的功能（也就是最重要的核心功能），百分百不侵权，毕竟要是侵权，我也怕有麻烦。他的3个功能，素材首页、个人中心、编辑器，编辑器才是重点！耗费开发精力的部分！其他2个在开发上来说都还是小问题，而且涉及素材侵权我也不会提供该部分的功能。再三声明，出售范围仅限非侵权的部

2024-06-02 16:09:55 396

原创 (Vue3+TS+Volar) 全局组件配置类型声明的最佳实践

简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。

2024-05-14 19:02:10 1059

原创【element-plus】自动导入 + typescript 提示 + 自定义主题色

第三步：使用组件库时获取ts类型提示 > tsconfig.json 文件的 types 添加ts文件路径。编辑器安装 Volar 插件(新名字 Vue - Official)第一步：安装自动导入功能所需的插件。2、引用加载组件类型提示。

2024-05-11 16:15:24 526

原创【JS】web浏览器访问本地系统字体列表

1、核心API： queryLocalFonts；以下为主要注意事项：注意浏览器最低版本需用户授权网站是否安全，若不安全默认禁止获取本地字体列表# 代码讲解if ("queryLocalFonts" in window)用来判断用户浏览器版本是否可调用queryLocalFonts方法。但是！如果该网站不安全，那么谷歌浏览器强制禁止获取系统字体，queryLocalFonts方法一定为undefined

2024-05-07 19:56:56 1003

原创获得fabric.js的ts类型声明提示

1、安装fabric的TS声明库：npm i --save-dev @types/fabric2、重启编辑器。3、点赞收藏来一波

2024-04-10 15:46:48 247

原创【vue-router 路由篇】传入私有数据给目标路由地址而不显示在url上

也许还有另一个场景，不方便缓存路由时，返回上级路由时，上级路由又不一定要重调接口获取数据（直接使用缓存数据），则也可以通过该方式传个判断值给目标进行判断（虽然也可以在pinia vuex之类的里面存相关变量去判断，但需要不断的修改该变量，这种算是下下策）。也许你会碰到这样一个场景，在【返回上级路由，或者跳转目标路由】时，在部分场景下如果临时需要传给目标路由相关数据，则这篇文章必定会对你有所帮助。

2024-03-16 01:50:27 473

原创 vue2 / vue3 路由(返回&跳转)时判断 + 取消跳转

vue2 / vue3 路由(返回&跳转)时监听表单变化，提示相关信息，取消跳转等

2024-03-16 00:57:20 543

原创 Vue3 重置&覆盖 reactive 数组数据的方法

核心要点：通过splice删除原数组内的所有数据，并添加新的数据进去。潜在影响：大数据量下，splice重置数组和 ref 的.value重新赋值重置数组，哪个耗时短还需自行测试。通过 `splice` 传入0 和 Infinity 来删除原数组从头到尾的内容，然后`...[]`将新数据丢进响应式数组里。

2024-03-06 16:33:12 1948

原创【axiox】前后端接口通讯数据交互

重要全局配置：axios.create(); 设置axios请求的公共配置信息。service.interceptors.request.use((config)=>{}) 请求拦截器service.interceptors.response.use((res)=>{},(err)=>{}) 响应拦截器const source = axios.CancelToken.source(); 用来取消接口请求的。

2024-03-02 04:12:07 526

原创【JS】indexedDB基本入门使用；

本文基本仅做个人简单学习记录；

2024-02-28 15:35:30 404

原创【JS运算符/表达式】`?.` `??` `...` `,` `&&=` `||=` `?:`等运算符讲解

逻辑与赋值（&&=）；逻辑或赋值（||=）；空值合并运算符（??）；逻辑空赋值（??=）；可选链运算符（?.）；... 展开语法；逗号运算符（,）；条件（三元）运算符；自增、自减的前缀式后缀式；delete；取余 %；加法赋值运算符 +=；加减乘除；

2024-02-25 22:52:29 229

原创【JS解构】数组解构、对象解构

而且解构语法直接的特性基本都是能一起使用的！例如 xx: newXX = '默认值'

2024-02-25 19:10:40 382

原创【颠覆旧知识】JS的原型链搜索原则；

在当前对象未找到该属性，就一直向上查找，找到就停止并返回该数据，如果直到object的原型也没找到，就返回undefined ，如果是调用方法就报错, 该 xxxx 不是一个函数。直到某个的原型的值为null都没找到该属性的话则终止，然后返回 undefined ，如果是调用方法就会导致报错, xx is not a function。没想到是在搜索过程中遇到原型的值为null时，就停止，并不是就会一直查找到Object的原型才停止；在当前对象未找到该属性，就沿着原型链向上查找，找到就停止并返回该属性，

2024-02-25 18:00:11 796

vue2生态之vuex3的深入学习资料

vue3的$forceUpdate到底有什么用？优雅应用场景有哪些？