Vue学习(3)

已于 2023-06-25 19:18:17 修改
阅读量301 收藏
点赞数
文章标签： vue.js 学习 前端框架
于 2023-06-04 09:19:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53313913/article/details/130993808
版权
文章详细介绍了Vuex的状态管理机制，包括其工作原理、配置环境的设置，以及mapState、MapGetter、MapMutations和MapAction的使用方法。同时，文章探讨了Vuex的模块化配置，强调了namespaced属性在避免命名冲突中的作用。
摘要由CSDN通过智能技术生成

文章目录

Vuex

在这里插入图片描述

在这里插入图片描述

工作原理

在这里插入图片描述
那三个要通过store管理
在这里插入图片描述
在这里插入图片描述

配置环境

使用import时，回先执行Import中的代码,在后面的也会提前。
在这里插入图片描述
index.js
在这里插入图片描述

main.js
在这里插入图片描述
业务逻辑写在action中，mutation只写操作（加工）
没有业务逻辑，直接调用mutation
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
action里面有可以有多个方法，处理多次逻辑。
在这里插入图片描述
逻辑复杂并且想复用就用getter,别人想用

在这里插入图片描述

各种函数

mapState

自动生成action这边的代码，只能生成带有$store.state中的数据

，导入

在这里插入图片描述

对象写法

…对象 的意思是将对象展开。
在这里插入图片描述

数组写法

生成的计算属性的方法和读取的数据的名字相同
在这里插入图片描述

MapGetter

MapMutations

自动生成mutations这边的代码，要传入参数，有commit

对象写法

在这里插入图片描述

数组写法

函数名和调用的函数名是一样的

在这里插入图片描述

Mapaction

自动生成有dispatch的方法，也要接收参数

在这里插入图片描述

总结

在这里插入图片描述
在这里插入图片描述

模块化

模块化1

将配置分开
在这里插入图片描述
在这里插入图片描述
要加上namespaced:true否则简写获取时会报错。
在这里插入图片描述

写了namespaced:true才能这样获取数据，否则就要报错，这是简写。
在这里插入图片描述
这也要多写一个参数
在这里插入图片描述

也可以加斜杠，分类后
在这里插入图片描述
getter内的
在这里插入图片描述
发送到actions

在这里插入图片描述
改进后

在这里插入图片描述
在这里插入图片描述
访问了一个访问api。
在这里插入图片描述

总结

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

~insn~
关注
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
Vue学习心得
weixin_49331914的博客
07-08 4384
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点; mvvm ●Model:模型层，在这里表示JavaScript对象 ●View:视图层,在这里表示DOM (HTML操作的元素) ●ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者 在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通
学习Vue3 第一章
qq1195566313的博客
02-02 7万+
1.介绍vue Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 官方文档地址 介绍 — Vue.js 2.回顾vue2 对比 vue3 我们看如下图 发现传统的vue2 逻辑比较分散 可读性差 可维护性差 对比vue...
20 VUE学习：插件
热门推荐
百锦再的博客
05-29 10万+
插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。/* 可选的选项 */})一个插件可以是一个拥有install()方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的[应用实例]和传递给app.use()// 配置此应用通过 []和 []注册一到多个全局组件或自定义指令。通过 []使一个资源[可被注入]进整个应用。向 []中添加一些全局实例属性或方法一个可能上述三种都包含了的功能库 (例如 [vue-router])。
vue3数组操作学习
weixin_43871703的博客
03-09 2万+
Vue3操作数组的那些小技巧！
Vue学习心得与总结
2201_75464762的博客
12-28 2439
大二开课，跟老师学+自学，一开始看老师分享的培训课程深入学习，虽然知道学习内容且有计划，但总是学着学着就学不下去（课程冗长没有成就感，知识理论不太好接受，学的蛮难过的），最后，三天打鱼两天晒网。我认识到Vue不仅仅是一种框架，更是一种优秀的工具和理念，在我未来的开发中，我会继续深入学习和实践Vue.js，不断提升自己的能力。通过实际的开发经验，我学会了如何将Vue.js应用于真实的项目中，如何与后端API进行交互，获取和更新数据，以及如何处理用户输入和交互反馈，这些都是学习课程中不能替代的经验。
19 VUE学习：自定义指令
百锦再的博客
05-28 10万+
除了 Vue 内置的一系列指令 (比如v-model或v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。我们已经介绍了两种在 Vue 中重用代码的方式：[组件]和。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
vue3中使用$refs
左直拳的马桶_日用桶
08-05 2万+
vue3比vue2烂
学了vue2后如何快速学习vue3
2301_76962889的博客
05-23 1824
Vue 3 提供了方法，可以更好地支持类型推断。
VUE3学习(入门篇)
Joey_Tribiani的博客
09-24 1万+
VUE3学习(入门篇) Vue3相较于Vue2.x改动： 性能提升 按照vue官方的说法，Vue3包含了以下性能方面的提升： 打包大小减少41% 内存占用减少54% 初次渲染快55%，更新渲染快133% 源码升级 使用Proxy代替Object.defineProperty方法实现响应式 重写虚拟DOM的实现和Tree-Shaking TypeScript支持优化 Vue3可以更好地支持TypeScript 新特性 Composition API（组合API） setup配置 ref与re
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且响应式的用户界面。Vue的特点在于其渐进式架构，允许开发者逐步将Vue融入现有的项目中，而不必...
vue 3 学习笔记 vue3 vue3学习笔记
10-18
Vue 3 学习笔记 本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的...
write-vue3-from-scratch:学习vue学习vue写vue学习vue
05-14
本文将深入探讨如何从零开始学习Vue 3，以及如何动手实践编写Vue应用。 一、Vue 3 的核心概念 1. **Composition API**: Vue 3 引入了Composition API，它允许开发者更灵活地组织和复用代码。相比Vue 2的Options ...
Vue3快速上手(Vue3学习笔记)
07-11
Vue3快速上手(Vue3学习笔记) .Vue3简介 - 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） - 耗时2年多、[2600+次提交](https://github.com/vuejs/vue-next/graphs/commit-activity)、[30+个RFC]...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 775
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1151
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
最新发布
2301_77358195的博客
09-30 850
自定义指令
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 508
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 1117
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
小白vue3学习路线
08-12
如果你是一个小白，对Vue3还不太熟悉，我可以给你一个简单的学习路线。首先，你可以从Vue的基础开始学习，了解Vue的核心概念，包括组件、指令、响应式数据等。你可以通过阅读官方文档或者一些入门教程来学习这些基础...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值