![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 61
oumae-kumiko
深圳求职中,欢迎内推&介绍岗位!
展开
-
【vue/JS】拖拽图片加载图片文件到页面&画布等
2、声明拖拽的区域,为该区域html标签添加drop拖拽事件。4、循环文件列表并且判断文件类型。5、最终读取文件后加载图片即可!1、阻止浏览器默认行为事件。3、获取拖拽的文件数据列表。原创 2024-07-26 18:03:24 · 121 阅读 · 0 评论 -
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
简评:Volar官方全局组件的推荐写法,基于Volar,必须安装该插件,GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件:使用GlobalComponents类型接口声明类型。原创 2024-05-14 19:02:10 · 646 阅读 · 0 评论 -
【element-plus】自动导入 + typescript 提示 + 自定义主题色
第三步:使用组件库时获取ts类型提示 > tsconfig.json 文件的 types 添加ts文件路径。编辑器安装 Volar 插件(新名字 Vue - Official)第一步:安装自动导入功能所需的插件。2、引用加载组件类型提示。原创 2024-05-11 16:15:24 · 426 阅读 · 0 评论 -
【vue-router 路由篇】 传入私有数据给目标路由地址而不显示在url上
也许还有另一个场景,不方便缓存路由时,返回上级路由时,上级路由又不一定要重调接口获取数据(直接使用缓存数据),则也可以通过该方式传个判断值给目标进行判断(虽然也可以在pinia vuex之类的里面存相关变量去判断,但需要不断的修改该变量,这种算是下下策)。也许你会碰到这样一个场景,在【返回上级路由,或者跳转目标路由】时,在部分场景下如果临时需要传给目标路由相关数据,则这篇文章必定会对你有所帮助。原创 2024-03-16 01:50:27 · 367 阅读 · 0 评论 -
vue2 / vue3 路由(返回&跳转)时判断 + 取消跳转
vue2 / vue3 路由(返回&跳转)时监听表单变化,提示相关信息,取消跳转等原创 2024-03-16 00:57:20 · 418 阅读 · 0 评论 -
Vue3 重置&覆盖 reactive 数组数据的方法
核心要点:通过splice删除原数组内的所有数据,并添加新的数据进去。潜在影响:大数据量下,splice重置数组和 ref 的.value重新赋值重置数组,哪个耗时短还需自行测试。通过 `splice` 传入0 和 Infinity 来删除原数组从头到尾的内容,然后`...[]`将新数据丢进响应式数组里。原创 2024-03-06 16:33:12 · 1586 阅读 · 0 评论 -
【vue3 路由使用与讲解】vue-router : 简洁直观的全面介绍
vue-router,动态路由,动态添加路由addRoute,命名路由name,路由重定向redirect,路由传参params,query,组合式Api,路由跳转页面router-link,push,replace,获取路由参数,路由导航守卫,路由模式,路由缓存,嵌套路由,路由别名,声明路由原创 2024-03-02 03:43:15 · 2082 阅读 · 0 评论 -
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 · 707 阅读 · 0 评论 -
vue3.3 版本新特性总结 defineOptions、defineModel、defineSlots、defineEmits
新特性主要围绕着父子组件之间的相关的功能更新。本文主要以代码展示的风格来介绍功能。大家可以直接搞个父子组件,把对应代码复制粘贴进去,然后一个个试验即可。自己也动动手,加深理解。除了标题的4个宏指令,还有 toRef 和toValue,但让我挺无语的。。感觉没啥用,求指教。。以下案例包含的vue3.3新内容:defineOptions、defineModel、defineSlots、defineEmits、toRef、toValue原创 2024-02-29 21:08:32 · 887 阅读 · 0 评论 -
【vue3】命令式组件封装,message封装示例;(函数式组件?)
仅做代码示例;当然改进的地方还是不少的,仅作为该类组件封装方式的初步启发;理想大成肯定是想要像 `饿了么` 这些组件库一样。原创 2024-02-29 01:25:02 · 1028 阅读 · 0 评论 -
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 · 3993 阅读 · 0 评论 -
【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 · 8838 阅读 · 0 评论 -
【vue3】优雅的解决reactive()响应式对象初始化重新赋值问题v2
在上面该文章提到了reactive该api的不方便之处和相关重置数据方法的解析。下面提供的方法就是自己封装的`$reactive`方法,通过该方法返回响应式数据和重置数据的方法。聚焦vue3,但不限于vue,任何前端问题,究其本质,值得讨论,研究与学习。QQ交流群:522976012 ,欢迎来玩。原创 2023-03-05 16:04:51 · 4632 阅读 · 0 评论 -
轻量化的 vue3 后台管理系统模板
本项目包含以下内容:单项目类型、vue3、vite、pinia、sass、typescript、eslint、prettier、husky、lint-staged、element-plus、阿里图标库(不采用element-plus的图标库)开箱即用,基本上直接开发对面页面代码即可。为了保证没有太多没必要的项目依赖,仅安装了必要的库。目前只提供了基础的项目模板,像 axios 、动态菜单、语言国际化等其他功能,自己扩展下即可。原创 2022-12-01 17:55:32 · 1458 阅读 · 1 评论 -
【vue3: vuex4 状态管理库】使用&讲解
本文章目的:快速上手vue3 的 vuex ,并了解各个常用的功能:state、getters、mutations、actions、modules。不常用的和非必要的在此不进行讲述,需要更完善自己的请查看官网。【建议使用Pinia代替vuex > 移步我pinia文章】原创 2022-09-19 17:45:01 · 649 阅读 · 0 评论 -
【vue3】按钮点击涟漪(波纹)特效 - 指令封装
【代码】【vue3】按钮点击涟漪特效 - 指令封装。之前做的angualr项目封装的涟漪特效指令,现在改为vue3写法。(因为迁移过来的,只做了最小的改动供vue3使用)原创 2022-09-18 17:04:13 · 1240 阅读 · 0 评论 -
项目架构:vue3 + vite + directive指令模块封装
【项目架构:vue3 + vite + directive指令模块封装】主要的API:vite 的 `import.meta.glob()`vue 的 use()、directive()`export default`增加二级文件目录用来表明对应的指令功能范围:import.meta.glob('./**.ts')原创 2022-09-18 15:48:34 · 797 阅读 · 0 评论 -
vue3 语言国际化 vue-i18n
vue3 + vite&webpack + 组合式Api开发;vue-i18n 相关配置;vue-i18n 安装、使用案例、教程、setup Api;原创 2022-08-29 19:46:23 · 1110 阅读 · 0 评论 -
【vue3组件之 keep-alive 功能细节讲解】优先级、生命周期、离开&再度激活、缓存销毁
注意事项:1.优先级:如果`exclude`和`include`内都有同个组件名,`exclude`优先级高于`include`2.缓存销毁:`max`当已缓存的组件数量超过`max`值,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。3.生命周期:被缓存的组件才会调用`activated` 这些缓存相关的生命周期 ,换句话说就是`exclude`内的组件不会触发activated!!4. 离开组件、再度激活:当组件在`原创 2022-04-04 23:45:41 · 4894 阅读 · 0 评论 -
【vue3 setup composition Api 的 Ts 类型声明使用 & 讲解】
本文包含API的TS内容:ref、reactive、customRef、provide、inject、computed、watch、defineExpose、defineProps、defineEmits、withDefaults ....涵盖了主要的组合式 API 的 TS类型。核心:大部分都是运用API函数泛型来定义类型。原创 2022-04-04 17:58:27 · 3337 阅读 · 0 评论 -
【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 · 26767 阅读 · 1 评论 -
【vue3 Api - watchEffect 的讲解 & 使用】- 侦听响应式数据执行副作用(effect)函数
在了解 `watchEffect` api之前,需要了解在vue中,副作用函数的定义是什么!watchEffect f立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。注意,响应式数据必须要触发get才能劫持为依赖。watchEffect 有2个可传参数 ,并且有返回一个StopHandle函数用来停止侦听。1、第一个参数:(必传)effect 函数,收集依赖,并且立即执行一次;并且 effect 函数可以接受一个 onInvalidate 函数参数原创 2022-04-01 23:57:26 · 5579 阅读 · 1 评论 -
【vue3的$forceUpdate到底有什么用?】
控制更新(处理边界情况)得益于其响应性系统,Vue 总是知道何时更新 (如果你使用正确的话)。但是,在某些边缘情况下,你可能希望强制更新,尽管事实上没有任何响应式数据发生更改。还有一些情况下,你可能希望防止不必要的更新(操作数据,但不更新视图,则不使用响应式数据;或在合适的时机再更新试图)。#强制更新如果你发现自己需要在 Vue 中强制更新,那么在 99.99% 的情况下,你已经在某个地方犯了错误。例如,你可能依赖于 Vue 响应性系统未跟踪的状态,比如在组件创建之后添加了data属性原创 2022-03-30 22:33:31 · 7618 阅读 · 0 评论 -
【vue3 $refs和特殊attr:ref 】获取子组件实例 & 规范获取Dom元素;(统称模板引用)
ref用来给元素或子组件注册引用信息。注册内容会在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是那个 DOM 元素;如果用在子组件上,引用就指向组件实例!关于ref的重要说明:在初始化组件时你不能访问ref 绑定的对应内容——它们还不存在!$refs也是非响应式的,因此你不应该试图用它在模板中做数据绑定。尽管存在 prop 和事件,但有时你可能仍然需要在 JavaScript 中直接访问子组件。为此,可以使用refattribute 为子组件指定引用原创 2022-03-30 00:05:19 · 7319 阅读 · 1 评论 -
【vue3 组件生命周期流程 & 功能】13个生命周期详解
单一组件、父子组件的生命周期。仅限开发环境下有效的生命周期。不讲SSR的生命周期:serverPrefetch。也就是只讲客户端的13个生命周期!this的数据:除了`beforeCreate`,其他12个生命周期的 this 都能获得组件实例对应初始化完成的内容。`beforeUpdate()` 永远只在所有父子组件的 `mounted() `之后才会触发!例子里的生命周期根据功能进行了划分,生命周期的顺序都标了数字!setup() 调用时间,与调用时间相关功能的讲解。onMounted之类的原创 2022-02-27 22:01:38 · 5389 阅读 · 0 评论 -
【vue3生态Pinia之State、Getters、Actions详解】
涉及内容:$reset()重置、$patch修改、$state更换、$subscribe订阅、getter:state中的computed、Actions:相当于组件中的 methods、订阅actions、销毁订阅、访问其他Store。Getters1- Getter 完全等同于Store里的state的computed值。2- 他们接收state作为第一个参数,鼓励使用箭头函数功能:3- 外部(组件)将参数传递给 getter4- 访问其他store的getters原创 2022-02-24 02:48:01 · 10149 阅读 · 0 评论 -
【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 · 12849 阅读 · 3 评论 -
【vue3】优雅的解决reactive()响应式对象初始化重新赋值问题
此方案解决的痛点:const info = reactive() ,当info需要重新赋值时,需要Object.assign(),还需要考虑深层对象时深拷贝的问题。template 里必须绑定的是 ref() 数据源 !!重新初始化整个响应式对象时,用来数据操作的实际变量(例子里的info)也需要重新赋值!这是vue3没正式发布解决ref()的 `.value` 语法糖的相对方案。正式敲定且发布后应该就可废弃我这方案了。原创 2022-02-18 12:04:12 · 57202 阅读 · 5 评论 -
vue3 `inheritAttrs`属性继承与`$attrs`使用与讲解
当template有根元素的时候,绑定到组件上的属性和事件会自动继承到根元素上。当组件返回单个根节点时,非 prop 的 attribute 将自动添加到根节点的 attribute 中。同样的规则也适用于事件监听器:如果组件是片段(多节点),并且组件标签绑定了attr和事件,都不会继承,并且会抛出警告!也就是说,片段组件需要将 inheritAttrs 设置为 false。当然不设置为 false 也有个好处,抛出警告告诉编程人员,这个组件是多节点的!你对该组件标签设置的 attr 和 事原创 2022-02-12 00:23:41 · 6632 阅读 · 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 · 57187 阅读 · 15 评论 -
【vue3 新特性 expose 使用与讲解】options和composition api的defineExpose案例
expose类型:Array<string>vue3新特性,如果是options api类型的组件,不声明 expose 时,默认暴露当前组件实例的全部内容,声明了 expose 选项, expose 数组内标记的才会暴露。(expose:[]则什么都不暴露,注意这个问题。也可以利用这个特性提高组件使用的规范。)<script setup>setup语法糖的情况下,默认是封闭的,需要获取当前组件里的内容的话,必须显式expose出去TS类型:原创 2022-01-27 00:27:27 · 13252 阅读 · 0 评论 -
【深入vue3 之 directive 指令的使用与讲解】
自定义全局指令:实例app.directive()参数:{string} name{Function | Object} [definition]返回值:如果传入 definition 参数,则返回应用实例。如果不传入 definition 参数,则返回指令定义。用法:注册或检索全局指令。自定义指令概念:在 Vue 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。自定义指令是vue提供给我们用原生DOM封装一系原创 2022-01-26 23:19:13 · 22826 阅读 · 8 评论 -
深入vue2/3: 插槽 <slot> / v-slot 的使用与讲解
默认插槽,具名插槽,作用域插槽首先简单阐述下基础定义和基础使用,再深入讲解各个使用方法、细节、效果:子组件声明<slot></slot>,然后父组件使用子组件时,传入对应的 slot 内容。也就是子组件使用<slot>插槽标签,父组件使用v-slot指令,需要两者结合使用,若父组件没声明v-slot内容,子组件slot对应位置则无内容。当子组件slot内声明有默认内容时,那父组件不声明v-slot,子组件则会使用默认内容,例如:<slot>默认值</slot>插槽可以包含任何内容原创 2022-01-26 22:30:27 · 4295 阅读 · 0 评论 -
【vue2/3 修改组件库、子组件样式】当前组件修改子组件样式
>>>,/deep/,:deep(),vue2/3 修改组件库、子组件样式.涉及到异步组件加载了对应全局样式,又访问了其他页面,选择器相同时则会出现样式不以你预想的情况出现!有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。vue3 文档只写了 :deep() 这一个API案例,为了统一风格和提高规范,建议按照v3文档 使用 :deep()原创 2022-01-25 22:48:40 · 3244 阅读 · 0 评论 -
【深入vue3之SFC-style特性】单文件组件样式特性
<style scoped>,深度选择器,插槽选择器,全局选择器,混合使用局部与全局样式,状态驱动的动态 CSS : v-bind(),<style module>,修改组件库样式,处于 scoped 样式中的选择器如果想要做更“深度”的选择,也即:影响到子组件,可以使用 :deep() 这个伪类,当<style>标签带有 `scoped`attribute 的时候,它的CSS只会应用到当前组件的元素上。子组件的根元素:子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。原创 2022-01-25 15:07:00 · 811 阅读 · 0 评论 -
【深入vue3 新特性: teleport 使用与讲解】
teleport 是内置组件,可以直接在模板中使用,无需注册。 可以被打包工具 tree-shake。所以它们只会在被使用的时候被引入。 需要直接主动访问(获取)它们的场景,也可以将它们显性导入。props to - string :必传 挂载的目标,只能是父级标签。兄弟、子级都会报错。 挂载目标必须是有效的查询选择器或 HTMLElement disabled - boolean :非必传 是否禁用。true则挂载到目标节点下,false为当前位置。 ..原创 2022-01-21 23:11:48 · 1683 阅读 · 0 评论 -
深入vue3 之 provide / inject
前言:本文章写的是composition api,options api的查看底部链接应用API的 provide 作用范围:实例内的所有组件 组件上下级关系的 provide 父级组件声明的 provide,所有子孙组件皆可拿到; 声明 provide 的组件该同级和父级无法 inject 获取到 关联链上provide 声明的同名内容 采取就近原则,最近一级父级有就引用最近一级的,没有就接着往上找,直到根实例的 provide 声明 父组件:<scrip..原创 2022-01-20 14:31:04 · 1497 阅读 · 0 评论 -
[深入vue3之响应性API] reactive、readonly、shallowReactive、shallowReadonly、toRaw、markRaw等使用与讲解
reactive返回对象的响应式副本 响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中,返回的 proxy 是不等于原始对象的。建议只使用响应式 proxy,避免依赖原始对象。 只能传入引用类型,否则抛出警告。reactive 将解包所有深层的 refs,同时维持 ref 的响应性。正确的讲应该是:当它通过代理访问时,会被自动解包:<script lang='ts' setup>import { ref,reactive } .原创 2022-01-17 14:58:22 · 762 阅读 · 0 评论 -
[深入vue3之setup] setup与组合式 API
为什么使用 setup ? 大型组件中选项的分离掩盖了潜在的逻辑问题。此外,在处理单个逻辑关注点时,我们必须不断地“跳转”相关代码的选项块。 如果能够将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 使我们能够做到的。 通过创建 Vue 组件,我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。然而,光靠这一点可能并不够,尤其是当你的应用变得非常大的时候,共享和重用代码变得尤为重要。 为了开始使用组合式 API,我们首先需要一个可以实际使用它的地方。在.原创 2022-01-17 12:29:04 · 1489 阅读 · 0 评论 -
[深入vue2/3之动态组件]options与composition api的写法
本章主要涉及内容::is、props、component、shallowRef、markRaw(不建议)options api写法:适用于vue2与vue3:is 与 component > 设置动态组件的必要条件:is 对应绑定的为字符串值即可,值对应引入的组件名props 数据父传子composition api写法:只适用于vue3shallowRef > 声明 :is 绑定的值,值为 import 的组件名原创 2022-01-12 15:13:27 · 996 阅读 · 0 评论