- 博客(9)
- 收藏
- 关注
RSS订阅
原创 前端 ｜ React 组件通信 超详细 实现组件通信: 父子、子父及兄弟组件间的通信
在构建用户界面时，React 通过其组件化架构提供了一种高效的方式来组织代码。每个组件负责管理自己的状态和渲染逻辑，但随着应用的复杂性增加，组件之间需要共享数据和状态，或者需要触发彼此的操作。这就是组件通信发挥作用的地方。
2024-07-31 14:34:04
549
原创 前端｜Vue Vue3中使用Pinia，保姆级教程
在状态管理中，"store"是一个全局对象，用来保存和管理应用的状态。在Pinia中，store是响应式的，这意味着当store中的状态改变时，依赖这些状态的组件会自动更新。每个Pinia store都是一个独立的实体，包含其自己的状态、getters和actions。在store中定义state，可以将它看作是组件的data选项。return {count: 0getters是store的计算属性，用来派生出一些状态。
2024-05-16 16:51:48
4711
原创 前端｜Vue Vuex和Pinia Vue状态管理的双雄较量 Vuex和Pinia的区别
Vuex和Pinia都是Vue生态中非常重要的状态管理解决方案。Vuex凭借其官方背书和历史悠久的社区支持，适合需要复杂状态管理的大型项目。而Pinia则以其现代化的设计和开发体验吸引了许多Vue开发者，特别是对于新项目或寻求更简单状态管理方法的开发者来说。项目规模和复杂性团队对TypeScript的偏好现有项目是否已经使用了Vuex对状态管理的个人偏好无论选择哪一个，重要的是理解它们的核心概念和实现方式，以便能够有效地管理和维护应用程序的状态。
2024-05-15 17:33:26
576
原创 前端｜Vue｜VueX 超详细 通过实例来理解 VueX 状态管理
Vuex是Vue.js的一个状态管理库，采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex采用了由Flux、Redux演变而来的状态管理模式。Vuex可能听起来很高大上，但其实它就像一个大型购物中心的储物柜，让任何一家店铺（在我们的案例中，即Vue组件）都能存取共享物品（即状态）。让我们通过一个简单的购物车示例，一步一步地探索Vuex的魔法。想象一下，你正在构建一个在线商城应用。顾客浏览商品，点击“添加到购物车”，并且他们希望在任何页面查看购物车中有哪些商品。
2024-05-15 17:19:05
1187
原创 前端｜Vue Vue3 超详细 实现组件通信: 父子、子父及兄弟组件间的数据流转
Vue 3 提供了多种组件间通信的方式，这些方式满足了从简单父子通信到复杂全局状态管理的各种需求。props和自定义事件依旧是父子组件通信的首选方式，provide和inject提供了一种新的兄弟组件通信方法，而 Vuex 依旧是管理大型应用状态的强大工具。理解这些通信机制的适用场景和限制，将帮助你构建更加可维护和高效的 Vue 应用。
2024-04-25 10:48:28
11858
5
原创 前端｜Vue｜WebSocket 超详细 使用ReconnectingWebSocket实现无缝实时通信
WebSocket 是一种网络通信协议，提供了一个全双工通信渠道，允许数据在客户端和服务器之间以极低的延迟双向传输。与传统的 HTTP 请求不同，WebSocket 在建立连接后可以保持该连接开放，使得数据可以随时在两端传送，而无需重新建立连接。WebSocket 通信由一个握手过程开始，客户端通过 HTTP 请求与服务器建立连接，并升级到 WebSocket 连接。一旦握手成功，WebSocket 连接就会保持开放状态，直到客户端或服务器主动关闭。
2024-04-24 19:16:02
2669
1
原创 前端｜ 基于Lit 和 Quill的富文本编辑器组件，实现富文本编辑器
Lit是一个简单、轻量的库，用于创建快速、可维护、可以在任何使用 HTML 的地方工作的Web组件。它通过声明式模板和响应式状态管理来简化开发过程。Quill是一个现代的、模块化的富文本编辑器，它提供了高度可定制的工具栏、快速的性能以及跨浏览器的兼容性要创建自定义的富文本编辑器组件，首先我们需要使用装饰器来定义一个新的HTML元素。同时，我们使用@state装饰器来跟踪编辑器的内容，以及@query装饰器来获取DOM元素的引用。我们使用Lit的html标签函数和模板字面量来定义组件的HTML结构。
2024-04-11 15:22:41
587
2
原创 vue项目 i18n 国际化完整教程
国际化对于跨国项目至关重要，因为它可以让项目适应不同国家的语言和文化，为不同客户提供更好的使用体验。具体而言，国际化可以让项目根据不同国家的语言进行翻译，并支持多语言切换，让不同国家的客户都能够方便地使用项目。这不仅可以提升项目的用户满意度，还能够扩大项目的市场范围，提高项目的商业价值。基本思路如下1. 安装语言包2. 定义语言包3. 在vue事例挂在 vue-i18n类对象下面具体讲解。
2023-09-01 14:58:53
3837
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人