- 博客(20)
- 收藏
- 关注
RSS订阅原创 在 Vue 中使用 ECharts：解决 Dialog 中 Tooltip 不显示的问题
在使用 Vue 和 ECharts 时，需要注意响应式系统可能带来的副作用。对于像 ECharts 这样的第三方库，有时直接使用非响应式的变量会更加简单有效。这次的经验也提醒我们在遇到类似问题时，不妨考虑一下是否是响应式机制引起的，并尝试简化处理方式。希望这篇笔记能帮助到同样遇到此问题的开发者们。如果你有任何疑问或更好的解决方案，欢迎留言讨论！
2024-09-25 18:40:08
609
原创 工作笔记：Vue 3 中使用 vue-router 进行导航与监听路由变化
使用useRouter进行导航导入useRouter。使用方法进行页面跳转。监听路由变化导入useRoute和watch。使用watch监听route.name的变化，并根据当前路由名称来更新组件状态。希望这篇笔记对你有所帮助！
2024-09-19 18:29:05
766
原创 Vue 3 Composition API 实战技巧：组件间通信与SPA架构
在上一期专栏中，我们探讨了Vue 3 Composition API的基本用法，并通过几个实用示例展示了如何利用Composition API来管理组件内部的状态。通过这些示例，我们可以看到Vue 3 Composition API与Vue Router和Vuex的集成是如何简化SPA架构的设计和实现的。它可以帮助我们管理跨组件的状态，非常适合在Composition API中使用。在这个例子中，我们定义了一个Vuex store来管理一个简单的计数状态，并在组件中使用了。在这个例子中，父组件通过。
2024-09-18 21:13:17
1242
原创 Vue 3 中动态赋值 ref 的应用
ref在 Vue 3 中，ref是一个函数，它接受一个值作为参数，并返回一个带有.value属性的对象。这个对象的.value属性是响应式的，这意味着任何对.value的更改都会触发依赖此数据的视图重新渲染。这对于管理组件内的状态非常有用。通过以上示例，我们展示了如何在 Vue 3 中使用ref来动态赋值，并利用这一特性来初始化一个图表。这种方法不仅提高了代码的可维护性，还使得状态管理变得更加清晰和直观。动态赋值ref的应用场景非常广泛，除了图表初始化之外，还可以用于处理用户输入、DOM 操作等。
2024-09-13 18:01:17
2670
原创 Vue 3 Composition API进阶指南
通过本文的学习，我们进一步掌握了Vue 3 Composition API的一些高级用法，包括如何组合多个Hooks、使用computed属性来计算响应式状态。这些技术可以帮助你在实际项目中更好地组织组件逻辑，提高代码的可维护性和可读性。在接下来的文章中，我们将继续深入探讨Vue 3的其他特性和最佳实践，帮助你成为更高效的Vue开发者。如果你有任何问题或想要分享的经验，请在评论区留言。
2024-09-11 21:16:07
1127
原创 Vue 3中的异步操作管理
Vue 3的Composition API为我们提供了一种清晰的方式来编写和组织异步逻辑。通过合理利用这些工具，我们可以构建出更加健壮和响应式的Web应用程序。希望这篇文章能为你在Vue 3中处理异步操作提供一些有用的启示。
2024-09-09 20:50:17
1172
原创 Vue3技术分享专栏 - Composition API详解
Composition API 是Vue3中的一个新特性，它为开发者提供了一种更加灵活的方式来组织组件内的逻辑。在上一篇文章中，我们通过一个简单的“Hello World”示例介绍了如何使用Vue3和Composition API来创建响应式的组件状态。通过这篇关于Composition API的文章，我们不仅了解了它的基本概念和用法，而且还看到了如何在实际开发中应用这些概念。在未来的文章中，我们将继续探索Vue3的其他特性，并分享更多实用的技巧和最佳实践。是从父组件传递给子组件的属性，而。
2024-09-07 17:59:17
705
原创 Vue3技术分享专栏 - 引言
欢迎来到《Vue3技术分享专栏》！在这里，我们将从零开始，逐步深入地学习Vue3的各项技术和最佳实践。无论是你是Vue的新手还是有一定经验的开发者，本专栏都将为你提供有价值的信息和实用的代码示例。初次接触Vue框架的开发者。已经了解Vue2但希望迁移到Vue3的开发者。对Vue3新特性感兴趣，希望提高开发效率的技术人员。Vue3简介Vue.js 是一种用于构建用户界面的渐进式JavaScript框架。它以易用性、可扩展性和高性能而闻名。
2024-09-05 18:02:18
988
原创 Vue 3 + Element Plus 封装单列控制编辑的可编辑表格组件
本文介绍了如何使用Vue 3和Element Plus实现一个带有编辑功能的表格。通过本文的步骤，你可以轻松地在自己的项目中实现类似的表格编辑功能。希望这篇教程对你有所帮助！
2024-09-04 20:50:31
2033
2
原创 使用Vue3和ECharts实现拓扑图
通过上述步骤，我们成功地使用Vue3和ECharts实现了一个带有图标节点的拓扑图。这种图不仅能够直观地展示数据之间的关系，还通过添加图标增强了视觉效果。你可以进一步扩展此示例，比如增加更多的交互功能或改变图表样式，以满足不同的需求。希望这篇文章能帮助你更好地理解和使用Vue3和ECharts来创建拓扑图。如果有什么问题或建议，请随时留言交流！
2024-09-02 20:49:30
3440
2
原创 Vue 3 封装 ECharts 图表组件实战
通过以上步骤，我们成功封装了一个可复用的 ECharts 图表组件，并展示了如何在 Vue 3 应用程序中使用这个组件来创建不同类型的图表。这样你就有了一个可以灵活使用的图表组件，它可以根据需要展示柱状图、折线图或饼图。你可以根据具体需求调整 options 来定制每个图表的样式和数据。希望这篇文章能帮助你在实际项目中更好地利用 ECharts 进行数据可视化。
2024-08-30 18:21:33
2223
1
原创 Vue3 中使用 Vuex Store 进行状态管理
通过上述步骤，我们已经成功地在 Vue3 应用中集成了 Vuex，并实现了基本的状态管理。这只是一个简单的例子，实际应用中可能需要更复杂的逻辑和更多的状态管理需求。希望这篇文章能为你提供一个良好的起点！
2024-08-28 19:47:21
870
原创 Vue3中使用Element Plus实现可编辑表格
在现代Web开发中，使用Vue.js构建的交互式表格是非常常见的需求之一。特别是在涉及到数据管理的应用场景中，能够直接在表格内进行编辑、添加和删除的操作极大地提升了用户体验。本文将介绍如何利用Vue3结合Element Plus来实现一个基本的可编辑表格。
2024-08-28 18:40:13
3113
原创 Vue3使用docxtemplater插件导入Word文档
通过以上步骤，我们可以在Vue3项目中生成一个包含Echarts图表和表格数据的Word文档。希望这篇文章能对你有所帮助！
2024-08-24 17:19:43
1639
原创 Vue3 + Element Plus 手动批量上传文件组件详解
通过以上步骤，我们实现了基于Vue3和Element Plus的手动批量文件上传组件。该组件支持批量选择.xls和.xlsx文件，并在用户确认后手动上传这些文件。你可以根据自己的需求进一步扩展此组件的功能，例如添加文件预览、上传进度条等功能。
2024-08-23 11:53:54
1928
原创 Vue3 使用 el-form 嵌套 el-table 进行单条数据的表单校验
在实际开发过程中，我们经常需要处理表格中的表单数据，比如在编辑表格中的某一行数据时进行校验。本文将介绍如何在 Vue3 和 Element Plus 中实现这一功能。在这个例子中，我们使用了一个名为formObj的响应式对象来存储表格的数据。formObj包含一个名为list的数组，数组中的每个元素都代表表格中的一行。通过上述方法，我们可以实现在 Vue3 中使用 Element Plus 的组件嵌套
2024-08-21 20:18:17
1327
2
原创 Vue 实现 动态添加Tab 页签及页面缓存功能
在现代 Web 应用中，Tab 页签功能是非常常见的一种交互模式。它可以帮助用户在不同的视图间快速切换，而不会丢失当前视图的状态。为了进一步提升用户体验，我们可以通过keep-alive组件来缓存已经打开的视图，这样即使用户离开并再次回到这个视图，也可以看到之前的状态。本文将介绍如何在 Vue 项目中实现一个带有缓存功能的 Tab 页签功能。
2024-08-17 16:25:08
1145
原创 Vue 3 中使用 vue-i18n 实现多语言支持
通过以上步骤，您可以在 Vue 3 项目中轻松实现多语言支持。vue-i18n提供了许多高级功能，如命名空间、时区支持等，建议深入阅读官方文档以了解更多细节。
2024-08-14 19:19:55
882
原创 JS实现递归查找指定子节点
接下来，我们将编写一个名为 `findNodeById` 的函数，它接受两个参数：`tree` 和 `targetId`。在这个示例中，`tree` 是一个包含多个根节点的数组，每个根节点又可以拥有子节点。我们的目标是编写一个递归函数来查找具有特定 `id` 的节点。- 如果当前节点有子节点，递归调用 `findNodeById` 函数来查找子节点中的目标。- 如果当前节点的 `id` 与 `targetId` 匹配，则直接返回该节点。- `targetId`：需要查找的节点的 `id`。
2024-08-03 16:54:40
862
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人