Vue（五）

最新推荐文章于 2023-05-07 08:39:54 发布
最新推荐文章于 2023-05-07 08:39:54 发布
阅读量237 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45824445/article/details/104324315
版权

Vue复习笔记

129Vuex概念和作用解析

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

130Vu额单界面到多界面状态管理切换在这里插入图片描述在这里插入图片描述

在这里插入图片描述
老师效果如上 我的界面上没有任何显示
在这里插入图片描述
假如说除了APP之外还有其它界面在这里插入图片描述
引入
在这里插入图片描述
注册
在这里插入图片描述
使用 但是这个时候会报错
在这里插入图片描述
在这里插入图片描述
2各组件互为父子关系
在这里插入图片描述
引用number之后再传过来 如下就ok了
在这里插入图片描述
假如这两个组件之间并没有父子关系 传递起来就很麻烦
不希望 以父子组件之间的关系来共享状态的话就可以使用vuex
在这里插入图片描述
vuex是一个大管家 counter是一个要共享的
vuex是一个插件
在这里插入图片描述
既然是一个插件要调用.use
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
现在就相当于不是把counter放在组件里面的 而是use里面的
在这里插入图片描述
希望点击按钮的时候它做一些改变 可以如下做 但是终究不好
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
如果有异步操作 不要在 mutation里面来做‘ 在actions里面做 devtools也只能跟踪同步操作
在actions里面做完异步操作再提交到mutationds就变成同步了
发送网络请求的时候才会有异步操作
在这里插入图片描述

131vuex-mutations和vuex-dectools

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如下多出来一个vue就是安装完成的
在这里插入图片描述
可以看到里面的结构
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我没做的出来 报错
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

132 掌握vuex-state单一状态树的理解

在这里插入图片描述
在这里插入图片描述
最好是让counter有某种变化 最后让别人使用我们变化之后的

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
比如现在某个界面里面想获取年龄大于20岁在这里插入图片描述
如上就是拿到的所有学生
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
希望年龄大于age 的age不要写死 用到的时候传进来 通过getter动态获取
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1334 掌握mutations的携带参数

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

136数据的响应式原理 mutation响应规则

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
把名字改一改
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
添加的这个东西不会添加到响应式系统里面 界面也不会发生刷新
在这里插入图片描述
如果增加一个属性希望界面跟它一起刷新
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

137vuex-mutations的类型常量

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
普通的导入得写大括号 在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

138 vue-actions的使用详解

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

139掌握vuex-modules的使用详解

在这里插入图片描述
有一些东西希望单独给它抽离的话可以再给它做一些模块
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
提交
在这里插入图片描述
一般如下两个mutation的名字不要重复
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
就是把上面那个结果再拼接上一个222 还想把下面那个counter拼接到后面
在这里插入图片描述

在这里插入图片描述
也就是在上面这个getters模块里面想想引用下面这个模块里面的
counter
在这里插入图片描述
在模块里面可以有第三个参数叫做rootstate

在这里插入图片描述
在这里插入图片描述
如上图 把那个2的结果拼接进来
在这里插入图片描述
修改下面这个名字
在这里插入图片描述
在这里插入图片描述
如下 他是commit自己的mutations
在这里插入图片描述
在这里插入图片描述
此处一般是一个异步操作
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

140vue-store文件夹的目录组织

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
它是按照名字分配的不是按照写的顺序分配的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

都柏林往事
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现评价星星功能
10-15
主要为大家详细介绍了vue实现评价星星功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE整理（五）
12-06
VUE学习（五）！VUE学习（五）！VUE学习（五）！VUE学习（五）！VUE学习（五）！VUE学习（五）！
Java 8之二小坑：stream parallel 和 lamada
weixin_30762087的博客
04-14 120
Stream：parallel乱序 Java 8 stream流为处理集合时非常方便。遇到的一个坑是为了提高在多核cpu下的性能，尝试了parallel()。数据源是HashSet的，在做分割的时候发现每次跟串行的结果都不一样。 解决方式： 后来改为有序的LinkedHashSet再使用parallel。 去掉parallel，让stream串行执行 lamada： 如下代码： public ...
计算机网络 chapter 5 运输层
08-06 91
第五章 运输层 运输层向它上面的应用层提供通信服务，运输层为相互通信的应用进程提供了逻辑通信。 两个主机通信实际上是两个主机中的应用进程互相通信。IP地址可以将分组送到目的主机，但是主机的网络层没有交付给主机中的应用进程。因此需要运输层。 运输层还要对收到的报文进行差错检测。 传输控制协议TCP概述 ...
视觉内容全攻略：用科学、工具和策略制作让人中毒的图片
李淳
01-04 1660
我们热衷于在Buffer博客中设置目标来进行改善，我们最近遇到了一项挑战：每篇文章都要配有原创图片。 对于从事新闻专业的Courtney和我来说，这是非常艰巨的任务，因为新闻专业人士的技能是通过语言来描绘情境，而不是用Photoshop来绘图。因此，我们在“视觉内容”这方面，尽了最大努力。 不知你可曾听说过视觉内容？现今，这个术语似乎随处可见。每当我们要策划内容的时候我们都会遇到它，看
潭州课堂25班：Ph201805201 django 项目 第二十四课 文章主页 多级评论数据库设计 ，后台代码完成 (课堂笔记）...
weixin_30655569的博客
12-24 97
加载新闻评论功能 1.分析 业务处理流程： 判断前端传的新闻id是否为空，是否为整数、是否不存在 请求方法：GET url定义：'/news/<int:news_id>' 请求参数：url路径参数 参数类型前端是否必须传描述 news_id 整数 是 新闻id 新闻详情页直接通过模版渲染的方式来实现，在新闻详情页直...
018.（5.8-5.15）初涉机器学习
Ray的博客
05-16 309
机器学习介绍：监督学习和无监督学习 介绍： 机器学习是从人工智能发展出来的一个领域。 运用： 1.数据挖掘 2.人自己不能编程的应用（如自动驾驶） 3.私人定制程序 4.更好地理解人类学习 主要的两类算法：监督学习和无监督学习。 其他：如强化学习和推荐系统。 监督学习和无监督学习 监督学习： 在已有数据集基础上，“right answers given”，从而解决回归问题或分类问题。 ...
【Vue五分钟】五分钟了解vue的常用实例方法
Lushengshi的博客
08-22 1804
在了解vue的常用的实例方法之前，我们应该先要了解其常用的实例属性，你能了解到的vue实例属性有哪些呢？再通过实例属性了解实例方法，就会对vue有更加深的了解，快来跟我一起看看吧，千万别顽疾点赞加关注哦！！！
【Vue五分钟】五分钟让你了解vue组件的层级关系
Lushengshi的博客
08-23 1597
【vue五分钟】五分钟让你了解vue组件_丘比特惩罚陆的博客-CSDN博客可以关注更多的博文进行学习了解。好的，我们进入今天的主题，我们知道组件可以进行调用，网页也可以通过分割的方式在页面中进行嵌套，并且可以在组件层级形成父级和子级、兄弟级别的关系，使得网页开发更加的富有层次感。
狂神说Vue笔记整理
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
Vue生成随机数
温柔归故里
05-07 2103
Vue生成随机数
Vue进阶（四十七）：面试必备：2024 Vue经典面试题总结（含答案）
热门推荐
IT全栈 华强工作室
04-22 19万+
MVVM是的缩写。MVVM是一种设计思想。Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI 组件，它负责将数据模型转化成UI展现出来，ViewModel是一个同步View和Model的对象。在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的， 因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。ViewModel。
Vue
03-30
视频测试 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
VUE面试题五.zipVUE面试题五.zip
02-02
VUE面试题五.zipVUE面试题五.zipVUE面试题五.zipVUE面试题五.zipVUE面试题五.zipVUE面试题五.zipVUE面试题五.zipVUE面试题五.zipVUE面试题五.zipVUE面试题五.zip
vue表格自动滚动
01-08
npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) html代码 css代码 .seamless-warp { height: 500px; overflow: hidden...
基于OpenGL的C语言的魔方项目.zip
06-15
C语言是一种广泛使用的编程语言，它具有高效、灵活、可移植性强等特点，被广泛应用于操作系统、嵌入式系统、数据库、编译器等领域的开发。C语言的基本语法包括变量、数据类型、运算符、控制结构（如if语句、循环语句等）、函数、指针等。在编写C程序时，需要注意变量的声明和定义、指针的使用、内存的分配与释放等问题。C语言中常用的数据结构包括： 1. 数组：一种存储同类型数据的结构，可以进行索引访问和修改。 2. 链表：一种存储不同类型数据的结构，每个节点包含数据和指向下一个节点的指针。 3. 栈：一种后进先出（LIFO）的数据结构，可以通过压入（push）和弹出（pop）操作进行数据的存储和取出。 4. 队列：一种先进先出（FIFO）的数据结构，可以通过入队（enqueue）和出队（dequeue）操作进行数据的存储和取出。 5. 树：一种存储具有父子关系的数据结构，可以通过中序遍历、前序遍历和后序遍历等方式进行数据的访问和修改。 6. 图：一种存储具有节点和边关系的数据结构，可以通过广度优先搜索、深度优先搜索等方式进行数据的访问和修改。 这些数据结构在C语言中都有相应的实现方式，可以应用于各种不同的场景。C语言中的各种数据结构都有其优缺点，下面列举一些常见的数据结构的优缺点： 数组： 优点：访问和修改元素的速度非常快，适用于需要频繁读取和修改数据的场合。 缺点：数组的长度是固定的，不适合存储大小不固定的动态数据，另外数组在内存中是连续分配的，当数组较大时可能会导致内存碎片化。 链表： 优点：可以方便地插入和删除元素，适用于需要频繁插入和删除数据的场合。 缺点：访问和修改元素的速度相对较慢，因为需要遍历链表找到指定的节点。 栈： 优点：后进先出（LIFO）的特性使得栈在处理递归和括号匹配等问题时非常方便。 缺点：栈的空间有限，当数据量较大时可能会导致栈溢出。 队列： 优点：先进先出（FIFO）的特性使得
QT-qtablewidget表头添加复选框QHeaderView
06-15
在 Qt 框架中，要在 QTableWidget的表头中添加复选框，可以通过继承 QHeaderView 并重写 paintSection 方法来实现。 介绍一种继承 QHeaderView的方法分别实现QTableWidget中添加复选框，可全选/全不选/部分选。
分段划线测量表格通用版.doc
06-15
分段划线测量表格通用版.doc
扫雷小游戏(JAVA SE).zip
最新发布
06-15
该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
Vue四舍五入
05-24
在 Vue 中可以使用 JavaScript 内置的 `Math.round()` 方法进行四舍五入。例如： ```html {{ roundNumber }} <!-- 输出：3 --> export default { data() { return { number: 2.5 } }, computed: { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值