2022-11.02

廖雪峰Git教程
Pro Git
讲解git rebase 的一篇文章添加链接描述
1.使用git reset 回退版本 添加链接描述
2.git push <远程主机名（一般是origin）> <本地分支名>:<远程分支名>

3.git 切换分支时，如果当前分支未add或未commit，那么切换了分支，其他分支也能看到这个内容。因为未add的内容不属于任何一个分支， 未commit的内容也不属于任何一个分支。 也就是说，对于所有分支而言， 工作区和暂存区是公共的。
要想在分支间切换， 又不想又上述影响， 怎么办呢？ git stash搞起。要注意，在当前分支git stash的内容， 在其他分支也可以git stash pop出来，为什么？ 因为：工作区和暂存区是公共的
4.切换分支：git switch -c feature1

黑马优购
vue中文网站
mdn

能否把person的内容合并到mange上面去 是可以的，执行git rebase mange person ,那么就是说 从他们的共同祖先那个地方可以分起来，就会将共同祖先之后的到后面的挪过来 ,注意要没有冲突。

然后下面切换到master分支，使用git merge person 就变成如图了

可以右击使用revert进行后退

也可以在其他分支拉去远端master分支的内容

注意点：

1. :disabled里面可以写方法

template的使用

这篇链接可以看一下
由于Vue官方在2.6版本以后改变了插槽的书写方式，所以，我们这里区分2.6版本之前的写法和2.6版本以后的写法：
之前的写法：

// 父组件
<template>
  <div id="app">
    <child>
      <template slot-scope="a">
        <p v-text="a.item"></p>
      </template>
    </child>
  </div>
</template>
 
<script>
import child from './child';
export default {
  name: 'app',
  components: {
    child
  }
}
</script>

//子组件
<template>
  <div>
    <ul>
      <li v-for="(item,index) in items" :key="index">{{item}}
        <slot :item='item'></slot>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      items:['Webkit','Gecko','Trident','Blink']
    }`在这里插入代码片`
  }
}
</script>

再来看2.6版本之后的写法，子组件的写法不用变，和原来一模一样，来看父组件的写法：
v-slot 还可以v-slot :header或者v-slot:title这种

// 父组件
<template>
  <div id="app">
    <child>
      <template v-slot="a">
        <p v-text="a.item"></p>
      </template>
    </child>
  </div>
</template>
 
<script>
import child from './child';
export default {
  name: 'app',
  components: {
    child
  }
}
</script>

如果绑定数据太多，而你不需要全都用到的时候可以使用es6的对象解构
这个地方测试过了，{row}和scope这两种写法都可以互相替代

  <el-table-column align="center" label="组织" prop="organizationName">
          <template #default="{row}">
            <span v-if="row.organizationName">{{row.organizationName}}</span>
            <span class="text-color12" v-else>------</span>
          </template>
        </el-table-column>

   <el-table-column>
          <template slot-scope="scope">
            <el-button v-if="!isEdit" icon="el-icon-edit" type="primary" @click="handleEdit">编辑</el-button>
            <div v-else>
              <el-button icon="el-icon-edit" type="primary" @click="handleSave" :disabled="disabledSave">保存</el-button>
            </div>
          </template>
        </el-table-column>

<el-button :disabled="!isIntoManager()" @click="changeSelectedType(1)" type="primary">进入单驾机管理</el-button>
 方法是：
   isIntoManager() {
      if (this.selectedItem?.status === 0) {
        if (
            ((identityManager.roleAuthority === 'EMPLOYEE' || identityManager.role === 'admin') && identityManager.rights.includes("EDIT"))
            || identityManager.roleAuthority === 'ADMIN'
        ) {
          return true
        }
        return false
      } else {
        return true
      }
    },

el-tag的学习使用

 <el-table-column align="center" prop="state" label="状态"
                :filters="[{ text: '审批中', value: 0 }, { text: '已通过', value: 1 }, { text: '已拒绝', value: 2 }, { text: '已撤销', value: -1 }]"
                :filter-method="filterTag" filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag :type="checkTag(scope.row).type" disable-transitions>{{ checkTag(scope.row).text }}</el-tag>
                </template>
            </el-table-column>



       checkTag(row) {
            let type, text;
            switch (row.status) {
                case 0:
                    type = "primary";
                    text = "审批中";
                    break;
                case 1:
                    type = "success";
                    text = "已通过";
                    break;
                case 2:
                    type = "danger";
                    text = "已拒绝";
                    break;
                case -1:
                    type = "info";
                    text = "已撤销";
                    break;
            }
            return {
                type: type,
                text: text,
            };
        },

文本溢出

单行文本溢出：

.text {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
}

多行文本溢出：
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;//行数
text-overflow: ellipsis;
overflow: hidden;
}

3. 渐变边框
   div {
   height: 150px;
   width: 150px;
   border: 10px solid;
   border-image: linear-gradient(red, yellow, blue)5;
   /*等同于
   border-image-source: linear-gradient(red,yellow,blue);
   border-image-slice: 5;图像边界向内偏移
   */
   }

background-attachment: fixed;
fixed设置图片不随着滚动，
scroll,背景图将会随着滚动而滚动。

let a=[1,2,3]; let b=a; 引用传递

a=[1,2,4];此时改变a的值，b不变，因为 a=[1,2,4];改变的是a引用本身，没有改变原先的数组对象[1,2,3]，而b被赋值的是[1,2,3]的地址，所以b的值不变。

如果是a.pop()这样的数组方法的话，b是改变的，因为a本身的数组对象[1,2,3]改变了。

获取map中数据

const arrs = { a: 1, c: 1, b: 2 };
console.log(Object.keys(arrs));// [‘a’, ‘c’, ‘b’]
console.log(Object.values(arrs))//[1, 1, 2]

数组去重

（1）let arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1];
console.log(Array.from(new Set(arr)))//先使用set去重，再将对象转为数组

（2）
function newArrFn (arr) {
let newArr = []
return arr.reduce((prev, next,index, arr) => {
// 如果包含，就返回原数据，不包含，就返回追加进去的
return newArr.includes(next) ? newArr : newArr.push(next)
}, 0)
}
console.log(newArrFn(arr));

（3）
function newArrFn (arr) {
return arr.filter((item, index) => {
//第一次出现的索引就是当前索引，那么该值就是第一次出现
return arr.indexOf(item) === index
})
}
console.log(newArrFn(arr));

（4） function newArrFn (arr) {
// 先使用set去重，然后借助扩展运算符转化为数组
return ([…new Set(arr)])
}

数组方法

filter

函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；函数的第一个参数 currentValue 也为必须，代表当前元素的值。

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let res = nums.filter((num) => {
  return num > 5;
});

console.log(res);  // [6, 7, 8, 9, 10]

@dragenter.native.stop.prevent
@dragover.native.stop.prevent
@drop.native.stop.prevent action=“”

forEach

对forEach的解释，以及forEach到底能不能改变数组的值
forEach和map的区别

map定义和方法

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。
map()方法按照原始数组元素顺序依次处理元素。
注意：
map不会对空数组进行检测
map不会改变原始数组

join

• join() 方法用于把数组中的所有元素放入一个字符串。
  元素是通过指定的分隔符进行分隔的。
• 语法：arrayObject.join(separator)
  参数：可选，指定要使用的分隔符。
  注：不给join()方法传入任何值，或者给它传入undefined，则使用逗号作为分隔符。
  

some

数组some方法作用: 判断数组中是否有满足条件的元素。
array.some( function ( item, index, arr) {} ,thisValue)
function : 必须,数组中的每个元素都会执行这个函数

    第一个参数:item,必须,当前元素的值

    第二个参数:index,可选,当前元素在数组中的索引值

    第三个参数:arr,当前元素属于的数组对象

thisValue : 可选,对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

  if(!this.undoneTaskList.some(t => t.id === task.id)) {
                this.undoneTaskList.push(task);
              }

every

判断数组中是否所有元素都满足条件

sort按照大小排序

数字排序（从小到大）：
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
fruits输出结果：
1,5,10,25,40,100

slice

添加链接描述
可以用来删除前两位或者后两位,返回一个新数组
slice() 方法可从已有的数组中返回选定的元素,不会改变原始数组。
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);

citrus 结果输出:
Orange,Lemon


使用负值从数组中读取元素

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(-3,-1); // 截取倒数第三个（包含）到倒数第一个（不包含）的两个元素Lemon,Apple
var myBest = fruits.slice(-3);  // 截取最后三个元素

splice

splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。
返回值
如果删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
从下标2开始，删除一个，添加"Lemon","Kiwi"
fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Mango




var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
从下标2开始，删除0个，添加"Lemon","Kiwi"
fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Apple,Mango

unshift:unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
shift:shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

push:push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
pop:pop() 方法用于删除并返回数组的最后一个元素。

join和split的区别

1、join()把一个数组的所有元素放入一个字符串里面。

2、join()中的元素是由指定的分隔符进行分离开的。

3、split()方法用来把一个字符串分割成字符串数组。

4、然而stringStr.split(‘切割点’,‘设置切割长度，否则整个字符串都会被分割，不考虑它的长度’)；

把一个对象转化成数组

1.Object.values(obj)

var obj = {
    length: 3,
    age:18
}
var arrs = Object.values(obj)
console.log(arrs); //[ 3, 18 ]

2.for-in

var obj = {
    length: 3,
    age:18
}
var arrs =[]
for(key in obj){
  console.log(key,'key');
  //length key
  //age key
    arrs.push(key)//键
  arrs.push(obj[key])//值
}
console.log(arrs); //[ 3, 18 ]

3.Array.from

let arrayLike = {

    "0" : "z",

    "1" : "y",

    "2" : "k",

    "length":3

};

Array.from(arrayLike,x=>x+'1');
Array.from(arrayLike)//不加1的直接返回原数组
//等同于

Array.from(arrayLike).map(x=>x+'1');

 

//打印：["z1","y1","k1"]

4.扩展运算符将伪数组转化为数组
let arr = […divs];

5.let arr=[].slice.call(array)

Typescript中?? ?: ?. 都是什么意思

?:是指可选参数，可以理解为参数自动加上undefined

function echo(x: number, y?: number) {
    return x + (y || 0);
}
getval(1); // 1
getval(1, null); // error, 'null' is not assignable to 'number | undefined'
interface IProListForm {
  enterpriseId: string | number;
  pageNum: number;
  pageSize: number;
  keyword?: string; // 可选属性
}

?? 和 || 的意思有点相似，但是又有点区别,??相较||比较严谨, 当值等于0的时候||就把他给排除了，但是?? 不会

console.log(null || 5)   //5
console.log(null ?? 5)     //5

console.log(undefined || 5)      //5
console.log(undefined ?? 5)      //5

console.log(0 || 5)       //5
console.log(0 ?? 5)      //0
?.的意思基本和 && 是一样的
a?.b 相当于 a && a.b ? a.b : undefined

const a = {
      b: { c: 7 }
};
console.log(a?.b?.c);     //7
console.log(a && a.b && a.b.c);    //7

!.的意思是断言，告诉ts你这个对象里一定有某个值

const inputRef = useRef<HTMLEInputlement>(null);
// 定义了输入框，初始化是null，但是你在调用他的时候相取输入框的value，这时候dom实例一定是有值的，所以用断言
const value: string = inputRef.current!.value;
// 这样就不会报错了

es6 里class类的封装

class IdentityManager={
  constructor(){
    this.isSignIn = false;
    this.userName = '';
    this.userId = '';
    this.avatar = '';
  }
  getUserLevel(name) {
   里面写方法
  }
  getUserLevel(name) {
    里面写方法
  }
  getUserLevel(name) {
    里面写方法
  }
}

let identityManager = new IdentityManager();
export { identityManager }

flex: 0 0 200px

父级：display: flex

left: flex: 0 0 200px(固定200px，不放大也不缩小)

right: flex: 1(会随父级变化)

（固定+自适应）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 参考阮一峰里面的百分比布局，要实现和上面一样的效果（一侧固定，一侧随父级进行变化） -->
    <!-- flex: 1 =? 1 1 0%
    flex: auto => 1 1 auto
    flex: none => 0 0 auto;
    flex-basis优先级 自身设定 > 0%(flex:1按字体的高度) > auto(采用height) -->
    <style>
      .wrap {
        margin: 0 auto;
        width: 80%;
 
        display: flex;
      }
      #left {
        flex: 0 0 200px; /* 左侧固定200px */
        height: 500px;
        background: red;
      }
      #right {
        /* 此处解释下
        flex: 1 1 0%
        0%表示此处宽度是按照自身内容宽度来，此处自身内容宽度为0，但是分配剩余的空间，所以可以自适应变化
         */
        flex: 1; /* 随父级变化 */
        height: 500px;
        background: burlywood;
      }
    </style>
 
</head>
<body>
<div class="wrap">
  <aside id="left"></aside>
  <section id="right">5555</section>
</div>
 
</body>
</html>

h-100 h-0 布局

整体高度设置为100%，设置为按照竖直方向排列
分为两大部分：标题和内容，内容区使用flex-grow-1和h-100（一定要写）占据下方剩余的高度，
滚动部分依旧是设置溢出部分为滚动scroll状态，

<template>
  <div class="d-flex-column h-100">
    <h2 style="text-align: center;" class="pb-5 borber-bottom">flex布局展示</h2>
    <div class="d-flex-column flex-grow-1 h-100">
      <p>我是标题</p>
      <div class="wrapper-container flex-grow-1">
        <div class="wrapper">shhhhhsssss</div>
        <div class="wrapper">shhhhhsssss</div>
        <div class="wrapper">shhhhhsssss</div>
        <div class="wrapper">shhhhhsssss</div>
        <div class="wrapper">shhhhhsssss</div>
        <div class="wrapper">shhhhhsssss</div>
        <div class="wrapper">shhhhhsssss</div>
        <div class="wrapper">shhhhhsssss</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Practice"
}
</script>

<style scoped>
.wrapper-container {
  overflow-y: scroll;
}

.wrapper {
  background-color: #4d9e76;
  height: 300px;
  margin: 10px 10px;
}
</style>

水平滚动

<template>
  <div class="d-flex-column h-100">
    <h2 style="text-align: center;" class="pb-5 borber-bottom">flex布局展示</h2>
    <div class="d-flex-column flex-grow-1 h-100">
      <p>我是标题</p>
      <div class="wrapper-container d-flex flex-grow-1">
<!--        可以不加flex-grow-1，看看滚动条在哪你就知道了  块元素浮动，宽高不起作用，所以默认被里面的东西撑开
父元素设置flex布局,子元素再去设置宽度无效的问题 当子元素的宽度总和小于父元素的宽度的时候,是有效的。
但是当子元素宽度总和大于父元素宽度的时候。 子元素的宽度就自适应了-->
<!--        <div class="wrapper">shhhhhssss</div>-->
<!--        <div class="wrapper">shhhhhssss</div>-->
<!--        <div class="wrapper">shhhhhssss</div>-->
<!--        <div class="wrapper">shhhhhssss</div>-->
<!--        <div class="wrapper">shhhhhssss</div>-->
<!--        <div class="wrapper">shhhhhssss</div>-->
<!--        <div class="wrapper">shhhhhssss</div>-->
<!--        <div class="wrapper">shhhhhssss</div>-->
        <div class="wrapper">shhhhhsssssshhhhhsssssshhhhhsssss</div>
        <div class="wrapper">shhhhhsssssshhhhhsssssshhhhhsssss</div>
        <div class="wrapper">shhhhhsssssshhhhhsssssshhhhhsssss</div>
        <div class="wrapper">shhhhhsssssshhhhhsssssshhhhhsssss</div>
        <div class="wrapper">shhhhhsssssshhhhhsssssshhhhhsssss</div>
        <div class="wrapper">shhhhhsssssshhhhhsssssshhhhhsssss</div>
        <div class="wrapper">shhhhhsssssshhhhhsssssshhhhhsssss</div>
        <div class="wrapper">shhhhhsssssshhhhhsssssshhhhhsssss</div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Practice"
}
</script>

<style scoped>
.wrapper-container {
  overflow-x: scroll;
}

.wrapper {
  background-color: #4d9e76;
  width: 400px;
  height:400px;
  margin: 10px 10px;
}
</style>

width:fit-content

width:fit-content介绍

height: calc(100vh-128px);

height: calc(100vh - 128px);在我们使用和**运算符时两边必须要有空白字符,否则这个属性值被解析成两个长度单位，分别是100vh和-128px，

this.$router.resolve

有时候需要在单击事件或函数中要求我们新窗口打开页面
在点击触发事件函数中：

const {href} = this.$router.resolve({
 path: "/newLinkPage",  
})
window.open(href,'_blank')

也可以这样写,可以打印一下看看url里面有什么
const url = this.$router.resolve({
 path: "/newLinkPage",  
})
window.open(url.href,'_blank')

router.js内写跳转的新页面的路由

写在 computed里面也是可以进行监视的，当设计到的元素发生改变时，computed会自动计算并更新数据

判断字符串里是否包含指定的字符 indexf 返回下标，如果是-1，那么就是不包含
任何字符串都包括空字符串

filter返回新数组，不改变原来的数组

immediate:true一上来监视一下