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

git的使用、router和route的区别以及v-show和v-if的差别

这里写目录标题

  • 多人协作使用git的步骤(使用gitub)
    • 建立自己的空仓库
    • 连接远程仓库
    • 使伙伴可以使用仓库
    • 将代码拉入空仓库
    • 进行git指令的学习
  • router和route的区别
    • router
      • 定义:
      • 用途:
    • route
      • 定义:
      • 用途:
  • v-show和v-if的差别
    • 渲染方式
      • v-if
      • v-show
    • 初始化渲染
      • v-if:
      • v-show:
    • 内存使用
      • v-if:
      • v-show:
    • 状态保持
      • v-if:
      • v-show:
    • 使用场景
      • v-if:
      • v-show:

多人协作使用git的步骤(使用gitub)

建立自己的空仓库

  1. 远程建立:在gitub上
  2. 本地建立:直接在自己的项目上建立(指令:git init my-project、cd my-project)

连接远程仓库

git remote add origin https://github.com/yourusername/my-project.git

这里使用HTTPS速度过慢无法连接、所以使用SSH密钥

使伙伴可以使用仓库

可以通过克隆远程仓库来获取项目的副本

git clone https://github.com/yourusername/my-project.git

邀请协同者:为了使他有权利对你的仓库及进行更改

将代码拉入空仓库

进行git指令的学习

  1. 每次写代码前需要先拉去最新的代码
git pull origin master
  1. 添加更改
git add .
  1. 提交更改
git commit -m "描述你的更改"
  1. 在推送之前拉取更新
git pull origin master
  1. 没有冲突就可以推送代码了
git push origin master
  1. 有冲突手动解决冲突

router和route的区别

router

定义:

router 是 Vue Router 的实例,负责整个路由的配置和管理。它包含了所有的路由规则和全局导航守卫等。

用途:

  1. 用于定义应用的路由规则。
  2. 提供全局的路由导航功能,如路由跳转、路由守卫等。
  3. 可以通过 router 实例调用各种方法,如 router.push()、router.replace() 等来进行程序化导航。

route

定义:

route 是一个表示当前路由状态的对象。它包含了有关当前路由的信息,如路径、参数、查询字符串等。

用途:

  1. 在组件中访问当前路由的信息。
  2. 可以用于获取当前路由的参数、查询字符串等,以便根据这些信息渲染组件。

v-show和v-if的差别

渲染方式

v-if

  1. DOM 操作:v-if 会根据条件的真假来决定是否渲染 DOM 元素。如果条件为 false,元素将从 DOM 中完全移除;当条件为 true 时,该元素会被插入到 DOM 中。
  2. 开销:每次条件变化时,Vue 会执行插入或删除操作,因此使用 v-if 在频繁切换时可能会带来性能开销。

v-show

  1. DOM 操作:v-show 始终渲染元素,但通过设置 CSS 的 display 属性来控制元素的可见性。当条件为 false 时,该元素的 display 属性被设置为 none,但仍然存在于 DOM 中。
  2. 开销:切换 v-show 的可见性只涉及修改样式,因此在频繁切换时性能更优。

初始化渲染

v-if:

只有在条件为 true 时,元素才会被渲染。因此在初始渲染时,v-if 可以减少 DOM 元素的数量。

v-show:

在初始渲染时,所有绑定了 v-show 的元素都会被渲染,即使它们是隐藏的。

内存使用

v-if:

当条件为 false 时,元素被从 DOM 中移除,内存使用较低。

v-show:

元素始终存在于 DOM 中,即使不可见,因此可能会导致较高的内存占用。

状态保持

v-if:

移除元素后,所有与该元素相关的状态(如输入框的值)都会丢失。

v-show:

元素在隐藏时仍然保留其状态,适用于需要保持状态的场景。

使用场景

v-if:

适合于不常变化的条件。
适用于需要动态控制大量数据的场景,特别是当你希望减少初始渲染的 DOM 元素数量时。

v-show:

适合于频繁切换的元素(如选项卡、下拉菜单等)。
适用于需要快速显示和隐藏的 UI 组件,保持元素的状态。

相关文章:

git的使用、router和route的区别以及v-show和v-if的差别

这里写目录标题 多人协作使用git的步骤(使用gitub)建立自己的空仓库连接远程仓库使伙伴可以使用仓库将代码拉入空仓库进行git指令的学习 router和route的区别router定义:用途: route定义:用途: v-show和v-i…...

Win系统通过命令行查看笔记本电池损耗/寿命/健康

在 Windows 10/11 系统中,可以通过指令查看笔记本电池的寿命情况,方法如下: 0,打开cmd/终端 键盘快捷键:Win R,然后输入cmd,点击【确定】 1,执行命令 在命令行中输入下面指令并按…...

【安当产品应用案例100集】029-使用安全芯片保护设备核心业务逻辑

我国工业企业普遍缺乏数据安全意识,对数据安全保护缺乏基本认识。这导致企业在数据安全方面的投入不足,保护能力基本不具备,难以有效应对数据安全风险。不过随着安全事件越来越多,很多工业企业的安全意识也越来越高,在…...

Redis高级篇之缓存一致性详细教程

文章目录 0 前言1.缓存双写一致性的理解1.1 缓存按照操作来分 2. 数据库和缓存一致性的几种更新策略2.1 可以停机的情况2.2 我们讨论4种更新策略2.3 解决方案 总结 0 前言 缓存一致性问题在工作中绝对没办法回避的问题,比如:在实际开发过程中&#xff0c…...

C++ 文件操作详解

C 文件操作详解 在C中,文件操作分为文本文件和二进制文件的操作,通过文件流类(ifstream、ofstream、fstream)进行文件的读写。这些类封装了文件的输入和输出操作,并继承了istream和ostream的功能,使得流对…...

计算机网络:网络层 —— 边界网关协议 BGP

文章目录 路由选择协议动态路由协议边界网关协议 BGPBGP 的基本概念BGP-4 的四种报文 路由选择协议 因特网是全球最大的互联网,它所采取的路由选择协议具有以下三个主要特点: 自适应:因特网采用动态路由选择,能较好地适应网络状态…...

Python数据可视化seaborn

产品经理在做数据分析时可能需要通过可视化来分析。seaborn官网 1. relplot 散点图 https://seaborn.pydata.org/examples/scatterplot_sizes.html import pandas as pd import seaborn as sns df pd.DataFrame({x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],y: [8, 6, 7, 8, 4, 6,…...

Java继承练习

构建Person类(属性:名字、年龄、工作岗位),创建三个对象,并且根据对象的年龄或名字长度来进行冒泡排序 package chapter08.homework.test01;public class homework01 {public static void main(String[] args) {Perso…...

Excel怎么转换成word?分享两种方法!

Excel文件想要转换成word文档中,直接粘贴复制的话,可能会导致表格格式错乱,那么如何转换才能够保证表格不错乱?今天分享两个方法,excel表格转换为word文件。 方法一: 首先打开excel表格,将表格…...

nignx代理获取真实地址request.getRequestURL()

# 反向代理配置到后端接口 location /prod-api/ { # proxy_set_header Host $proxy_host; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarde…...

登录注册窗口(二)

登录注册窗口(二) 前言 在上一集我们就完成了整个登录注册窗口的布局,我们为了能够点击那两个特殊的按钮,我们就要去连接他们的槽函数。那么我们就开始这一集的内容吧。 需求分析 为了能够切换手机号与用户名的注册登录以及注…...

go channel 通道

一、底层实现 1、数据结构 type hchan struct {qcount uint // total data in the queuedataqsiz uint // size of the circular queuebuf unsafe.Pointer // points to an array of dataqsiz elementselemsize uint16closed uint32timer *t…...

论文阅读:Computational Long Exposure Mobile Photography (二)

这篇文章是谷歌发表在 2023 ACM transaction on Graphic 上的一篇文章,介绍如何在手机摄影中实现长曝光的一些拍摄效果。 Abstract 长曝光摄影能拍出令人惊叹的影像,用运动模糊来呈现场景中的移动元素。它通常有两种模式,分别产生前景模糊或…...

基于SSM+小程序的高校寻物平台管理系统(失物1)

👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 本基于微信小程序的高校寻物平台有管理员,用户以及失主三个角色。 1、管理员功能有个人中心,用户管理,失主管理,寻物启示管理,拾…...

gerrit 搭建遇到的问题

1、启动Apache,端口被占用 : AH00072: make sock: could not bind to address (0S 10048)通常每个套接字地址(协议/网络地址/端口)只允许使用一次。: AH00072: make sock: could not bind to address 0.0.0.:443 a AH00451: no listening sockets available, shutti…...

UBUNTU查看CPU核心数

UBUNTU查看CPU核心数 前言一、使用lscpu命令1. 执行命令2. 查看输出 二、使用/proc/cpuinfo文件1. 查看文件2. 解释输出 三、使用nproc命令1. 执行命令2. 查看输出 四、使用htop或top工具1. 使用htop2. 使用top 五、使用inxi命令1. 执行命令2. 查看输出 六、使用图形界面工具1.…...

【JS】声明提升与块级作用域

我是目录 引言声明提升声明提升的理解函数表达式声明提升总结代码生成与查找变量的过程代码生成词法分析( Tokenizing/Lexing)语法分析( Parsing)代码生成生成代码总结查找变量不同版本中的执行上下文不同版本对执行上下文的定义let/constlet特点const特点let/const声明的变…...

Flink的流、批处理

Flink的数据流处理,是持续流模型,数据不会落地,上游和下游的Task同时启动,等待数据的到达,Flink的批处理还是用的MapReduce计算模型,先处理map端,再执行reduce端。 flink的流处理(STREAMING)&a…...

学习方法该升级了,‌AI时代的弯道超车:【心流学习法】行动与意识合一的巅峰进化

你是否曾感到内心如荒漠般干涸,面对浩瀚的知识海洋,热情逐渐消磨殆尽? 你是否渴望忘却时间的流逝,心无旁骛,与知识展开一场纯粹而深邃的对话? ​在AI时代,智能体处理数据、知识迭代的速率让人…...

【大模型LLM面试合集】大语言模型架构_chatglm系列模型

chatglm系列模型 1.ChatGLM 1.1 背景 主流的预训练框架主要有三种: autoregressive自回归模型(AR模型):代表作GPT。本质上是一个left-to-right的语言模型。通常用于生成式任务,在长文本生成方面取得了巨大的成功&a…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...