![](https://img-blog.csdnimg.cn/9c55d60a2bce4c78b42ca2a0a45a6a47.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
文章平均质量分 70
Vue语法及项目实战
小五Five
热爱生活,不停止思考,不停下脚步。
展开
-
Vue 的 nextTick:深入理解异步更新机制
Vue.js,这个基于 MVVM 架构的前端框架,带给我们很多创新的用户体验。它的异步更新机制,使得界面更新更加流畅,不会因为数据的改变立即引发界面的重绘,从而提高了应用的性能。在 Vue.js 中,nextTick 方法是我们深入理解异步更新机制的重要工具。本文将通过深入剖析 Vue.nextTick 来帮助你理解 Vue.js 的异步更新机制。Vue.nextTick 在 Vue.js 的异步更新机制中扮演着重要的角色。原创 2023-10-24 09:00:00 · 265 阅读 · 0 评论 -
Vue修饰符的总结归纳(Vue2和Vue3通用)
在Vue.js中,修饰符是一种简洁的语法糖,用于修改Vue指令的行为。这些修饰符可以让我们更简洁地处理一些常见场景,比如表单输入的延迟绑定、输入值的格式化等。了解和掌握Vue的修饰符,可以让我们在开发过程中更加高效和灵活。原创 2023-10-01 09:00:00 · 1562 阅读 · 0 评论 -
Vue3中使用Proxy API取代defineProperty API的原因
Vue3.0是Vue.js框架的最新版本,它在底层进行了许多重要的改进。其中最引人注目的变化之一是它转而在某些场景中使用Proxy API来替代以前使用的defineProperty API。这种转变不仅使Vue3.0在浏览器兼容性上表现出色,而且在性能和代码的可读性上也有了显著的提升。原创 2023-09-25 09:00:00 · 517 阅读 · 0 评论 -
Vue3事件总线——从eventBus到mitt
在 Vue 3 中,默认情况下是没有内置的 EventBus,也就是说,Vue 3 没有像 Vue 2 那样的$on()和$emit()的全局事件系统。这是因为在 Vue 3 中,官方推荐使用 Composition API 以及更灵活的函数式组件,同时提倡使用更明确的通信方式。不过在一些小项目中,我们仍然希望可以使用eventBus而不用pinia进行全局的管理。这个时候,Vue3里使用最广来实现eventBus的方法就是第三方库mitt。原创 2023-09-06 09:00:00 · 2534 阅读 · 0 评论 -
Vue3实现九宫格抽奖(思路+完整代码)
虽然有一些抽奖插件比如lucky-canvas来帮助我们快速发开抽奖小活动,但一些高定制的项目,只能自己手写抽奖(组件构成复杂,插件的css满足不了),今天记录一个九宫格抽奖demo,走一遍抽奖活动设计思路。原创 2023-09-04 09:00:00 · 2903 阅读 · 0 评论 -
【lucky-canvas插件】在Vue3实现大转盘&九宫格&老虎机抽奖
平时做项目时常会遇到抽奖需求。如果一个一个原生手敲的话,很费时间。所以找到了一款抽奖插件——lucky-canvas,一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件。可以满足绝大部分的项目需求。(定制化高的话仍需原生手写)。本文将介绍该插件的使用方法,并以vue3项目举例。原创 2023-09-01 09:00:00 · 5514 阅读 · 11 评论 -
【总结】Typescript 结合Vue3的写法
Vue 3与TypeScript结合使用能够提供类型检查和智能提示,增强了代码的可靠性和可维护性。本文整理了项目开发时用到的结合写法,供学习和参考。原创 2023-08-11 09:00:00 · 376 阅读 · 0 评论 -
Vue3的自定义指令,项目中的运用
自定义指令是一种在Vue应用程序中扩展HTML标签的能力。通过自定义指令,我们可以直接在模板中使用指令名,并为其提供相应的逻辑。自定义指令可以用于添加事件监听、修改DOM元素、操作样式等各种场景原创 2023-08-10 09:00:00 · 704 阅读 · 0 评论 -
Vue3中v-model在原生元素和自定义组件上的使用
v-model 是 Vue 框架中用于实现双向数据绑定的指令之一,在 Vue 3 中保留了这一特性,并对其进行了一些改进。Vue 3 的 v-model 指令更加灵活,可以适用于原生 HTML 元素和自定义组件,并支持修饰符的使用。原创 2023-08-09 09:00:00 · 1488 阅读 · 0 评论 -
【超细节】Vue3组件事件怎么声明,defineEmits与emit
组件事件是 Vue 组件之间进行通信的一种方式。它允许一个组件触发一个自定义事件,并且其他组件可以监听并响应这个事件。原创 2023-08-04 11:48:57 · 5145 阅读 · 1 评论 -
【超细节】Vue3的属性传递——Props
Vue3相较于Vue2,Props传递的变化很大,并且结合ts后,写法有些怪异(choulou)。还有一些小细节,特此梳理一下。Vue3里组件之间属性传值需要显式声明它所接受的 props,这样 Vue 才能知道外部传入的哪些是 props,哪些是透传 attribute。原创 2023-08-04 09:00:00 · 7850 阅读 · 0 评论 -
Vue3中的透传Attributes / $attrs:简化组件开发的利器
Vue3推出了一系列新功能和改进。使用下来后,其中一个很实用的新特性就是透传 Attributes(透传属性)。本文将介绍 Vue3中的透传 Attributes,并提结合代码示例来展示它在实际项目中的使用。原创 2023-07-19 09:00:00 · 3790 阅读 · 0 评论 -
Vue3的watchEffect的妙用,与watch的区别
在Vue3中,引入了Composition API,其中的watchEffect()函数是一个非常强大和灵活的工具,用于处理响应式数据的变化,使得项目更加弹性和灵活。它与watch有所不同,本文将介绍watchEffect()的特点、与watch的区别以及使用时的注意事项。原创 2023-07-18 10:50:25 · 4354 阅读 · 0 评论 -
和满屏import说拜拜!unplugin-auto-import/vite自动引入vue相关api
unplugin-auto-import/vite 是一个按需自动导入Vue/Vue Router等官方Api的插件。使用此插件后,不需要手动编写类似import {xx} from 'vue'这样的代码了,而是直接使用相关api,提升开发效率。原创 2023-05-30 17:41:50 · 736 阅读 · 0 评论 -
Vue/React为什么组件销毁后定时器会继续
如果我们没有在组件的生命周期方法中手动清除定时器,在组件被销毁后,该定时器仍然会继续运行,并且由于此时组件实例已经不存在于页面中,虚拟 DOM 无法监测到定时器的状态变化。当一个对象不再被引用时,它仍然可能在内存中保留一段时间,直到垃圾回收机制判断它不再可达时才会被回收。原创 2023-05-22 10:34:03 · 737 阅读 · 0 评论 -
vite+vue3+ts项目中自动批量注册全局组件
我们做项目时,会封装大量的公共组件,如果我们每一个都去在maints里面引入,非常麻烦不说,代码也不优雅。所以更好的方法就是自动注册全局组件,在组件中直接使用就好。原创 2023-03-16 17:32:07 · 1463 阅读 · 0 评论 -
Vue3中在组件上使用ref的变化,特别是v-for语法下的ref!
Vue3相较于Vue3做了许多优化,语法上也有所改变。其中v-for循环生成组件上的ref写法变化很大,容易踩坑,特此记录。ref是一个特殊的 attribute,和v-for中的key类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后,获得对它的直接引用。原创 2023-04-27 11:46:35 · 2117 阅读 · 0 评论 -
webpack基本认知,它是什么,做什么的
webpack本质是, 一个第三方模块包, 用于分析, 并打包代码支持所有类型文件的打包支持less/sass => css支持ES6/7/8 => ES5压缩代码, 提高加载速度。原创 2023-04-18 18:01:09 · 276 阅读 · 0 评论 -
Vue3+Vite神器:按需引入自定义组件unplugin-vue-components
unplugin-vue-components插件可以在Vue文件中自动引入组件(包括项目自身的组件和各种组件库中的组件)。这个插件好处在于,不需要自己去注册组件,不管是组件内的import还是main.ts里的注册!此外!由于是按需引入,不像第一个方法那样整个components都全局注册,打包后体积也会更小!原创 2023-04-18 17:12:57 · 3929 阅读 · 0 评论 -
Vue2运行报错SyntaxError: Cannot use import statement outside a module
模块语法一个是CommonJS module,一个是 ES6 module。vue.config.js里的module.exports是CommonJS module语法。所以不能使用ES6的语法import来引入模块。而是要遵循CommonJS module语法的require来引入模块。原创 2023-03-31 10:41:24 · 2405 阅读 · 3 评论 -
Vue2和Vue3自定义组件使用v-model
自定义组件:v-model默认绑定的不是value,而是modelValue。发射的方法固定位为@update:modelValue。自定义组件:props接收+model对象里写prop和event+method里写具体方法。的方式是使用一个可写的,同时具有 getter 和 setter 的。方法需触发相应的事件。原创 2023-03-30 09:26:59 · 258 阅读 · 0 评论 -
在Vite和Vue3项目中使用和配置sass
怎么在vue3项目中使用sass作为css预处理器。原创 2023-03-17 11:43:39 · 435 阅读 · 0 评论 -
【细节】Vue3基本使用笔记
本文是Vue3基本使用笔记。记录了vue3相比于vue2在语法上的主要变化。原创 2023-03-10 13:35:38 · 354 阅读 · 0 评论 -
VScode快速生成Vue3组件模板(代码片段&插件)
两种方法根据个人喜好使用,也可同时使用。好处:可以完全按照个人习惯设置。好处:安装即用,生成默认模板。1、打开设置里的用户代码片段。4、使用:输入vue回车生成。2、找到vue.json。原创 2023-03-09 10:58:36 · 8245 阅读 · 3 评论 -
怎么在 Vite+Vue3+TS 项目中使用 @ 指代 src
实现在Vite+Vue3+TS 项目中使用 @ 指代 src的效果。原创 2023-03-08 21:57:01 · 339 阅读 · 0 评论 -
[面试题]Vue怎样在style里使用data中的变量?
不管是面试官提问:Vue怎样在style里使用data中的变量,还是在实际开发中封装组件。在style里使用data中的变量,都是开发者必须掌握得一个技巧。原创 2023-02-25 21:29:22 · 1300 阅读 · 4 评论 -
vue3中watch的使用和注意要点,特别是reactive和props!
vue3中watch的监听要根据不同的监听对象采用不同的写法,本文罗列了watch监听的所有方式,并标注了特别需要注意的要点。原创 2022-12-19 19:45:52 · 3690 阅读 · 0 评论 -
【一文搞定Pinia】超详细的Pinia教程,比Vuex香太多了!
伴随vue2到vue3的升级,官方已经用Pinia代替了Vuex成为官方的状态管理库,推荐使用Pinia作为以后不论是vue2还是vue3状态管理库的首选!原创 2022-12-10 21:17:21 · 16370 阅读 · 4 评论