jnfy的博客

谈谈Vue组件动态加载有哪些方式

利用 Teleport 实现模态框：Vue 3 高级功能

Vue 的自定义事件是如何工作的？它们有什么用处？

基于Vue3的组件封装技巧分享

如何在 Vue 中定义计算属性（computed properties）？它们有什么优势？

vue3+vant+cropper.js实现移动端图片裁剪功能

如何优化你的 vue-cli 项目？

Vue 3中的setup()函数的作用是什么？

Vue 3的生命周期钩子函数与Vue 2相比有何变化？

vue3自定义组件

vue3自定义组件

Vue3 菜单展开和收起

vue3+axios 封装拦截器

Vue如何给计算属性computed传参

随着构建现代前端应用的需要，样式的管理和隔离变得越来越重要。为了解决样式冲突和管理困难的问题，CSS Modules 应运而生。今天，我们将讨论如何在 Vue3 中使用 CSS Modules 实现样式隔离，特别是在使用新的 setup 语法糖的情况下。

在日常开发的过程中，使用Vue的组件进行业务拆分，代码解耦是一个很好的选择；今天就来分享一下我在使用Vue3进行组件封装的一些技巧和心得，希望能够帮助到大家；

Vue3+TypeScript父子组件传值

Vue3+Echarts 常用属性总结之饼图

在vue3中删除了vue2中的data函数，因此，vue3.0要在template中使用某些变量就必须在最后return出来，多次声明变量，不太方便，也不太友好。而在vue3.2版本之后，我们只需在script标签上加上setup属性，不需要再写return就可以直接在template中使用，写起代码就很流畅。哎，这就很棒！

在现代Web应用程序中，文件上传和下载是常见的功能，特别是在使用Vue.js这样的前端框架时。Vue 3引入的组合式API（setup语法糖）为我们提供了更灵活的方式来处理这些功能。本篇博客将介绍如何在Vue 3中实现文件上传和下载功能，并提供示例代码来帮助您更好地理解。

在现代前端开发中，懒加载是一种提高应用性能和用户体验的重要技术，尤其是在处理较大图片或长列表数据时。懒加载意味着仅在用户需要时才加载资源，这有助于减少初始加载时间和提升响应速度。本文将使用 Vue 3 和其新推出的 setup 语法糖来实现懒加载功能，并提供具体的示例代码，帮助大家更好的理解。

在vue中不要滥用watch

Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。Axios 是一个基于 Promise 的 HTTP 客户端，它可以用于发送异步 HTTP 请求到 REST 终端并执行各种 CRUD 操作。在 Vue 3 中，我们可以很方便地使用 Axios 进行数据请求，从服务器获取数据并在界面中显示。

在前端开发中，尤其是利用Vue3构建现代Web应用时，掌握如何使用本地存储（localStorage）来保存数据是非常重要的能力。这不仅可以帮助我们提高应用的性能，还能提供更好的用户体验。在这篇博客中，我将详细介绍如何在Vue3中使用localStorage保存数据，并提供示例代码来帮助理解。

在前端开发中，我们常常需要在用户会话期间保存一些数据，这些数据在页面刷新或导航时依然需要存在。`sessionStorage` 是一种非常方便的方式来实现这一点。在这篇文章中，我们将探讨如何在Vue3应用中使用`sessionStorage`来保存会话数据，并通过示例代码展示具体的实现方式。

在现代前端开发中，Vue.js 是一种非常流行的 JavaScript 框架。Vue3，作为 Vue.js 的最新版本，引入了许多新特性，其中之一就是 Composition API。Composition API 提供了一种新的方法来编写组件，使得代码更加模块化和可复用。在 Vue3 中，`watch` 功能是一个非常有用的工具，它可以让我们监听数据的变化，并在数据发生变化时执行相应的操作。在这篇博客中，我们将深入探讨如何在 Vue3 中使用 `watch` 功能，并结合示例代码进行详细说明。

随着前端技术的不断发展，3D图形渲染逐渐成为前端开发中的一个热门话题。Vue.js 是一个非常优秀的前端框架，而 Three.js 则是一个强大的 JavaScript 库，通过它可以轻松实现 3D 图形渲染。在这篇博客中，我们将介绍如何在 Vue3 项目中使用 Three.js 实现基本的 3D 图形渲染。下文不仅包含完整的代码示例，还会对每一步进行详细的解释，以帮助您更好地理解其实现过程。

在 Vue 3 中，使用 `ref` 访问DOM元素是一个常见的需求，尤其当你需要操作原生 DOM 元素的时候。对熟悉 Vue 2 的开发者来说，这个概念并不陌生，但 Vue 3 在此基础上进行了改进和加强。本文将详细讲解如何在 Vue 3 中使用 `ref` 访问 DOM 元素，并通过具体的示例代码来说明其用法。

Vue 3 引入了一个新的组合式 API，旨在提供一种更灵活和模块化的方式来编写组合逻辑。`setup` 函数是该 API 的核心部分，它被用于替代 Vue 2.x 中的选项式 API。本文将详细介绍Vue 3中的 `setup` 函数，描述其作用，同时提供示例代码来帮助理解。

随着现代Web应用程序的不断发展，文件上传成为了用户交互中不可或缺的一部分。在本篇博客中，我们将深入讨论如何在Vue3中实现一个文件上传功能，并与后端API进行交互。我们将使用Vue3的Composition API（setup语法糖）来构建我们的示例。

在现代Web开发中，数据可视化变得越来越重要，Chart.js作为一个强大的图表绘制库，能够帮助我们快速生成美观且动态的图表。结合Vue3的响应式特性，我们可以轻松地创建出具有响应能力的图表。本文将带你一起从零开始，创建一个使用Chart.js的Vue3组件，确保图表在数据更新时能够自动响应。

在当今的开发环境中，评论系统是多种应用中不可或缺的一部分，本文将带您深入了解如何使用 Vue3 实现一个动态评论系统，并与后端 API 进行交互。我们将重点使用 Vue3 的 composition API（setup 语法糖）来构建这个系统。

在现代的Web开发中，数据可视化成为了一项重要的任务，尤其是在展示复杂数据时。对于前端开发者来说，选择一个既强大又易于使用的图表库是非常关键的。Chart.js作为一个轻量级的JavaScript图表库，因其简洁的API和良好的效果，成为了很多开发者的首选。本篇博客将带领大家通过Vue3和Chart.js结合，实现图表的可视化展示。

在现代Web开发中，用户交互的体验一直是开发者关注的重点之一，其中，表单验证是提升用户体验的重要环节之一。借助Vue 3的强大特性，我们可以轻松地实现一个响应式的表单验证系统。本文将逐步引导你如何使用Vue 3的Composition API（setup语法糖）来构建一个具备基本验证功能的表单。

在当今的Web开发中，用户身份验证功能是任何应用不可或缺的一部分。在这篇博文中，我们将实现一个简单的登录和注册功能，并添加基本的字段验证。我们将使用Vue 3和Composition API（setup语法糖）来构建这个功能。

随着现代前端框架的发展，Vue 3 以其优雅的写法和高效的性能赢得了许多开发者的青睐。而 Element Plus 作为一款基于 Vue 3 的 UI 组件库，为我们提供了丰富且美观的组件，使得构建用户注册和登录界面变得更加简单而高效。在本篇博文中，我们将详细介绍如何使用 Vue 3 和 Element Plus 来构建一个用户注册和登录界面。

在现代前端开发中，Vue 3 的登场带来了许多令人激动的特性，其中之一便是Composable函数。Composable函数不仅重构了代码逻辑的组织方式，还提升了代码的复用性与可读性。那么，究竟什么是Composable函数？又该如何编写和使用它们呢？今天，我们将深入探讨这一概念，为你带来全面且详尽的理解与实战示范。

近年来，前端开发环境的搭建变得愈加重要，尤其是在快速迭代和高度协作的团队中。Vue3作为一款现代化的JavaScript框架，配合Vite这样的构建工具，极大地简化了流程，提升了效率。本篇博客将带您一步步搭建一个基于Vue3和Vite的快速开发环境，并且提供示例代码以便您更好地理解。

在前端开发领域，Vue.js 是一个备受喜爱的框架，而 Vue CLI 则是一个强大的工具，可以帮助开发者快速地创建和管理 Vue 项目。本文将详细介绍如何通过 Vue CLI 快速创建一个 Vue 3 的项目，并简要介绍项目的结构。

随着Vue 3的推出，TypeScript逐渐成为了前端开发中的一种必备技能。Vue 3的设计更好地支持TypeScript，这使得开发者可以在开发过程中充分利用TypeScript的强类型系统，从而提高代码的可维护性和可读性。在这篇博客中，我们将深入探讨在Vue 3应用中使用TypeScript的最佳实践，并通过示例代码帮助大家理解如何在实际应用中实施这些最佳实践