Vue快速入门以及基础标签使用

news2024/11/17 0:33:23

目录

    • 开始示例
      • el挂载点
      • data数据对象
    • vue基本标签
      • v-text
      • v-html
      • v-on
      • 计数器示例实现
      • v-show
      • v-if
      • v-bind
      • 图片切换示例
      • v-for
      • v-on补充
      • v-model
    • axios网络请求
      • axios基本使用
      • vue中使用axios

开始示例

1.首先在html页面中引入vue的生产环境，在body标签中粘上下面代码

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

在这里插入图片描述

2.来搞一个入门实例，具体如下。

在这里插入图片描述

el挂载点

大括号包含的部分会被data中同名的数据给替换
在这里插入图片描述

也可以使用class选择器，不过建议使用id选择器，因为id在实际开发中是唯一的
在这里插入图片描述

Vue会管理el选项命中的元素及其内部的后代元素

其实不用div标签可以匹配外，用p标签也可以使用的。前提是 id 和 el 匹配的上。但是只能支持双标签，比如p, h1, head等（不支持html和body标签）。

data数据对象

在这里插入图片描述

data中写对象如下：
在这里插入图片描述
在这里插入图片描述
展示对象类型的数据，可以直接用定义的对象名.属性的方式。
比如
{{ student.name }} {{ student.age }}
这样就可以直接调用对象的属性并展示了。

对于data中声明的数组，使用方式如下所示：

在这里插入图片描述

使用方式：
{{ 数组名[0] }} 这是直接展示数组中的第一个元素。

vue基本标签

v-text

设置标签的文本值(textContent)

<h2 v-text="message">hello, world!</h2>

它会把好h2中的内容给替成text的message的内容
示例如下：
在这里插入图片描述

也可以使用插值表达式的方式，来实现拼接字符串。

在这里插入图片描述

结果如下

在这里插入图片描述

也可以使用下面这种方式来进行插值表达式

<body>
    <div id="app">
        <h2 v-text="'hello ' + message"></h2>
        <h2>{{"hello " + message}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Chain"
            }
        })
    </script>

在这里插入图片描述
结果如下所示
在这里插入图片描述

  • v-text指令的作用是:设置标签的内容(textContent)
  • 默认写法会替换全部内容,使用差值表达式{份}可以替换指定内容

v-html

主要作用是把标签中的html代码给渲染出来，而不是纯文本

<body>
    <div id="app">
        <p v-html="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{      
                content:"<a href='https://www.baidu.com/'>屌毛是你</a>"
            }
        })
    </script>
</body>

结果如下：渲染成链接，可以点击跳转了

在这里插入图片描述

v-html指令的作用是:设置元素的innerHTML内容中有html结构会被解析为标签
v-text指令无论内容是什么,只会解析为文本

v-on

为元素绑定事件
在这里插入图片描述

示例代码如下所示：

<body>
    <div id="app">
        <input type="button" value="单击事件" v-on:click="doIt">
        <input type="button" value="单击事件" @click="doIt">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt:function(){
                    alert("are you 叼毛");
                }
            }
        })
    </script>
</body>

演示结果如下：
在这里插入图片描述
但是一般使用不会这么简单，而是配合各种函数和各种关键字，如下

<body>
    <div id="app">

        <input type="button" value="单击事件" v-on:click="doIt">
        <input type="button" value="单击事件" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">

        <h2 @click="changeFood">{{ food }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Chain",
                content:"<a href='https://www.baidu.com/'>屌毛是你</a>",
                food:"石头拌稀饭"
            },
            methods:{
                doIt:function(){
                    alert("are you 叼毛");
                },
                changeFood:function(){
                    this.food += "炒鸡好吃！"
                }
            }
        })
    </script>
</body>

在这里插入图片描述
在这里插入图片描述

  • v-on指令的作用是:为元素绑定事件
  • 事件名不需要写on
  • 指令可以简写为@
  • 绑定的方法定义在methods属性中

计数器示例实现

大概实现一个这种效果

在这里插入图片描述
实现步骤逻辑：

1.data中定义数据:比如num
2.methods中添加两个方法:比如add(递增),sub(递减)
3.使用v-text将num设置给span标签
4.使用v-on将add,sub分别绑定给+,-按钮
5.累加的逻辑:小于10累加,否则提示
6.递减的逻辑:大于0递减,否则提示

<body>
    <div id="app">
        <button @click="sub">-</button>
        <span>{{ num }}</span>
        <button @click="add">+</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    if(this.num < 10){
                        this.num++;
                    }else{
                        alert("最大为10，叼毛别点了");
                    }                    
                },
                sub:function(){
                    if(this.num > 0){
                        this.num--;
                    }else{
                        alert("不能为负");
                    }
                }
            }
        })
    </script>
</body>

结果如下：

在这里插入图片描述

注意事项如下所示

  • 创建Vue示例时:el(挂载点),data(数据),methods(方法)
  • v-on指令的作用是绑定事件,简写为@
  • 方法中通过this,关键字获取data中的数据
  • v-text指令的作用是:设置元素的文本值,简写为{{}}

v-show

在这里插入图片描述

实现代码如下：（懂得都懂啊，可以根据年龄来显示或隐藏某些东西）

<body>
    <div id="app">
        <input type="button" value="切换限制级别" @click="man">
        <input type="button" value="切换青少年级别" @click="boy">
        <img v-show="age >= 18" src="https://img1.mydrivers.com/img/20230305/e103b86e-b368-45bb-93aa-8e4d51964fe2.png">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                age:16
            },
            methods:{
                man:function(){
                    this.age = 18;
                },
                boy:function(){
                    this.age = 16;
                }
            }
        })
    </script>
</body>

效果如下图

在这里插入图片描述

回归正题，它这个v-show标签本质上还是切换了style的display属性，给切换成none了

注意事项

  • v-show指令的作用是:根据真假切换元素的显示状态
  • 原理是修改元素的display,实现显示隐藏
  • 指令后面的内容,最终都会解析为布尔值
  • 值为true元素显示,值为false元素隐藏
  • 数据改变之后,对应元素的显示状态会同步更新

v-if

v-if和v-show其实差不多，都是来控制元素显示或隐藏的。语法如下所示

在这里插入图片描述

演示代码

<body>
    <div id="app">
        <p v-if="isShow">叼毛</p>
        <input type="button" value="切换显示" @click="change">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false
            },
            methods:{
                change:function(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

演示结果
在这里插入图片描述

v-show和v-if二者的区别在于，切换时，v-if在修饰不显示时，会直接将标签移除，而v-show只是改变了style标签的状态。
下图可以清楚的看出切换时两种标签修饰的变化
在这里插入图片描述

频繁切换的元素用v-show，因为v-if会修改dom树，而v-show只是操作样式，所以v-show性能更好，但是v-show的隐藏元素还是会展示，会有不安全的问题。

  • v-if指令的作用是:根据表达式的真假切换元素的显示状态
  • 本质是通过操纵dom元素来切换显示状态
  • 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
  • 频繁的切换v-show,反之使用v-if,前者的切换消耗小

v-bind

语法：v-bind:属性名=表达式

在这里插入图片描述

这个v-bind也是可以省略的。如下所示，两种方式都是可以的

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <img :src="imgSrc" alt="" :title="imgtitle+'!!!'">      
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"https://img0.baidu.com/it/u=340747937,2651100772&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
                imgtitle:"可可奈奈"
            }
        })
    </script>
</body>

在这里插入图片描述

这个title标签是鼠标悬停是显示文本的，设置后第二张图悬停会显示title文本，第一张没显示。由上面那段代码也可以看出来，这个title也是可以字符串拼接的。
:title="imgtitle+'!!!'"

<img :src="imgSrc" alt="" :title="imgtitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
这个标签的class，也就是active是否生效取决于isActive是true还是false

在这里插入图片描述

图片切换示例

这个示例把前面学的都综合了起来，是一个不错的demo，实现效果，点击左边箭头，切换到前一张图；点击右边箭头，切换到后一张图，在第一张图上隐藏左箭头，在最后一张图上隐藏右箭头。
在这里插入图片描述

它的实现步骤如下

在这里插入图片描述

解释：写JavaScript：void（任意数字）可以让超链接不跳转

<body>
  <div id="mask">
    <div class="center">
      <h2 class="title">
        <img src="./images/logo.png" alt="">
      </h2>
      <!-- 图片 -->
      <img :src="imgArr[index]" alt="" />
      <!-- 左箭头 -->
      <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
        <img src="./images/prev.png" alt="" />
      </a>
      <!-- 右箭头 -->
      <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
        <img src="./images/next.png" alt="" />
      </a>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: "#mask",
      data: {
        imgArr: [
          /* 添加图片路径 */
          "./images/00.jpg",
          "./images/01.jpg",
          "./images/02.jpg",
          "./images/03.jpg",
          "./images/04.jpg",
          "./images/05.jpg",
          "./images/06.jpg",
          "./images/07.jpg",
          "./images/08.jpg",
          "./images/09.jpg",
          "./images/10.jpg",
        ],
        /* 数组索引 */
        index: 0
      },
      methods: {
        prev:function(){
          this.index--;
        },
        next:function(){
          this.index++;
        }
      },
    })
  </script>
</body>

v-for

用于遍历数组的，来自动生成列表结构，可以理解为复制粘贴，自动遍历数组，并把元素数据依次绑定展示

如下图分析

在这里插入图片描述

注：上面的 :title是使用的v-bind，给它设置一个tiele属性，只不过可以省略成:title；然后{{index}}就是取数组下标的意思

实际使用示例：
先上代码

<body>
    <div id="app">
        <ul>
            <li v-for="item in arr">
                人称：{{item}}
            </li>
            
        </ul>
        <h2 v-for="i in food">
            {{i.name}}
        </h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["你","我","他"],
                food:[
                    {name:"石头拌稀饭"},
                    {name:"黄沙炒米饭"}
                ]
            }
        })
    </script>
</body>

演示结果如下图：
在这里插入图片描述

其实通过上面那个示例，应该会明白，v-for的使用了，也就是遍历数据元素，以同一种格式呈现出来

我们在对其加上两个点击方法，使用v-on指令来绑定
在这里插入图片描述
效果如下图：
在这里插入图片描述

原理很简单：加菜方法就是向数组中新增加元素，然后由于v-for标签，都给遍历出来了
而减餐方法同理，使用shift方法，每次移除数组最左侧元素，就无法遍历到该元素，自然就不显示了

v-for可以十分方便的帮助我们生成一个列表。

在这里插入图片描述

v-on补充

传递自定义参数，事件修饰符

使用示例：

在这里插入图片描述

验证结果如下：

在这里插入图片描述

另一个示例，根据键盘的回车键来触发弹窗
在这里插入图片描述

在这里插入图片描述

v-model

获取和设置表单元素的值（双向数据绑定）

在这里插入图片描述

演示示例

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

axios网络请求

axios基本使用

使用axios时需要联网并且引入官网提供的 axios 在线地址
请求库的基本语法，它其实是对Ajax的一个封装

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

分为两个，响应成功执行的回调函数和响应失败执行的回调函数，具体如下图

在这里插入图片描述

post请求中，第一个参数是url的地址，第二个参数是post的数据

下面以这两个接口文档来做示范
在这里插入图片描述

示例代码（没用vue,用的原生的js）

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
        document.querySelector(".get").onclick = function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
            .then(function (response) {
                console.log(response);
              },function(err){
                  console.log(err);
              })
        }
        /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
         */
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
            .then(function(response){
                console.log(response);
                console.log(this.skill);
            },function (err) {
                console.log(err);
              })
          }

    </script>
</body>

vue中使用axios

网络数据的核心就是data中一部分数据是通过网络获取到的，所以是在方法中发送网络请求，在响应成功后，把服务器返回的数据绑定给对应的data值就行了

踩坑，ajax是异步的，this在ajax函数内指向并不是vue实例了，不能通过this拿到vue中的实例，所以不会在在axios函数中使用this

this是会变的，所以解决方法就是把它先存起来，定义一个that，var that = this;

<body>
    <div id="app">
        <input type="button" value="获取笑话" @>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            
            methods:{
                getJoke:function(){
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then
                    (function(response){
                        console.log(response.data);
                        that.joke = response.data;
                    },function(err){ })
                }
            }
        })
    </script>
</body>

在这里插入图片描述

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

wordpress搭建博客教程总结_01主题配置

wordpress搭建博客教程总结_01主题配置

目前搭建效果站 薪火相传 (yuetan.wang) 日间 月间 爱心 页面、 爱心冲击波! (yuetan.wang) 好看的主题分享 个人博客主题分享(WordPress) – Echo小窝 博客主要效果 1. Argon
阅读更多...
Meta 推出 SeamlessM4T，无缝翻译和转录语音和文本

Meta 推出 SeamlessM4T，无缝翻译和转录语音和文本

SeamlessM4T允许跨语音和文本单元进行评估的 BLASER 2.0 进行测试时&#xff0c;与目前最先进的语音到文本任务模型相比&#xff0c;SeamlessM4T 模型在语音到文本任务中对抗背景噪声和说话者变化的表现更好 Meta 宣布推出 SeamlessM4T&#xff0c;一种基础的多语言和多任务模…
阅读更多...
网络编程——套接字和字节序

网络编程——套接字和字节序

目录 一、BSD套接字接口1.1 套接字类型1.2 套接字的位置 二、字节序2.1 大小端2.2 大小端判断2.3 主机字节序和网络字节序2.4 字节序转换函数 一、BSD套接字接口 BSD套接字接口是BSD的进程间通信的方式&#xff0c;它不仅支持各种形式的网络应用而且它还是一种进程间通信的机制…
阅读更多...
如何撰写具有传播力的品牌软文？

如何撰写具有传播力的品牌软文？

企业为了能将自己的品牌宣传推广出去&#xff0c;不论是在品牌初创还是成熟阶段都会撰写很多的新闻软文稿件发布在各大媒体平台上&#xff0c;为的就是能起到持续宣传和影响的效果&#xff01; 软文不但要求短小精悍&#xff0c;更注重内容的精准。不管是什么类型的文章&#…
阅读更多...
[当前就业]2023年8月25日-计算机视觉就业现状分析

[当前就业]2023年8月25日-计算机视觉就业现状分析

计算机视觉就业现状分析 前言&#xff1a;超越YOLO&#xff1a;计算机视觉市场蓬勃发展 如今&#xff0c;YOLO&#xff08;You Only Look Once&#xff09;新版本的发布周期很快&#xff0c;每次迭代的性能都优于其前身。每 3 到 4 个月就会推出一个升级版 YOLO 变体&#xf…
阅读更多...
计网第四章（网络层）（三）

计网第四章（网络层）（三）

IPV4地址的应用规划&#xff1a; 定长的子网掩码FLSM&#xff1a; 使用同一个子网掩码划分子网&#xff0c;每个子网所分配的IP地址数量相同&#xff0c;造成IP地址的浪费。 变长的子网掩码VLSM&#xff1a; 使用不同的子网掩码划分子网&#xff0c;每个子网所分配的IP地址…
阅读更多...
ensp-Ipv6配置配置

ensp-Ipv6配置配置

ensp-Ipv6配置配置 &#x1f4ce;ipv6.zip&#x1f4ce;Ipv6 网络.docx
阅读更多...
n-皇后问题（DFS）

n-皇后问题（DFS）

n−皇后问题是指将 n 个皇后放在 nn 的国际象棋棋盘上&#xff0c;使得皇后不能相互攻击到&#xff0c;即任意两个皇后都不能处于同一行、同一列或同一斜线上。 现在给定整数 n&#xff0c;请你输出所有的满足条件的棋子摆法。 输入格式 共一行&#xff0c;包含整数 n。 输出…
阅读更多...
神经网络架构：最新进展和未来挑战

神经网络架构：最新进展和未来挑战

文章目录 1. 神经网络架构的演化历程1.1 感知机&#xff08;Perceptron&#xff09;1.2 多层感知机&#xff08;Multi-layer Perceptron&#xff0c;MLP&#xff09;1.3 卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;1.4 循环神经网络&…
阅读更多...
pwn学习（1）攻防世界-hello_pwn

pwn学习（1）攻防世界-hello_pwn

下载链接&#xff1a; https://adworld.xctf.org.cn/challenges/list 主函数分析&#xff1a; 查看读入数据和比较数据的位置&#xff0c;会发现问题&#xff0c;他们是挨着的&#xff0c;且相差4个字节&#xff0c; 根据main()函数可以知道&#xff0c;dword_60106C是‘nua…
阅读更多...
win10系统marven的安装与配置

win10系统marven的安装与配置

一、安装jdk-8u191-windows-x64.exe 新建系统环境变量JAVA_HOME并配置Java搜索路径位置 二、下载apache-maven-3.9.4解压到C盘 https://dlcdn.apache.org/maven/maven-3/3.9.4/binaries/apache-maven-3.9.4-bin.zip 三、新建环境变量MARVEN_HOME和添加搜索路径 四、查看版本…
阅读更多...
十六、软连接？

十六、软连接？

1、软连接&#xff1a; 在Ubuntu中&#xff0c;可以使用“ln”命令来创建软链接。软链接&#xff08;symbolic link&#xff09;也叫软连接&#xff0c;类似于windows中的快捷方式&#xff0c;它是一个指向另一个文件或目录的符号链接。 2、基础语法&#xff1a; ln -s 被软…
阅读更多...
【IMX6ULL驱动开发学习】11.Linux之SPI驱动

【IMX6ULL驱动开发学习】11.Linux之SPI驱动

参考&#xff1a;驱动程序开发&#xff1a;SPI设备驱动_spi驱动_邓家文007的博客-CSDN博客 目录 一、SPI驱动简介 1.1 SPI架构概述 1.2 SPI适配器&#xff08;控制器&#xff09;数据结构 1.2 SPI设备数据结构 1.3 SIP设备驱动 1.4 接口函数 二、SPI驱动模板 一、SPI驱动…
阅读更多...
cortex-A7核PWM实验--STM32MP157

cortex-A7核PWM实验--STM32MP157

实验目的&#xff1a;驱动风扇&#xff0c;蜂鸣器&#xff0c;马达进行工作 目录 一&#xff0c;PWM相关概念 有源蜂鸣器和无源蜂鸣器 二&#xff0c;分析电路图&#xff0c;框图 三&#xff0c;分析RCC章节 1&#xff0c;确定总线连接 2&#xff0c;根据总线内容确定基…
阅读更多...
经管博士科研基础【4】排队论M/M/1公式

经管博士科研基础【4】排队论M/M/1公式

公式来源于B站睿智小课堂&#xff1a; 上面的公式要学会推导&#xff0c;具体推导过程也要学习一下【可见B站睿智小课堂】 具体推导思路是&#xff1a; 【1】先求解得到系统的队长L&#xff1a;这需要用到马尔科夫排队过程的相关知识&#xff0c;也就是说仅仅在排队过程是马尔…
阅读更多...
docker使用harbor进行镜像仓库管理演示以及部分报错解决

docker使用harbor进行镜像仓库管理演示以及部分报错解决

目录 一.安装harbor和docker-compose 1.下载 2.将该文件修改为这样&#xff0c;修改好自己的hostname和port&#xff0c;后文的用户和密码可以不改也可以改&#xff0c;用于登录 3.安装 二.修改daemon.json文件和/etc/hosts文件 三.使用powershell作windows端域名映射 四…
阅读更多...
基于JAYA算法优化的BP神经网络（预测应用） - 附代码

基于JAYA算法优化的BP神经网络（预测应用） - 附代码

基于JAYA算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于JAYA算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.JAYA优化BP神经网络2.1 BP神经网络参数设置2.2 JAYA算法应用 4.测试结果&#xff1a;5.Matlab代码 摘要…
阅读更多...
【考研数学】线性代数第四章 —— 线性方程组（1，基本概念 | 基本定理 | 解的结构）

【考研数学】线性代数第四章 —— 线性方程组（1，基本概念 | 基本定理 | 解的结构）

文章目录 引言一、线性方程组的基本概念与表达形式二、线性方程组解的基本定理三、线性方程组解的结构写在最后 引言 继向量的学习后&#xff0c;一鼓作气&#xff0c;把线性方程组也解决了去。O.O 一、线性方程组的基本概念与表达形式 方程组 称为 n n n 元齐次线性方程组…
阅读更多...
从0到1学会Git(第一部分):Git的下载和初始化配置

从0到1学会Git(第一部分):Git的下载和初始化配置

1.Git是什么: 首先我们看一下百度百科的介绍:Git&#xff08;读音为/gɪt/&#xff09;是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。 也是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。 …
阅读更多...
4.9 已建立连接的TCP，收到SYN会发生什么？

4.9 已建立连接的TCP，收到SYN会发生什么？

1. 客户端的 SYN 报文里的端口号与历史连接不相同 此时服务端会认为是新的连接要建立&#xff0c;于是就会通过三次握手来建立新的连接。 旧连接里处于 Established 状态的服务端最后会怎么样呢&#xff1f; 服务端给客户端发消息了&#xff1a;客户端连接已被关闭&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023