Vue（五）

最新推荐文章于 2023-05-07 08:39:54 发布
最新推荐文章于 2023-05-07 08:39:54 发布
阅读量238 收藏
点赞数
分类专栏： 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 121
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 310
机器学习介绍：监督学习和无监督学习 介绍： 机器学习是从人工智能发展出来的一个领域。 运用： 1.数据挖掘 2.人自己不能编程的应用（如自动驾驶） 3.私人定制程序 4.更好地理解人类学习 主要的两类算法：监督学习和无监督学习。 其他：如强化学习和推荐系统。 监督学习和无监督学习 监督学习： 在已有数据集基础上，“right answers given”，从而解决回归问题或分类问题。 ...
【Vue五分钟】五分钟了解vue的常用实例方法
Lushengshi的博客
08-22 1805
在了解vue的常用的实例方法之前，我们应该先要了解其常用的实例属性，你能了解到的vue实例属性有哪些呢？再通过实例属性了解实例方法，就会对vue有更加深的了解，快来跟我一起看看吧，千万别顽疾点赞加关注哦！！！
【Vue五分钟】五分钟让你了解vue组件的层级关系
Lushengshi的博客
08-23 1602
【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 2113
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...
vue项目+opensheetmusicdisplay插件+xml或者musicxml文件转五线谱
08-04
vue项目中，使用opensheetmusicdisplay插件，让xml文件转成五线谱
vue.js 实现评价五角星组件的实例代码
12-29
饿了么的五角星有三种形状,分别是实星,半星,空星 并且组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等…. 所以需要像组件传入一个大小:size,一个分数:score 代码如下: ...
vue入门教程.pptx
10-26
五、Vue-cli 构建项目 1. 创建项目：在命令行中运行命令 vue init webpack firstVue 2. 安装项目所需要的依赖：cd 到项目文件夹，运行命令 cnpm install 3. 运行项目：在项目目录中，运行命令 npm run dev 六、...
内网搭建vue环境.doc
06-01
五、常见问题解决 在搭建 Vue 环境过程中，可能会出现一些错误，例如 "执行 node start env 提示 'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序"，或者 "Cannot find module 'webpack/bin/config-...
Vue四舍五入
05-24
在 Vue 中可以使用 JavaScript 内置的 `Math.round()` 方法进行四舍五入。例如： ```html <template> <div> {{ roundNumber }} <!-- 输出：3 --> </div> </template> <script> export default { data() { return { number: 2.5 } }, computed: { roundNumber() { return Math.round(this.number) } } } </script> ``` 在上面的例子中，我们将数字 2.5 进行四舍五入并输出结果。注意，`Math.round()` 方法会将小数点后的数值分别与 0.5 进行比较来决定是否进位。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值