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中的数据进一步分为多个模块来管理。

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

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

相关文章

对于负载均衡算法的一些思考

碎碎念 最近在看一本关于架构的书&#xff0c;其中牵扯到分布式、自动伸缩、集群相关一定会提到负载均衡&#xff0c;随即写下这篇文章 负载均衡的基石 主要参考&#xff1a; https://www.cloudflare.com/learning/performance/what-is-load-balancing/ https://aws.amazon.c…

传感数据分析——加速度、速度与位移

传感数据分析——加速度、速度与位移 在许多科学和工程应用中&#xff0c;传感器数据的分析是一项至关重要的任务。特别是在运动、运输、结构监测等领域&#xff0c;传感器能够提供有关物体运动和变形的宝贵信息。本文将介绍如何利用Python进行传感器数据分析&#xff0c;重点…

TCP/UDP通信中的部分函数

UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;和TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是互联网协议套件中最常用的两种传输层协议&#xff0c;它们负责在互联网中端到端地传输数据。尽管它们服务…

leetcode题目1

两数之和 简单 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以…

Laravel中使用MinIO进行文件操作及ZIP解压

Laravel中使用MinIO进行文件操作及ZIP解压指南 介绍 在本指南中&#xff0c;我们将详细介绍如何在laravel框架中操作minio&#xff0c;包含方法有&#xff1a;桶列表&#xff0c;创建桶&#xff0c;修改桶&#xff0c;上传文件&#xff0c;删除文件&#xff0c;生成直传链接&…

Linux系统编程:进程控制

1.进程创建 1.1 fork函数 fork&#xff08;&#xff09;通过复制调用进程来创建一个新进程。新进程称为子进程&#xff0c;是调用进程的精确副本 进程&#xff0c;但以下几点除外&#xff1a; 子进程有自己的PID&#xff0c;此PID与任何现有进程组的ID不匹配子进程的父进程ID…

Uncaught InternalError: too much recursion

今天在敲代码的时候偶然间发现项目因为一次操作导致浏览器变得非常卡&#xff0c;而且控制台还报错了 Uncaught InternalError: too much recursior 页面截图如下 &#xff1a; 突如起来的报错和页面异常卡顿给我整不会了ovo&#xff0c;点开报错的地方&#xff0c;直接跳转到对…

HTML满屏漂浮爱心

目录 写在前面 满屏爱心 代码分析 系列推荐 写在最后 写在前面 小编给大家准备了满屏漂浮爱心代码&#xff0c;一起来看看吧~ 满屏爱心 文件heart.svg <svg xmlns"http://www.w3.org/2000/svg" width"473.8px" height"408.6px" view…

Ansible的安装与配置

Ansible的安装与配置 1. 安装ansible # ansible是epel源提供的&#xff0c;所以必须安装epel&#xff1a; [rootRocky9 ~]# yum -y install epel-release Last metadata expiration check: 0:01:53 ago on Tue 26 Dec 2023 10:05:34 PM CST. Dependencies resolved. Package …

精品录播|电磁场数值仿真技术及天线设计与应用

电磁场数值仿真技术及天线设计与应用

直播预约丨《袋鼠云大数据实操指南》No.2:实时开发,如何成为数据智能化的有效驱动力

近年来&#xff0c;新质生产力、数据要素及数据资产入表等新兴概念犹如一股强劲的浪潮&#xff0c;持续冲击并革新着企业数字化转型的观念视野&#xff0c;昭示着一个以数据为核心驱动力的新时代正稳步启幕。 面对这些引领经济转型的新兴概念&#xff0c;为了更好地服务于客户…

银河麒麟V10桌面版分区分析

前言&#xff1a;本文只讨论gpt分区uefi引导形式 &#xff0c;了解分区方案的目的是方便恢复&#xff0c;还原&#xff0c;扩容等&#xff0c;普通用户使用无需了解这些细节。 先回顾分析windows和ubuntu默认分区用做对比 1、windows11默认分区 win11分区&#xff0c;如上图&am…

【Linux线程(二)】线程互斥和同步

前言&#xff1a; 在上一篇博客中&#xff0c;我们讲解了什么是线程以及如何对线程进行控制&#xff0c;那么了解了这些&#xff0c;我们就可以在程序中创建多线程了&#xff0c;可是多线程往往会带有许多问题&#xff0c;比如竞态条件、死锁、数据竞争、内存泄漏等问题&#…

高扩展性便携式1553B总线测试仪,支持麒麟操作系统

手提式便携1553B总线测试仪&#xff0c;利用订制平台的PXIe扩展槽嵌入石竹科技自主研发的高性能T系列专用1553B测试板卡和高级协议分析和测试软件FP-1553B Pro、FP-5186集成的一款模块化、功能可订制的测试仪器。 基本配置可对1553B信号进行波形采集&#xff08;提供软件示波器…

Charles抓包工具使用指南:成为网络数据侦察高手

在日常的开发和测试工作中&#xff0c;能够洞察网络请求和响应的细节对于诊断问题、优化性能及保障数据安全至关重要。Charles作为一款流行的网络抓包和调试工具&#xff0c;凭借其强大的功能和直观的界面成为许多开发人员和测试工程师的必备神器。那么&#xff0c;如何高效地使…

Android RecyclerView注册每项的单击和长按事件监听

1.在Adapter中定义监听接口 public class DeviceListAdapter extends RecyclerView.Adapter<DeviceViewHolder> {public interface OnItemClickListener {public void onItemClick(View view, int position);public void onItemLongClick(View view, int position);}pri…

【批量处理文档】CleverPDF,WOED,EXCEL,PPT,PDF批量转换相关的工具网站NO.97

本文一共:429 个字,需要阅读:2 分钟,更新时间:2024年5 月14日,部分内容具有时效性,如有失效请留言,阅读量:1 CleverPDF&#xff0c;具有44个功能强大的免费在线PDF转换器和工具。 资源来源于网络&#xff0c;免费分享仅供学习和测试使用&#xff0c;请勿用于商业用途&#xff…

超级漂亮的 Ai 官网源码

超级漂亮的 AI 官网源码 效果图部分源码领取源码下期更新预报 效果图 部分源码 <script lang"js">function project3D(x, y, z, vars) {var p, dx - vars.camXy - vars.camY - 8z - vars.camZp Math.atan2(x, z)d Math.sqrt(x * x z * z)x Math.sin(p - v…

List/ConcurrentBag Contains的效率比Dictionary/ConcurrentDictionary ContainsKey 低几千倍

测试目标&#xff1a; 用两组 50000 个字符串做包含(Contains)判断&#xff0c;分析性能差异。 50000个字符串集合测试结果&#xff1a; Dictionary/ConcurrentDictionary 能在1-2毫秒完成50000个字符串集合的包含判断&#xff1b; List 需要3秒&#xff0c;ConcurrentBag需要…

白话机器学习4:小波分解的原理与Python代码实现

小波去噪可以想象成使用一把“筛子”来过滤信号。这个“筛子”能够根据信号的不同频率成分&#xff0c;将其分解成多个层次。在这个过程中&#xff0c;信号的重要信息通常包含在低频部分&#xff0c;而噪声则多分布在高频部分。 将信号通过这个“筛子”分解后&#xff0c;我们可…