Vue3中的Ref与Reactive：深入理解响应式编程
前言 Vue 3是一个功能强大的前端框架，它引入了一些令人兴奋的新特性，其中最引人注目的是ref和reactive。这两个API是Vue 3中响应式编程的核心，本文将深入探讨它们的用法和差异。 什么是响应式编程？ 在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新， ... »
Vue3搭建后台管理系统模板
搭建后台管理系统模板 2.1项目初始化 今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范，需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复，需要使用husky来做commit拦截，需要使用commitlint来统一提交规范，需要使 ... »
每日一题：vue3自定义指令大全（呕心沥血所作，附可运行项目源码）
1.VUE常用指令大全 本项目所有指令均为全局注册，使用时直接在组件中使用即可。 指令目录：src/directives 页面目录：src/views 具体可查看源码 1.1 权限指令 封装一个权限指令，在模板中根据用户权限来控制元素的显示或隐藏。 permission.js import { re ... »
如何在Vue3中书写TSX
今天小编给大家分享的是如何在Vue3中书写TSX，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。 在vue2的时候就已经可以使用 jsx 语法，但是不是很友好，写起来是一件很痛苦的事情，所以你很少见到有人会在vue2中书写 jsx 语法，官方也 »
少年，该升级 Vue3 了！
Vue2 的终止支持时间是 2023 年 12 月 31 日，本文是一篇 Vue2 升级 Vue3 的指南，可帮助你快速从 Vue2 平滑升级到 Vue3。 ... »
vue3探索——pinia高阶使用
以下是一些 Pinia 的其他高阶功能： storeToRefs()：响应式解构仓库，保证解构出来的数据是响应式的数据。 状态持久化：Pinia 并没有内置的状态持久化功能，但你可以使用第三方库或自定义插件来实现状态的持久化。例如，你可以使用 localStorage 或 sessionStorag ... »
vue3.3.x setup 新实验性特性 defineModel 定义多个属性
由于有些业务组件需要定义多个响应式props，类似这种(比较懒，没上ts)，在vue3.3.x以前，如果不用三方库，代码会变得很繁琐 <script setup> const props = defineProps({ modelValue: { type: Object, default: () ... »
在Vue2和Vue3中JSX的使用集锦
Vue2安装JSX支持 有时候，我们使用渲染函数（render function）来抽象组件，而渲染函数使用Vue的h函数来编写Dom元素相对template语法差别较大，体验不佳，这个时候就派 JSX 上场了。然而在Vue3中默认是带了JSX支持的，而在 Vue2 中使用 JSX，需要安装并使用 ... »
如何使用Vite创建Vue3的uniapp项目
项目结构 my-vue3-project ├─ .env //默认环境变量 ├─ .env.development //开发环境变量 ├─ .eslintrc-auto-import.json //（autoimport变量，eslint配置）由auto-import插件生成 ├─ .eslintr ... »
Vue3中的几个坑，你都见过吗？
Vue3 目前已经趋于稳定，不少代码库都已经开始使用它，很多项目未来也必然要迁移至Vue3。本文记录我在使用Vue3时遇到的一些问题，希望能为其他开发者提供帮助。 1. 使用reactive封装基础数据类型 传统开发模式中，数据声明很简单。但是在Vue中有多个响应式变量声明方式，整体的使用规则如下： ... »
vue3探索——5分钟快速上手大菠萝pinia
温馨提示：本文以vue3+vite+ts举例，vite配置和ts语法侧重较少，比较适合有vuex或者vue基础的小伙伴们儿查阅。 安装pinia yarn yarn add pinia npm npm install pinia pnpm pnpm add pinia 1-开始 方式一：在main. ... »
Java程序员学vue3最好的方式就是搭建后台管理模板
作为Java程序员，vue3还是有必要学的，我推荐学会了vue3基础的Java工程师，尝试搭建自己的后台管理模板，这是提高vue3熟练度最快的方式。 ... »
一文解锁vue3中hooks的使用姿势
## vue3 中的 hooks 是什么? 简单来说如果你的函数中用到了诸如 ref,reactive,onMounted 等 vue 提供的 api 的话,那么它就是一个 hooks 函数,如果没用到它就是一个普通工具函数。至于它为什么叫 hooks,我的理解则是 > 它可以通过特定的函数将逻辑 ... »
vue3 甘特图（二）：甘特图时间轴切换
vue3 甘特图（二）：gantt时间轴切换 1.固定时间轴缩放级别 gantt.config.scale_unit = "month"; //时间轴单位 gantt.config.step = 1;//单位数 gantt.config.date_scale = "%Y年%M";//时间轴展现方式 ... »
手把手教你使用Vite构建第一个Vue3项目
### 写在前面 在之前的文章中写过“如何创建第一个vue项目”，但那篇文章写的是创建vue2的 项目。 传送门[如何创建第一个vue项目](https://blog.csdn.net/rong09_13/article/details/127142369) 打开`Vue.js`官网:https:/ ... »
vue3探索——组件通信之依赖注入
# 背景 通常情况下，当我们需要从父组件向子组件传递数据时，会使用 **props**。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦： ! ... »
Vue3 中 keepAlive 如何搭配 VueRouter 来更自由的控制页面的状态缓存?
在 vue 中,默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。但是 vue 提供了 keep-alive 组件,它可以将一个动态组件包装起来从而实现组件切换时候保留其状态。本篇文章要介绍的并不是它的基本 ... »
vue3+vite2动态绑定图片优雅解决方案
> 优雅解决方案在最下面，小伙伴们儿可以直接前往 ? > # 背景 在vue3+vite2项目中，我们有时候想要动态绑定资源，比如像下面的代码这样： ```html ``` 实际效果是这样：  大家对于 ref ... »