Vue2-黑马(九)

news2024/11/13 23:43:42

0目录:

(1)router-动态菜单

(2)vuex-入门

(3)vuex-mapState


(1)router-动态菜单

我们点击按钮跳转到主页面,主页在制作动态菜单,路由的跳转方式有好几种:router-link标签跳转,一种是变成写代码:this.$router.push("/main")  还有一种使用element -ui: 提供的导航菜单来跳转

我们使用编程方式来实现跳转:

 

点击登录:

 主页要显示的菜单数据从哪里来呢?我们在登录的时候已经菜单的数据已经都取到啦,并且呢到存到sessionStorage里面啦,主页在从sessionStorage里面取出来

在ContainView.vue主页:

我们拿到的是一维的数组,不是层级关系的数据,我们可以使用map集合配合两次循环就可以生成:

导航菜单 

 

使用v-for循环:top数组:使用v-for循环循环里面生成的标签必须绑定名字叫key的属性key的值必须唯一

使用v-if和v-else来进行判断生成导航菜单的格式

页面布局使用上左右布局:

 

 

 

 

 

 给第二级菜单加跳转属性,需要给菜单加router属性,再给菜单项加:index:=“”属性:

 

 

 这里出现一个问题,就是菜单全部展开出现滚动条,不好看啦,那么能不能设置同时只打开一个菜单呢?通过加一个属性:unique-opened=“true”属性:设置同时打开的菜单只有一个

 

 

 

(2)vuex-入门

我们有这样一个需求,我们有两个组件,一个是主页组件,一个是文本框组件,我们在文本框修改姓名,修改后显示到主页左上角的的欢迎您的地方:

用以前的办法不好实现,文本框是属于P1组件的他只能跟P1组件的data进行绑定,P1的数据呢没有办法被主页 这边直接访问到,这个时候需要学习一个新的技术叫做vuex

这个问题本来就是数据共享的问题,我们可以给这两个组件找一个能够共享数据的地方一个组件往里面存数据,一个组件往里面取数据:

我们前面也刚学了localStorage和SessionStorage对象可以用来存储数据,可以用来存数据和取数据

成功存入:

 

 

点击获取: 

 P1重新修改名字,主页组件还需要再次点击获取新的数据:

 

有没有发现这种做法不方便,一个组件发生改变,另外一个组件不能立刻意识到数据发生了变化了,我们必须自己盗用一个方法获取到更新的数据,响应的不够及时,我们接下来改变了这一点,当共享数据发生了变化,另外一方能够立刻监听到变化,能够显示出来,我们把这种技术叫做响应式的技术,与之对比SessionStorage就不是响应式的技术

我们当时创建项目的时候,已经选择了vuex了,不用在去npm了,他在store文件夹下的index.js文件

 将来我们要共享数据的话需要子啊state里面加属性name,读取数据可以直接读取,将来想要修改name,不能直接修改,需要在mutations里面加一个方法

在修改组件页面需要拿到 store   this.$store

不能直接调用修改的方法,需要写commit方法间接的调用里面的updateName方法

 

在主页组件:获取数据:使用$store.state.name获取数据,注释掉原来获取数据的代码

 

 P1组件点击修改:就会立刻同步过去

 (3)vuex-mapState

从store获取共享数据,这种写法太麻烦啦,如果多个页面用到共享数据,那么需要写多个这个代码,那么怎么简化呢?我们可以使用之前学的计算属性来简化:computed:

依然获取到共享数据: 

 

 比如还有多个数据需要共享比如说age:

这样写的也有一定的麻烦发现共享属性跟计算属性名字一样,而且里面的代码基本一样,反复去写没有意义,vuex就帮助我们写好啦,它帮助你把计算属性的函数帮你生成好,你直接拿来用就行了,我们直接使用cuex给我们提供好的计算属性的函数

在页面需要引入vuex,导入对应的函数mapState函数,参数是一个数组里面写帮助我们生成 计算属性的名称

 功能正常:修改和获取数据

 还有一个等价的写法:

这个函数返回的是个对象 

...是对对象做一个展开,是展开运算符,把对象里面的内容进行展开结果放在一个新的对象,相当于把对象做了一个浅拷贝复制了一份

 修改共享数据:使我们自己写的,那么vuex也帮助我们写呢?具体做法差不多,先引入vuex,对应的函数mapMutations,

注意它返回的是 一个对象我们还是用展开...运算符展开,这个名字也需要修改,跟store里面的修改方法的额名字一样,他还需要把修改的name参数传进去,传参不一样 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/440401.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【PWN】刷题——CTFHub之 简单的 ret2text

萌新第一阶段自然是了解做题的套路、流程,简单题要多做滴 目录 前言 一、checksec查看 二、IDA反汇编 三、exp编写 前言 经典的ret2text流程 一、checksec查看 64位程序,什么保护都没有,No canary found——可以栈溢出控制返回 二、IDA反汇…

SpringBoot整合Redis、以及缓存穿透、缓存雪崩、缓存击穿的理解、如何添加锁解决缓存击穿问题?分布式情况下如何添加分布式锁

文章目录 1、步骤2、具体过程1、引入pom依赖2、修改配置文件3、单元测试4、测试结果 3、redis运行情况4、项目中实际应用5、加锁解决缓存击穿问题代码一(存在问题)代码二(问题解决) 6、新问题7、分布式锁 1、步骤 前提条件&#…

FFmpeg 编译静态库

1. 使用工具 1.1 FFmpeg 官网: 1.2 FFmpeg macOS 官方安装教程: 1.3 Homebreaw 安装网站: 2. Homebreaw 介绍 2.1 简称 brew,在 Mac 平台终端上管理软件包,安装,更新,卸载等软件 2.2 安装 brew,终端执行指令(内部安装…

HTTP协议详解(一)

目录 1.什么是HTTP协议? 2.HTTP的协议格式 使用fiddler抓包工具 理解代理 查看请求内容 3.HTTP请求(Request) 认识URL URL encode 认识method GET方法 POST方法 经典面试题:POST和GET之间的典型区别 其它方法 认识请求 "报头" (header) Host Conte…

Elasticsearch:为日志分析设置安全的 Elasticsearch 管道

在我之前的许多文章中,我已经详细地描述了如何配置如下的管道: 如果你想了解更多,请详细阅读文章: Logstash:Logstash 入门教程 (二) Elastic:运用 Docker 安装 Elastic Stack 并采…

企业在实施采购管理时需要注意哪些问题?

采购管理是指企业为了获得所需的物资和服务等,通过筛选供应商、谈判合同、执行采购计划等一系列过程来实现目标的管理活动。在实施过程中,采购管理需要注意以下几个问题: 1、采购策略的选择 采购策略的选择是采购管理中非常关键的环节。不同…

分享5款win10小工具,让办公学习井井有条

好用的小工具能让办公学习变得更简单便捷,这里推荐几款实用的Win10小工具。 桌面小工具——Win10 Widgets Win10 Widgets是一款实用的桌面小工具软件,可以让你在桌面上显示各种系统信息。你可以使用Win10 Widgets来查看电源、硬盘、CPU、内存、网络、时…

数据结构_第十三关(1):简单排序算法

【本关目标】 排序的概念常见排序的算法思想和实现排序算法的复杂度以及稳定性分析 目录 【本关目标】 1.排序的概念 2.常见排序的算法思想和实现(代码默认都是从小到大排序) 2.1插入排序 1)直接插入排序 2)希尔排序 2.2选…

Java 死锁的原理、检测和解决死锁

什么是死锁 两个或者多个线程互相持有对方所需要的资源(锁),都在等待对方执行完毕才能继续往下执行的时候,就称为发生了死锁,结果就是两个进程都陷入了无限的等待中。 一般是有多个锁对象的情况下并且获得锁顺序不一致造成的。 …

微服务+springcloud+springcloud alibaba学习笔记【Spring Cloud Gateway服务网关】(7/9)

Spring Cloud Gateway服务网关 7/9 1、GateWay概述2、GateWay的特性:3、GateWay与zuul的区别:4、zuul1.x的模型:5、什么是webflux:6、GateWay三大概念:6.1,路由:6.2,断言:6.3,过滤: 7、GateWay的工作原理:8、使用GateWay:8.1,建module8.2,修改pom文件8.3,写配置文件8.4,主启动类…

微服务学习——微服务框架

Nacos配置管理 统一配置管理 配置更改热更新 将配置交给Nacos管理的步骤: 在Nacos中添加配置文件在微服务中引入nacos的config依赖在微服务中添加bootstrap.yml,配置nacos地址、当前环境、服务名称、文件后缀名。这些决定了程序启动时去nacos读取哪个…

Java:JDK对IPv4和IPv6处理介绍

以下以JDK8为例说明对IPv4和IPv6是如何处理的。 一、常用代码 一般情况下,使用如下代码可以获取到域名/主机名对应的多个IP,其中部分是IPv4的,部分是IPv6的: try {InetAddress[] addrs InetAddress.getAllByName(host);for (I…

Quartz框架详解分析

文章目录 1 Quartz框架1.1 入门demo1.2 Job 讲解1.2.1 Job简介1.2.2 Job 并发1.2.3 Job 异常1.2.4 Job 中断 1.3 Trigger 触发器1.3.1 SimpleTrigger1.3.2 CornTrigger 1.4 Listener监听器1.5 Jdbc store1.5.1 简介1.5.2 添加pom依赖1.5.3 建表SQL1.5.4 配置文件quartz.propert…

23-HTTP协议

目录 1.HTTP是什么? 2.HTTP工作过程 3.HTTP协议格式 3.1.抓包工具使用 eg:抓取"必应"的包 PS:HTTP不同版本号之间的区别 3.2.抓包工具原理 3.3.抓包结果分析 ①HTTP 请求: ②HTTP 响应: 3.4.协议…

ArduPilot Kakute F7 AIO DIYF450 without GPS配置

ArduPilot Kakute F7 AIO DIYF450 without GPS配置 1. 源由2. 配置2.1 Kakute F7 AIO相关配置2.1.1 串口规划2.1.2 电传配置2.1.3 GPS配置2.1.4 CRSF接收机配置2.1.5 Compass配置2.1.6 电机配置2.1.7 TX12 遥控器配置 3. 实测效果4. 参考资料 1. 源由 鉴于GPS模块信号质量未达…

3DEXPERIENCE云可以为PLM带来什么?

在消费者领域,云的优势已显而易见,用一个词就可以概括:便利,3DEXPERIENCE云存储服务的用户可以从任何位置在任何设备上访问其数据,只要能够连接到互联网就行了。在一台设备 上所做的更改会立即反映在另一台设备上。 同…

提升10倍写作效率,这5个写作工具,文笔不好的人别错过

记得刚出来上班的时候,我的写作效率很低,经常没有思路,也找不到选题。甚至一两个小时过去了,仍然不知道如何动笔,经常写了删,删了又写。工欲善其事,必先利其器。在写作过程中,需要一…

【数据分析之道-NumPy(五)】numpy迭代数组

文章目录 专栏导读1、前言2、使用python循环语句3、使用nditer函数3.1迭代一维数组3.2迭代二维数组3.3迭代指定顺序的数组3.4迭代时修改数组中的元素 4、使用flat属性5、使用ndenumerate函数6、使用布尔索引总结 专栏导读 ✍ 作者简介:i阿极,CSDN Python…

IO多路复用—多线程网络并发通信 select poll epoll

1.IO 多路转接 (复用) ​ IO 多路转接也称为 IO 多路复用,它是一种网络通信的手段(机制),通过这种方式可以同时监测多个文件描述符并且这个过程是阻塞的,一旦检测到有文件描述符就绪( 可以读数据或者可以写…

Nginx企业级使用1(运维笔记)

Nginx企业级使用1(运维笔记) 重装和升级 信号参数 Kill 选项参数 pid ##关闭nginx ##快速关闭 kill -INT pid ##优雅关闭 kill -QUIT pid##############实操############## [rootserver01 ~]# ps -ef|grep nginx root 1668 1 0 11:09 ?…