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

ops/2024/11/9 4:31:23/

这里写目录标题

  • 多人协作使用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:

gitgitub_4">多人协作使用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_24">进行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 组件,保持元素的状态。


http://www.ppmy.cn/ops/132113.html

相关文章

C++builder中的人工智能(10)神经网络中的Sigmoid函数

在这篇文章中,我们将探讨最受欢迎的激活函数之一——Sigmoid函数。我们将解释什么是Logistic函数,以及它与Sigmoid函数的区别,并展示如何在C应用中使用这些函数。 目录 人工神经网络(ANN)中的激活函数是什么&#xff…

WPF怎么通过RestSharp向后端发请求

1.下载RestSharpNuGet包 2.请求类和响应类 public class ApiRequest {/// <summary>/// 请求地址/// </summary>public string Route { get; set; }/// <summary>/// 请求方式/// </summary>public Method Method { get; set; }/// <summary>//…

【TabBar嵌套Navigation案例-常见问题按钮-WebView-加载网页 Objective-C语言】

一、接下来呢,当我们点击这个cell的时候,我们应该modal出来一个控制器啊,像我们示例程序一样, 1.像示例程序一样 然后呢,这个控制器,实际上,是一个WebView, 里边有一个控件儿,叫webView,我们来做一下, 我们首先要找到点击cell的方法,在这个常见问题里边,helpCon…

WebStorm技巧

WebStorm&#xff1a;前端开发的加速技巧 &#x1f680; 前端工程师们&#xff0c;想不想让你的开发速度快得飞起来&#xff1f;今天我们就来解锁WebStorm中的那些让人惊叹的黑科技&#xff01; 第一关&#xff1a;环境配置篇 ⚙️ 1. 性能优化设置 // 推荐配置 {"memor…

flutter鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态

在 Flutter 中&#xff0c;状态管理是开发过程中一个至关重要的部分。Flutter 提供了多种方式来实现组件间的状态传递&#xff0c;其中一种比较底层的方式是使用 InheritedWidget。虽然 InheritedWidget 主要用于将数据传递给其子树中的小部件&#xff0c;但它也是许多更高级状…

SAP-MM-下单配置增强TM-PI

接口开发功能说明 业务背景将开发的接口的整体业务背景进行概要说明,可以用图进行描。 用户在物流管理系统执行创建采购订单操作时,通过PI系统传递采购订单数据到SAP ERP系统中,同时,将相关信息写入到SAP ERP系统中的下单配置据库表。 接口清单以清单方式与对方系统之间的所…

如何利用指纹浏览器爬虫绕过Cloudflare的防护?

网络爬虫能够系统地浏览网页并提取所需的数据&#xff0c;通常被用于市场研究、数据分析或者竞争情报。然而&#xff0c;一些反爬虫机制给网络爬虫的工作带来了不少挑战和风险。 其中&#xff0c;Cloudflare提供了多层次的防护机制&#xff0c;包括IP封锁、速率限制、CAPTCHA验…

市场需求变化对晶圆代工的影响:适应与调整并行

根据QYResearch调研团队最新发布的《全球晶圆代工市场报告2023-2029》显示&#xff0c;预计到2029年&#xff0c;全球晶圆代工市场的规模将攀升至2377.1亿美元&#xff0c;未来几年内的年复合增长率&#xff08;CAGR&#xff09;将达到7.9%。 如下图所示&#xff0c;展示了全球…