当前位置: 首页 > news >正文

5.14(Vue2)

1.单页应用程序是指所有功能都在一个html页面上

单页面应用程序,之所以开发效率高,性能好,应用体验好,最大的原因就是:页面按需更新。

2.Vue中的路由

路径和组件的映射关系

Vue中的路由插件:VueRouter,掌握VueRouter的基本使用步骤

VueRouter的作用:修改地址栏路径的时候,切换显示匹配的组件。

3..vue结尾的文件分为2类

页面组件:src/views文件夹,页面组件,用于页面展示,配合路由使用

复用组件:src/components文件夹,复用组件,用于展示数据,常用于页面的复用

4.路由的封装抽离

所有的路由配置放置在main.js中不合适,通常把路由模块抽离出来单独放在一个文件中,有利于维护。

5.vue-router提供了一个全局组件<router-link>用于取代<a>标签

因为如果使用a标签进行跳转的话,需要给当前跳转的导航加样式,同时要移除上一个a标签的样式,太麻烦!

router-link-active:用于模糊匹配(常用)

router-link-exact-active:用于精确匹配

6.在进行路由跳转的时候传递参数

分为 查询参数传参 和 动态路由传参

7.两种路由跳转方式

7-1)路径跳转

this.$router.push({

        path: '路由路径'

})

7-2)命名路由跳转

{ name: ''路由名", path: '/path/xxx', component:XXX }

8.缓存组件

原因:当路由被跳转后,原来所看到的组件就被销毁了(会执行组件内的beforeDestroy和destroyed生命周期钩子),重新路由到该组件后,该组件有会被重新创建(会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子)

解决方法:利用keep-alive把原来的组件给缓存下来,keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。好处就是在组建切换的时候把切换出去的组件保留在内存中,防止重复渲染DOM,目的就是提高用户体验。

9.Vuex

Vuex就是一个插件,可以帮我们管理Vue通用的数据(多组件共享的数据)。例如:购物车数据, 个人信息数据

注意,并不是所有的场景都适合使用Vuex,只有在必要的时候才使用vuex。

10.vuex中的几个部分

state:存放数据

mutations:同步修改数据的方法

actions:异步执行的方法

getters:从state中筛选出符合条件的一些数据,并且这些数据是依赖state的,此时会用到getters

modules:如果把所有的状态都放在state中,当项目变得越来越大的时候,vuex会变得越来越难维护,因此把vuex中的数据进一步分为多个模块来管理。

相关文章:

5.14(Vue2)

1.单页应用程序是指所有功能都在一个html页面上 单页面应用程序&#xff0c;之所以开发效率高&#xff0c;性能好&#xff0c;应用体验好&#xff0c;最大的原因就是&#xff1a;页面按需更新。 2.Vue中的路由 路径和组件的映射关系 Vue中的路由插件&#xff1a;VueRouter&…...

使用openssl生成自签名证书

使用openssl生成自签名证书 1. 交互式生成2. 一步生成参考 1. 交互式生成 自签名 SSL 证书的生成涉及一个简单的 3 步过程&#xff1a; 步骤 1&#xff1a;创建服务器私钥 openssl genrsa -out cert.key 2048步骤 2&#xff1a;创建证书签名请求 (CSR) openssl req -new -k…...

【java】泛型

文章目录 1. 什么是泛型&#xff1f;1.1 背景1.2 泛型的概念1.3 泛型的好处 2. 泛型类、接口...2.1 泛型类2.2 从泛型类派生子类2.2.1 子类也是泛型类&#xff0c;子类和父类的泛型类型要一致2.2.2 子类不是泛型类&#xff0c;父类要明确泛型的数据类型 2.3 泛型接口2.4 泛型方…...

计算思维的理解

2006年&#xff0c;卡内基梅隆大学周以真教授首次系统性地定义了计算思维。这一年&#xff0c;她在美国计算机权威期刊《Communications of the ACM》上发表了题为《Computational Thinking》的论文&#xff0c;由此开启了计算思维大众化的全新历程。 周以真&#xff08;Jeanne…...

Python中tkinter编程入门4

在Python中tkinter编程入门3-CSDN博客中创建了Button控件&#xff0c;点击该控件就会产生一个点击事件&#xff0c;在创建Button控件时指定该点击事件的处理程序后&#xff0c;按键控件就会对用户的点击事件产生响应。 1 定义事件处理器 定义事件处理器就是一个自定义的函数。…...

Milvus的系统架构

简介 Milvus的构建在许多知名的向量搜索库比如Faiss, HNSW, DiskANN, SCANN等之上的&#xff0c;它针对稠密向量数据集的相似搜索而设计&#xff0c;能支持百万、十亿甚至万亿级别的向量搜索。 Milvus支持数据分片&#xff0c;流式数据插入&#xff0c;动态schema&#xff0c…...

MFC中关于CMutex类的学习

MFC中关于CMutex类的学习 最近在项目中要实现两个线程之间的同步&#xff0c;MFC中提供了4个类&#xff0c;分别是CMutex(互斥量)、CCriticalSection(临界区)、CEvent(事件对象)、CSemaphore(信号量)。有关这4个类的说明&#xff0c;大家可以参考微软官方文档&#xff1a; CM…...

删除表空间

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 当某个表空间中的数据不再需要时&#xff0c;或者新创建的表空间不符合要求时&#xff0c;可以考虑删除这个表空间。若要删除表空间&#xff0c;则需要用户具有 DROP TABLESP…...

下载element-ui报错

此错误表示尝试从npm注册表下载“resize observer polyfill”包时超时。这可能是由于网络连接问题或npm注册表服务器的问题。 要解决此问题&#xff0c;您可以尝试以下步骤&#xff1a; 1.重试npm install命令&#xff1a;有时&#xff0c;网络问题会导致临时超时。再次运行npm…...

[原创](Modern C++)现代C++的std::bind花式绑定,使用方式大全.

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ联系: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、D…...

Unity射击游戏开发教程:(13)如何在Unity中播放音效

在本文中,我将向大家展示一些为游戏添加声音的不同方法。 我们为游戏添加声音的第一种方法是播放背景音乐。在此,我们将创建游戏对象(“音频管理器”)并创建一个子游戏对象(“背景音乐”)。该子游戏对象将是播放音乐的对象,因此需要向其添加音频源组件。如果没有音频源组…...

Swift—手写防抖、手写图片预加载与多张图片拼接

什么是防抖&#xff0c;为什么要防抖&#xff1f; 比如我们在文档在线编辑中修改文档内容&#xff0c;总不能打一个字就发送一次更新请求吧&#xff0c;用户疯狂点击一个按钮&#xff0c;总不能一直触发按钮的逻辑吧。防抖被用于避免频繁触发的事件。 Swift实现防抖代码&…...

Redis过期键删除策略

Redis有三种过期键的删除策略。 定时删除&#xff1a;在设置键的过期时间的同时&#xff0c;创建一个定时器&#xff0c;让定时器在键的过期时间来临时&#xff0c;立即执行对键的删除策略。惰性删除&#xff1a;放任键过期不管&#xff0c;但每次从键空间获取键时&#xff0c…...

413 Request Entity Too Large

问题 平台上传文件接口报&#xff1a;413 Request Entity Too Large。 原因 从字面意思就能看出来&#xff0c;是上传文件过大导致的。 一般解决 一般情况下修改nginx配置文件中client_max_body_size参数的大小就行了。可以在http{ }中设置。也可以在server{ }中设置。还可…...

工业无风扇计算机的优点

无风扇计算机往往采用紧凑且密封的外形&#xff0c;使其坚固耐用&#xff0c;使其能够在需要现场工程师进行维护之前承受恶劣的环境数年。机载移动部件较少或没有移动部件会降低组件无法按预期运行的可能性&#xff0c;或者更糟糕的是发生故障和损坏。采用工业组件和较低的散热…...

个人学习计划

vue前端&#xff08;一周&#xff09; 05/14 - 05/19 Html、css复习、vue基础复习、axios复习 05/14 ElementUI学习 05/15 JWT集成验证码、token 05/16 vue-route多角色登录 05/17 增删查改、文件下载 05/18 Echart饼状图 05/19 &#x1f4cc; 附加学习&#xff1a; 父子传值三…...

【电控实物-LK电机】

参数 Kt 0.11 N.M/A...

《Mybatis》系列文章目录

什么是 MyBatis&#xff1f; MyBatis 是一款优秀的持久层框架&#xff0c;它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO&#xff…...

ARM机密计算组件

安全之安全(security)博客目录导读 目录 ​一、硬件架构 1、RME 二、软件和固件架构 1、RMM 2、其他固件标准&#xff08;例如PSCI&#xff09; 三、开源实现 1、TF-A 2、Veraison 3、工具链 四、动态TrustZone技术 Arm机密计算架构(Arm CCA)引入了一系列硬件和软件…...

Linux 生态与工具

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 目录 Linux生态简介:Linux工具lrzsz&#xff…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...