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

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

2024-05-28 09:05:17 前端知识 前端哥 277 334 我要收藏

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的方法混用。今天将做到的相关知识点全部罗列出来进行复习。学习状态良好,对于明天的比赛比较紧张。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9759.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!