4.7vue.set（）与this.$set（）用法与区别- flex布局- grid网格布局-js中Attribute()方法对象对类的操作-js中字符串和数组的常用方法-jQuery中常用的方法

4.7vue.set（）与this.$set（）用法与区别- flex布局- grid网格布局-js中Attribute()方法对象对类的操作-js中字符串和数组的常用方法-jQuery中常用的方法

一.学习内容

1.1 vue.set（）与this.$set（）用法与区别

说明：两者都是实现向实例对象中添加响应式属性，触发视图更新，两者原理和用法基本相同，都是使用set,一个绑定在vue的构造函数身上，一个绑定在vue的原型身上。

1.vue.set（），将set函数绑定在vue构造函数中，设置实例创建之后添加的新的响应式属性，且触发视图更新，但是不允许添加根级响应式属性，只可以向嵌套对象添加响应式属性。

用法： Vue.set(object, propertyName, value)

import { set } from '../observer/index'
...
Vue.set = set
...

2.this.$set（）**将set函数绑定在vue原型上，**只能设置实例创建后存在的数据（数据已经在data中）

用法： this.$set(object, propertyName, value)

第一个参数是要添加的对象，第二个是需要添加的属性名key（需要要用引号包裹起来),第三个是需要添加的值)

import { set } from '../observer/index'
...
Vue.prototype.$set = set
...

1.2 flex布局

1.flex-direction设置主轴的方向。

flex-direction:column;将主轴改为y轴，纵轴
flex-direction:row; 将主轴改为x轴，横轴
flex-direction:row- reverse;主轴为x轴，并且翻转
flex-direction:column- reverse;主轴为y轴，并且翻转

2.justify-content设置主轴子元素排列

flex-start 所有子元素在主轴头部显示
flex-end 所有子元素在主轴尾部显示
flex-center 所有子元素在主轴居中对齐
space-around 所有子元素平分剩余空间
space-between 所有子元素先两边贴边在平分剩余空间

3.flex-wrap子元素是否换行。（一般父元素和子元素内要设置宽）

flex-wrap：wrap 确定子元素为换行

4.align-items设置侧轴子元素排列,在子项为单项（单行）。

align-items的值为flex-start 表示从头开始
align-items的值为flex-end 表示从结尾开始
align-items的值为center 表示居中显示
align-items的值为stretch 会将子元素拉伸

5.align-content设置侧轴子元素排列,适应于换行（多行）的情况下（单行情况下无效）。

stretch 伸缩空间
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
space-between 元素位于各行之间留有空白的容器内。
space-around 元素位于各行之前、之间、之后都留有空白的容器内。

1.3 grid网格布局

将属性 display 值设为 grid（横向） 或 inline-grid （竖向）就创建了一个网格容器，所有容器直接子结点自动成为网格项目

grid  {
    display: grid;
｝

//调整格子的行列个数，以及布局大小
grid-template-columns: auto auto auto auto;属性在网格容器中创建四个列:
使用grid-template-columns 属性定义网格布局中的列数量。
grid-template-rows:100px 300px;属性定义第一行高度所有的格子为 100px，第二行所有的格子高度为 300px。

//调整格子的相邻的间隙大小
grid-column-gap：属性来设置列之间的网格间距：
grid-row-gap：属性来设置行之间的网格间距
grid-gap :grid-row-gap 和 grid-column-gap 属性的简写

 //操作列行的开始的结束
 //设置一个网格元素的网格线从第一列开始，第三列结束：
 grid-column-start: 1;
 grid-column-end: 3;
 //设置一个网格元素的网格线从第一行开始，第三行结束：
 grid-row-start: 1;
 grid-row-end: 3;

1.4 js中Attribute()方法对象对类的操作

// .setAttribute ：在指定的元素中添加某属性的属性值，注意若该属性本就有值则会被覆盖。
 box.setAttribute('class','box1')

// .removeAttribute :在指定的元素中删除某属性，则该属性与其属性值将会被清空。
 box.removeAttribute('class')

 // .getAttribute :获取指定元素的指定的属性的属性值。
 box.getAttribute('class')

1.5 js中字符串和数组的常用方法

1.字符串的常用方法：

1. slice()：对字符串的某些部分进行提取，往往会传入两个参数：提取部分元素的起始位置的索引与结束位置索引。

   slice(start ,end) 选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括其结束的参数。

   var f = ["a","b","c","d","e"];
   var c = f.slice(1, 3);
   console.log(c)//["b","c"];
   

2. indexOf()：查找某元素中该字符串中首次出现的位置的索引值，若不存在则返回-1，常常用于查找或是去重等操作中。

3. split()：方法将字符串拆分为子字符串数组，常常传入的是分隔符，如果传入的是空字符串“ ”，默认分割为“，”

   let text = "How are you doing today?";
   const myArray = text.split(" ");
   //How,are,you,doing,today?
   

2.数组的常用方法：

1. join()：方法将数组作为字符串返回。

2. **push()：**在数组的结尾处添加一个新的元素。

3. splice()：用来添加或是删除元素，会改变原数组。

   var list = ["a", "b", "c"];
   list.splice(1,1,"d"); //参数1:添加元素的位置索引，参数2：添加几个元素，参数3：需要添加的元素
   //list=['a','d','b','c']
   

4. sort()方法：对数组的项目进行排序,排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）,该方法会改变原始数组。

   –语法：array.sort(fun)；参数可传，可不传

   –不传递参数，默认情况下，sort() 方法按字母和升序将值作为字符串进行排序，根据每个字母的 ASCII 码进行排序，如果是由字母组成的字符串则是安装每个字符串的首字母的ASCII 码进行排序。

   –传递参数，根据数组中的对象的某个属性值排序

1.6 jQuery中常用的方法

1.siblings() 方法返回被选元素的所有同级元素,(主要应用于点击切换加高亮，匹配当前元素的其他兄弟元素移除高亮。)

2.eq(index) 方法：获取当前匹配的多个元素中指定index上的一个， index 参数标示多个元素集合中元素的位置。

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>//选定的元素$('li').eq(2)
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

$('li').eq(2).css('background-color', 'red');

3.clone(),方法生成被选元素的副本，包含子节点、文本和属性。

//$(selector)获取需要复制的节点
$(selector).clone()
//$("body")复制的节点后需要添加的地方
  $("body").append($("p").clone());

4.each() 方法遍历数组

5.text()获取文本值

$(this).text()获取文本值

二.学习总结

今天主要是对蓝桥杯的题目进行复习，没有再写新的题目。上午对之前做过的题，将一些我认为比较重点的题目又重新做了一遍。再做一遍也没有完全能够做对，有时考虑不全，有时单词写错，知识点应用不熟练。接着下午，对做过的题相关的知识点进行了汇总，总结了一些搭建页面，js和JQuery常用的方法。在之前做中总是将js和jQyery的方法混用。今天将做到的相关知识点全部罗列出来进行复习。学习状态良好，对于明天的比赛比较紧张。