Vue3
文章平均质量分 72
小钱999
我很懒
展开
-
vue3 CSSProperties使用
CSSProperties 是TypeScript中定义的一个接口,用于描述CSS属性的类型。它包含了大多数常用的CSS属性,比如颜色、字体、边框、布局等。我们可以根据需要添加或修改这些属性。color?: string;fontSize?: string;margin?: string;// ...原创 2024-03-07 14:08:27 · 847 阅读 · 0 评论 -
pinia 持久化存储
说到持久化存储,大家第一想到的就是结合localStorage或者setionStorage进行存储。没错,本文章讲解的就是pinia结合localStorage的使用以及pinia-plugin-persist插件。原创 2023-11-22 11:26:51 · 369 阅读 · 2 评论 -
pinia 基础用法
Pinia 是一个基于 Vue3 的状态管理库,它提供了简单且强大的方法来管理应用程序的状态。原创 2023-11-06 16:10:18 · 92 阅读 · 1 评论 -
vue3 postcss-px-to-viewport 页面自适应
postcss-px-to-viewport 是一个 PostCSS 插件,它可以将 px 单位转换为视口单位(vw、vh 或 vmin)。视口单位是相对于视口尺寸来计算的长度单位,而不是相对于父元素或根元素。这意味着使用视口单位进行布局和样式设置时,元素会随着屏幕尺寸的变化而自适应。原创 2023-11-02 18:01:12 · 3105 阅读 · 6 评论 -
Vue3 + Vite 打包发布至 npm 流程
随着 Vue.js 3.0 的正式发布,Vue 生态系统也进入了一个新的阶段。在 Vue.js 3.0 中,Vite 成为了默认的开发工具,并替代了 Vue CLI 作为推荐的构建工具。同时,NPM 作为 JavaScript 包管理器,对于开发者来说也是一个必备的工具。那么本文将介绍如何使用 Vue3、Vite 和 NPM 打包并发布一个 Vue 组件。原创 2023-11-02 13:11:09 · 3038 阅读 · 1 评论 -
Vue 3 解锁Hooks
Vue 3的Hooks为我们带来了更加灵活和可维护的代码结构。通过使用ref、computed、watchEffect等内置的Hooks函数,以及自定义自己的Hooks函数,我们可以更好地处理组件的状态和逻辑,并使得代码更易于阅读和维护。原创 2023-11-01 11:14:58 · 55 阅读 · 0 评论 -
自定义指令-默认图片显示
项目中,图片用到的地方还很多,若向上面那样每个地方都写就会显得很冗余。这个时候我们就想到用自定义指令进行封装。原创 2023-10-25 14:20:46 · 29 阅读 · 0 评论 -
自定义指令-水印实现
在这里我们采用的是全局自定义指令的方式,这样方面我们在想要的页面直接加上相应的指令即可。原创 2023-10-24 17:29:53 · 144 阅读 · 0 评论 -
Vue3 自定义指令
自定义指令运用场景很多,在项目中运用好自定义指令能帮助我们更加高效实现功能。原创 2023-10-23 16:44:39 · 155 阅读 · 1 评论 -
Vue3 v-model:灵活的双向数据绑定
Vue3 中的 v-model 经历了一些改进,提供了更灵活的用法来实现双向数据绑定。除了原生的表单元素外,v-model 现在可以应用于任意组件,并允许我们自定义 prop 和事件名称。使用 Vue3 的 v-model,我们可以更加方便地实现组件之间的数据双向同步,减少了手动处理数据绑定的工作量。原创 2023-10-20 13:50:54 · 6488 阅读 · 1 评论 -
Vue3 Mitt:简洁高效的事件管理库
Vue3 Mitt 是一个简洁而高效的事件管理库,它提供了一种灵活而方便的方式来处理组件间的通信。通过使用 Vue3 Mitt,我们可以更好地控制事件的传播范围.原创 2023-10-18 11:19:07 · 1599 阅读 · 1 评论 -
Vue3全局事件总线 - 实现组件间的通信
通过创建一个全局事件总线,我们可以在不同的组件之间进行通信,实现组件间的数据传递和状态管理。在使用全局事件总线时,请注意避免滥用它,合理设计组件之间的关系,并确保及时清理不再需要的事件监听器,以避免内存泄漏。全局事件总线是一个强大而灵活的工具,让我们在Vue3中实现组件间的通信变得更加简单和直观。原创 2023-10-17 20:54:47 · 1235 阅读 · 0 评论 -
vue3 transition-group详解
transition和animate组件库结合为Vue应用添加出色的过渡效果,提升用户体验。无论是创建任务列表、图片轮播还是其他场景,transition-group都是一个必备的工具。原创 2023-10-17 11:29:38 · 1193 阅读 · 0 评论 -
vue3 transition用法详解
transition提供了一种简单的方法来动画过渡Vue实例和组件的插入、更新和移除。原创 2023-10-16 16:17:47 · 966 阅读 · 1 评论 -
Vue3动态组件
通过使用 Vue3 的动态组件功能,我们可以根据不同的条件渲染不同的组件,并实现复杂的业务逻辑。原创 2023-10-16 10:33:26 · 249 阅读 · 6 评论 -
Vue3中异步组件与Suspense的结合使用
在Vue3中,异步组件是一种优化技术,用于延迟加载和渲染组件,以提高应用的性能原创 2023-10-11 17:35:54 · 174 阅读 · 1 评论 -
Vue3插槽(Slot)详解
在Vue.js中,插槽是一种分发内容的机制,它允许我们在子组件中插入父组件的任何内容。简单来说,插槽就像一个占位符,我们可以在其中放置任何我们想要的内容。Vue3的插槽功能非常强大,它允许我们在组件间灵活地分发和接收内容。无论是默认插槽、具名插槽、作用域插槽还是动态插槽,都能满足我们在实际开发中的各种需求。原创 2023-10-10 15:01:49 · 1479 阅读 · 1 评论 -
Vue3递归组件的魅力与应用
在Vue3中,递归组件是指自身作为子组件出现在模板中的情况。这种组件设计模式十分灵活,可以处理具有层级结构的数据或需要无限嵌套的组件。通过使用Vue3中的递归组件,我们可以轻松地处理无限层级的嵌套结构。递归组件是处理树形结构或其他递归定义数据结构的理想选择。希望本文能够帮助你理解并使用Vue3中的递归组件。原创 2023-10-10 13:28:13 · 260 阅读 · 3 评论 -
Vue3组件传参之父子组件传参
在Vue3中,父子组件之间的通信是一项常见的任务。本文将介绍一些在Vue3中实现父子组件之间传值的方法。原创 2023-10-10 09:53:42 · 3088 阅读 · 1 评论 -
BEM规范:构建可维护的CSS
BEM是一种命名约定,旨在使CSS代码具有更好的可读性和可维护性。块(Block):块是页面上具有独立功能的可重用组件。可以将块视为页面上的一个模块,它可以包含其他块或元素。块的类名以一个描述性词汇作为前缀,使用连字符进行连接,例如:.block。元素(Element):元素是块的组成部分,它们不能独立存在,并且具有与块相关的语义。元素的类名由块的类名作为前缀,使用双下划线连接,例如:.block__element。修饰符(Modifier):修饰符用于改变块或元素的外观、状态或行为。原创 2023-10-10 11:13:42 · 172 阅读 · 1 评论 -
初识Vue3常见问题合集
如图:用npm create vite@latest创建号项目后,在main.js中我们可以看见“vue”会标红,并提示找不到模块“vue”1、根据提示在中将的值改为node2、项目跟目录的xxx.d.ts文件中加入。原创 2023-10-07 13:42:32 · 362 阅读 · 3 评论 -
vue3 实现自动引入全局组件
在使用Vue3开发项目过程中,往往有些组件需要多处地方使用,这个时候我们就可以考虑将其组件定义为全局组件。为了减少代码的冗余,我们可以实现相应的方法使其自动引入。自动引入全局组件的方案便生成了。如图:在APP.js中引入HelloWorld,页面中会出现HelloWorld组件的相关内容。创建存放全局组件的文件夹,除了让我们的代码更规范之外,也让我们下面实现自动引入方法更简单一些。,这是防止全局组件没有name的时候或者用setup语法糖无法添加name时带来的错误。细心的小伙伴会发现在代码多写了个。原创 2023-09-27 10:08:11 · 1698 阅读 · 2 评论