Vue2(组件开发)

目录

      • 前言
      • 一,组件的使用
      • 二,插槽slot
      • 三,refs和parent
      • 四,父子组件间的通信
        • 4.1,父传子 :父传子的时候,通过属性传递
        • 4.2,父组件监听自定义事件
      • 五,非父子组件的通信
      • 六,混入(mixin)
      • 最后

前言

上一章博客我们讲解了Vue生命周期,列表过滤,计算属性和监听器
这一章我们来讲Vue组件开发

一,组件的使用

创建组件两种方式

var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 
}//局部声明Vue.component('组件名',组件对象);//全局注册 等于注册加声明了

组件的分类

  • 通用组件(例如表单、弹窗、布局类等) (多个项目都可以复用)
  • 业务组件(抽奖、机器分类)(本项目中复用)
  • 页面组件(单页面开发程序的每个页面的都是一个组件、只完成功能、不复用)

组件开发三部曲:声明、注册、使用

注意:子组件的命名,如果有驼峰命名,在使用子组件标签时用“-”隔开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,{{name}}<hello></hello><saybyebye></saybyebye></div><template id="myhello"><div>hello,{{name}}</div></template>
</body>
<script src="../js/vue2.7.js"></script>
<script>// 注册了一个全局组件,名字叫helloVue.component('hello',{template:`#myhello`,data(){return{name:'我是hello'}}})// 定义一个局部组件var saybyebye={template:`<div>你好</div>`}var app = new Vue({el:'#app',data(){return{name:"张三",}},// 注册局部组件components:{saybyebye}})</script>
</html>

在这里插入图片描述

二,插槽slot

slot就是在声明子组件时给DOM留下的坑位,以便于父组件在使用子组件的时候可以在坑位里动态的插入自己的内容。

​ 并且,坑位是可以命名的,也就是说,子组件在声明的时候命名坑位,方便父组件在指定的坑位中插入内容

​ slot是动态的DOM

  • 插槽的使用:
    • 步骤有两步:a.子组件上留坑。b.父组件使用子组件的时候,给坑里赋值.
    • 要有父子组件作为前提。
    • 目的是让子组件成为动态的组件。

匿名插槽
- 匿名插槽就是在声明的时候没有声明name,会把全部内容都显

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,{{name}}<hello></hello><saybyebye><div>我是插槽的内容</div></saybyebye></div><template id="myhello"><div>hello,{{name}}</div></template>
</body>
<script src="../js/vue2.7.js"></script>
<script>// 注册了一个全局组件,名字叫helloVue.component('hello',{template:`#myhello`,data(){return{name:'我是hello'}}})// 定义一个局部组件var saybyebye={template:`<div><div>你好</div>// 插槽内容<slot></slot>    </div>`}var app = new Vue({el:'#app',data(){return{name:"张三",}},// 注册局部组件components:{saybyebye}})</script>
</html>

在这里插入图片描述
具名插槽

  • 具名插槽会在声明时,指定name。会在子组件中有选择的进行展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,{{name}}<hello></hello><saybyebye><div slot="niu1">我是插槽的内容</div><template #niu2><div>你好niu2</div></template><template v-slot:niu3><div>你好niu3</div></template></saybyebye></div><template id="myhello"><div>hello,{{name}}</div></template>
</body>
<script src="../js/vue2.7.js"></script>
<script>// 注册了一个全局组件,名字叫helloVue.component('hello',{template:`#myhello`,data(){return{name:'我是hello'}}})// 定义一个局部组件var saybyebye={template:`<div><slot name="niu1"></slot>   <div>你好niu1</div>// 插槽内容<slot name="niu2"></slot>    <slot name="niu3"></slot>    </div>`}var app = new Vue({el:'#app',data(){return{name:"张三",}},// 注册局部组件components:{saybyebye}})</script>
</html>

在这里插入图片描述

三,refs和parent

这两个属性的作用是获取到子组件实例数组和父组件实例。
有了实例,就可以很方便的操作组件的属性和方法。

  • refs
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{name}}<button @click="ouda">打一顿</button><Myheader ref="dawa"></Myheader></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div>子组件{{xingming}}--{{Hp}}</div>`,data(){return{xingming:'林宇豪',Hp:100,}},}var app = new Vue({el:'#app',data(){return{name:'小豪',}},methods:{ouda(){console.log("孽子,打一顿");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10},},components:{Myheader}})</script>
</html>

在这里插入图片描述

  • parent

$refs的使用需要,在子元素上通过ref属性声明自己的引用名称

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,我是{{name}}<Myheader ref="dawa"></Myheader><Myheadererwa ref="erwa" ></Myheadererwa></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div></div>`,}var Myheadererwa = {template:`<div><button @click="jiao">叫爷爷</button>  </div>`,data(){return{ }},methods:{jiao(){this.$parent.name="爷爷"},  },}var app = new Vue({el:'#app',data(){return{name:'小豪',}},components:{Myheader,Myheadererwa}})</script>
</html>

在这里插入图片描述

四,父子组件间的通信

4.1,父传子 :父传子的时候,通过属性传递

  • 在子组件标签中,自定义属性和值
<Myheader ref="header" age="18" :sex="sex"></Myheader>
  • 在子组件内部,通过props属性,获取所有的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{name}}<button @click="ouda">打一顿</button><button @click="anwei">安慰</button><button @click="xiaodao">看看导哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div>子组件{{xingming}}--{{Hp}}</div>`,data(){return{xingming:'林宇豪',Hp:100,}},}var Myheadererwa = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="jiao">叫爷爷</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王导',Hp:0,}},methods:{see(){console.log("再看岛国动作片");},jiao(){this.$parent.name="爷爷"},},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭头函数,可以不改变this的指向,仍然和外部的this保持一致,指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{name:'小豪',nengli2:"千里眼,顺风耳"}},methods:{ouda(){console.log("孽子,打一顿");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"// }},anwei(){console.log("抽了一巴掌,安慰了一下");this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10},xiaodao(){this.$refs.erwa.see()            },},components:{Myheader,Myheadererwa}})</script>
</html>

在这里插入图片描述

4.2,父组件监听自定义事件

      <Myheadererwa -parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{changname}}<button @click="ouda">打一顿</button><button @click="anwei">安慰</button><button @click="xiaodao">看看导哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="chuanzhi">发送一条信息</button>    </div>`,data(){return{xingming:'林宇豪',Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit('jieshou','你好child01,我是child02');}}}var Myheadererwa = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="jiao">叫爷爷</button>  <button @click="happyNewYear">给爷爷拜年</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王导',Hp:0,}},methods:{see(){console.log("再看岛国动作片");},jiao(){this.$parent.name="爷爷"},happyNewYear(){// 触发自定义事件this.$emit('to-parent-event',this.xingming)}},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭头函数,可以不改变this的指向,仍然和外部的this保持一致,指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{changname:'小豪',nengli2:"千里眼,顺风耳"}},methods:{ouda(){console.log("孽子,打一顿");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"// }},anwei(){console.log("抽了一巴掌,安慰了一下");this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10},xiaodao(){this.$refs.erwa.see()            },bainian(xingming){console.log(xingming+"给您拜年了 ");}},components:{Myheader,Myheadererwa}})</script>
</html>

在这里插入图片描述

五,非父子组件的通信

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{changname}}<button @click="ouda">打一顿</button><button @click="anwei">安慰</button><button @click="xiaodao">看看导哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="chuanzhi">发送一条信息</button>    </div>`,data(){return{xingming:'林宇豪',Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit('jieshou','你好child01,我是child02');}}}var Myheadererwa = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="jiao">叫爷爷</button>  <button @click="happyNewYear">给爷爷拜年</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王导',Hp:0,}},methods:{see(){console.log("再看岛国动作片");},jiao(){this.$parent.name="爷爷"},happyNewYear(){// 触发自定义事件this.$emit('to-parent-event',this.xingming)}},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭头函数,可以不改变this的指向,仍然和外部的this保持一致,指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{changname:'小豪',nengli2:"千里眼,顺风耳"}},methods:{ouda(){console.log("孽子,打一顿");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"// }},anwei(){console.log("抽了一巴掌,安慰了一下");this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10},xiaodao(){this.$refs.erwa.see()            },bainian(xingming){console.log(xingming+"给您拜年了 ");}},components:{Myheader,Myheadererwa}})</script>
</html>

在这里插入图片描述

  • 创建一个公共组件
Vue.prototype.$middleBus = new Vue();
  • 发送方,在公共组件上,触发一个事件
this.$middleBus.$emit('sendMsg','你好child01,我是child02');
  • 接收方,监听公共组件上的这个事件,并接受数据
this.$middleBus.$on('sendMsg',val=>{// 使用箭头函数,可以不改变this的指向,仍然和外部的this保持一致,指向child01this.msg = val;
});

六,混入(mixin)

  • 定义

    • 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
  • 写法

    • 局部
      • 定义个混入对象

var myMixin = {data() {return {mixinname: '混入姓名',};},mounted() {console.log('我是混入的组件');},
};
  • 项目
mixins: [myMixin],
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{changname}}<button @click="ouda">打一顿</button><button @click="anwei">安慰</button><button @click="xiaodao">看看导哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var commonMixin = {data(){return{mixinName:'葫芦'}},mounted(){console.log( "混入对象" +this.mixinName);}}var Myheader = {template:`<div>子组件{{xingming}}--{{Hp}}---{{mixinName}}<button @click="chuanzhi">发送一条信息</button>    </div>`,data(){return{xingming:'林宇豪',Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit('jieshou','你好child01,我是child02');}},mixins:[commonMixin]}var Myheadererwa = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="jiao">叫爷爷</button>  <button @click="happyNewYear">给爷爷拜年</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王导',Hp:0,}},methods:{see(){console.log("再看岛国动作片");},jiao(){this.$parent.name="爷爷"},happyNewYear(){// 触发自定义事件this.$emit('to-parent-event',this.xingming)}},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭头函数,可以不改变this的指向,仍然和外部的this保持一致,指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{changname:'小豪',nengli2:"千里眼,顺风耳"}},methods:{ouda(){console.log("孽子,打一顿");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"// }},anwei(){console.log("抽了一巴掌,安慰了一下");this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10},xiaodao(){this.$refs.erwa.see()            },bainian(xingming){console.log(xingming+"给您拜年了 ");}},components:{Myheader,Myheadererwa}})</script>
</html>

在这里插入图片描述

全局混入

  • 定义个混入对象
  • 引入使用
Vue.mixin(myMixin);

注意

  • 当组件和混入对象含有同名选项时,这些选项将进行“合并”
  • 在选项发生冲突时以组件数据优先
  • 请谨慎使用全局混入,因为会使实例以及每个组件受影响

最后

祝大家: 愿每个人都能遵循自己的时钟,做不后悔的选择。

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

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

相关文章

网络安全攻防实战:探索互联网发展史

大家好&#xff0c;我是沐尘而生。 互联网发展史&#xff1a;数字世界的壮阔画卷 从早期的ARPANET到今天的万物互联&#xff0c;互联网经历了漫长的发展过程。然而&#xff0c;随着技术的进步&#xff0c;网络安全问题也随之而来。我们不仅要探索互联网的壮阔历程&#xff0c;…

浅谈 EMP-SSL + 代码解读:自监督对比学习的一种极简主义风

论文链接&#xff1a;https://arxiv.org/pdf/2304.03977.pdf 代码&#xff1a;https://github.com/tsb0601/EMP-SSL 其他学习链接&#xff1a;突破自监督学习效率极限&#xff01;马毅、LeCun联合发布EMP-SSL&#xff1a;无需花哨trick&#xff0c;30个epoch即可实现SOTA 主要…

【需求输出】流程图输出

文章目录 1、什么是流程图2、绘制流程图的工具和基本要素3、流程图的分类和应用场景4、如何根据具体场景输出流程图 1、什么是流程图 2、绘制流程图的工具和基本要素 3、流程图的分类和应用场景 4、如何根据具体场景输出流程图

如何能够写出带货的爆文?

网络推广这个领域&#xff0c;公司众多价格差别很大&#xff0c;就拿软文文案这块来讲&#xff0c;有人报价几十块&#xff0c;也有人报价几千块。作为企业的营销负责人往往会被价格吸引&#xff0c;比价择优选用&#xff0c;结果写出来的文案不满意&#xff0c;修改也无从入手…

LVS简介及LVS-DR搭建

目录 一. LVS简介&#xff1a; 1.简介 2. LVS工作模式&#xff1a; 3. LVS调度算法&#xff1a; 4. LVS-DR集群介绍&#xff1a; 二.LVS-DR搭建 1.RS配置 1&#xff09;两台RS&#xff0c;需要下载好httpd软件并准备好配置文件 2&#xff09;添加虚拟IP&#xff08;vip&…

openeuler服务器 ls 和ll 命令报错 command not found...

在openeuler服务器执行 ls 和ll 命令报错 command not found... 大概是系统环境变量导致的问题。 我在安装redis是否没有安装成功后就出现了这样的情况。编辑profile文件没有写正确&#xff0c;导致在命令行下ls 和 ll 等命令不能够识别。 重新设置一下环境变量。 export PAT…

excel快速选择数据、选择性粘贴、冻结单元格

一、如何快速选择数据 在excel中&#xff0c;希望选择全部数据&#xff0c;通常使用鼠标选择数据然后往下拉&#xff0c;当数据很多时&#xff0c;也可单击单元格使用ctrl A选中全部数据&#xff0c;此外&#xff0c;具体介绍另一种方法。 操作&#xff1a;ctrl shift 方向…

【第三阶段】kotlin语言空合并操作符

1.空操作符&#xff1f;&#xff1a; xxx?:“如果是null执行” 如果xxx是null&#xff0c;就执行?:后面的逻辑&#xff0c;如果不是null就执行&#xff1f;&#xff1a;前面的逻辑&#xff0c;后面的不在执行 fun main() {var name:String?"kotlin" namenullvar …

MAC环境,在IDEA执行报错java: -source 1.5 中不支持 diamond 运算符

Error:(41, 51) java: -source 1.5 中不支持 diamond 运算符 (请使用 -source 7 或更高版本以启用 diamond 运算符) 进入设置 修改java版本 pom文件中加入 <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin&l…

docker发展历史

docker 一、docker发展历史很久以前2013年2014年2015年2016年2017年2018年2019年及未来 二、 docker概述定义&#xff1a;docker底层运行原理:docker简述核心概念容器特点Docker与虚拟机的区别: 三、容器在内核中支持两种重要技术四、namespace的六项隔离五、虚拟化产品有哪些1…

ChatGPT等人工智能编写文章的内容今后将成为常态

BuzzFeed股价上涨200%可能标志着“转向人工智能”媒体趋势的开始。 周四&#xff0c;一份内部备忘录被华尔街日报透露BuzzFeed正计划使用ChatGPT聊天机器人-风格文本合成技术来自OpenAI&#xff0c;用于创建个性化盘问和将来可能的其他内容。消息传出后&#xff0c;BuzzFeed的…

QGIS3.28的二次开发九:添加矢量要素

对矢量要素的编辑是 GIS 软件很重要的功能点之一&#xff0c;也是最难实现的功能点之一。编辑矢量要素涉及到很多方面的考虑&#xff0c;包括且不限于矢量要素的几何类型&#xff0c;拓扑关系&#xff0c;构成要素的节点的增删改&#xff0c;编辑会话 (session) 的启动、回溯和…

MYSQL 作业三

创建一个student表格&#xff1a; create table student( id int(10) not null unique primary key, name varchar(20) not null, sex varchar(4), birth year, department varchar(20), address varchar(50) ); 创建一个score表格 create table score( id int(10) n…

IPv4分组

4.3.1 IPv4分组 IP协议定义数据传送的基本单元——IP分组及其确切的数据格式 1. IPv4分组的格式 IPv4分组由首部和数据部分&#xff08;TCP、UDP段&#xff09;组成&#xff0c;其中首部分为固定部分&#xff08;20字节&#xff09;和可选字段&#xff08;长度可变&#xff0…

使用MAT分析OOM问题

OOM和内存泄漏在我们的工作中&#xff0c;算是相对比较容易出现的问题&#xff0c;一旦出现了这个问题&#xff0c;我们就需要对堆进行分析。 一般情况下&#xff0c;我们生产应用都会设置这样的JVM参数&#xff0c;以便在出现OOM时&#xff0c;可以dump出堆内存文件&#xff…

Monge矩阵

Monge矩阵 对一个m*n的实数矩阵A&#xff0c;如果对所有i&#xff0c;j&#xff0c;k和l&#xff0c;1≤ i<k ≤ m和1≤ j<l ≤ n&#xff0c;有 A[i,j]A[k,l] ≤ A[i,l]A[k,j] 那么&#xff0c;此矩阵A为Monge矩阵。 换句话说&#xff0c;每当我们从矩阵中挑…

jQuery EasyUI datagrid 无记录时,增加“暂无数据“提示

1、在onLoadSuccess中添加如下代码&#xff1a; if (data.total 0) {var body $(this).data().datagrid.dc.body2;body.find(table tbody).append(<tr><td width" body.width() " style"height: 35px; text-align: center;"><h5>暂…

C++的IO流

目录 C语言的输入与输出 流是什么 CIO流 C标准IO流 C文件IO流 stringstream的简单介绍 在C语言中&#xff0c;如果想要将一个整形变量的数据转化为字符串格式&#xff0c;如何去做&#xff1f; 将数值类型数据格式化为字符串 字符串拼接 序列化和反序列化结构数据 注…

管理类联考——逻辑——综合推理——汇总篇——要点

一、真话假话题 #mermaid-svg-gmlWWCoVLQr21gdi {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-gmlWWCoVLQr21gdi .error-icon{fill:#552222;}#mermaid-svg-gmlWWCoVLQr21gdi .error-text{fill:#552222;stroke:#552…

00 - 环境配置

查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;GIT常用场景- 目录 文章目录 1. 环境说明2. 安装配置2.1 配置user信息2.2 config的三个作用域 3. 建git仓库3.1 把已有的项目代码纳入git管理3.2 新建的项目直接用git管理3.3 配置local的user和email3.4 优先级&…