2019年第17周web前端项目学习

最新推荐文章于 2024-11-21 22:18:33 发布

原创最新推荐文章于 2024-11-21 22:18:33 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端学习 #js #css面试 #vue项目axios #对象属性动态改变

每周学习专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了前端开发中的动态操作JS对象属性、Vue路由管理、解决404错误、使用qs库处理数组数据传输，以及CSS3新特性和选择器优先级等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js

对象动态增加和删除属性

在实际项目过程中，难免要对对象属性进行操作。特别是动态添加和删除对象属性，

增加对象的属性用push来动态拼接。

```

      for(let i=0;i<this.reimMachineInvoice.length;i++){
          for(let j=0;j<this.reimMachineInvoice[i].reimMachineInvoiceRow.length;j++){
              this.courseTitleArray.**push**({
                  accountId: this.reimMachineInvoice[i].reimMachineInvoiceRow[j].accountId,
                  id: this.reimMachineInvoice[i].reimMachineInvoiceRow[j].id,
                  parentId: this.reimMachineInvoice[i].reimMachineInvoiceRow[j].remiMachineInvoiceId,
                  type: this.reimMachineInvoice[i].reimMachineInvoiceRow[j].type,
              })
          }
      }


```

对对象进行赋值之后，如果有某个属性已经不需要的，可以用delete来删除

```


    for(let i = 0;i<this.courseTitleArray.length;i++){
      if(this.courseTitleArray[i].parentId == which[this.index].id){
          this.courseTitleArray[i].accountId = this.chooseTreeId
          this.courseTitleArray[i].type =  this.chooseInvoiceType === '0' ? '1' : which[this.index].type
          **delete** this.courseTitleArray[i].parentId;
      }
    }

```

vue锚链接scrollBehavior

通常后台管理系统开发中我们很少会对页面回退或前进进行操作，但在浏览器用户界面上提供有前进、回退按钮。

根据浏览器的原理。页面跳转到离开页面之前的位置，而不是重新刷新页面，而在很多时候，我们的数据会发生变化或者需求是重新刷新页面，这个时候，就需要我们自己设置返回跳转。

方法一：使用导航守卫：

```

    router.beforeEach((to, from, next) => {
        // 让页面回到顶部
        document.documentElement.scrollTop = 0

        next()
    })


```

方法二：使用vue-router 提供的锚链接scrollBehavior：

简单来说。scrollBehavior可以让浏览器前进或者后退或者跳转的时候，回到顶部

```

    scrollBehavior(to, from, savedPosition) {
        if (to.hash) {
            return {
                selector: to.hash
            }
        }
		//让页面回到顶部位置
        window.scrollTo(0, 0)
    },


```

在项目中。利用axios发送请求的时候，有时候会报一个错误：404 BadRequest

请求代码如下：

请求结果如下：

同一个项目中同样的发送请求方式，为啥这个接口会出错呢？

后来经过用postman 以及与后台对接及根据之前请求成功的接口数据进行对比，发现这个接口的传输数据中有数组存在。

经过各方面查验。找到了引入qs的解决办法，代码如下：

请求成功了，但是，为什么要引入qs呢？？qs的作用是什么呢？

简单来说：qs是查询字符串解析和将对象序列化的库；而vue在请求的时候，当我们的data中有数组的时候，是需要序列化才能与后台进行通讯的。

qs的应用：

npm 下载qs库：npm i qs
在vue项目页面或者封装的axios中引用： import Qs from ‘qs’；
qs主要有两种使用方法：qu.stringify()和qs.parse();
qu.stringify():将对象序列化成url的形式；以&进行拼接
qs.parse():将url解析成对象形式；

css

box-sizing 常用的属性有哪些？分别有什么作用？

box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; // 继承父元素 box-sizing 属性的值

CSS选择器有哪些？

id选择器 #id
类选择器 .class
标签选择器 div, h1, p
相邻选择器 h1 + p
子选择器 ul > li
后代选择器 li a
通配符选择器 *
属性选择器 a[rel=‘external’]
伪类选择器 a:hover, li:nth-child

CSS哪些属性可以继承？哪些属性不可以继承？

可以继承的样式：font-size、font-family、color、list-style、cursor
不可继承的样式：width、height、border、padding、margin、background

CSS如何计算选择器优先？

相同权重，定义最近者为准：行内样式 > 内部样式 > 外部样式
含外部载入样式时，后载入样式覆盖其前面的载入的样式和内部样式
选择器优先级: 行内样式[1000] > id[100] > class[10] > Tag[1]
在同一组属性设置中，!important 优先级最高，高于行内样式

CSS3新增伪类有哪些？

:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符

请列举几种隐藏元素的方法

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
opacity: 0; CSS3属性，设置0可以使一个元素完全透明
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
display: none; 元素会变得不可见，并且不会再占用文档的空间。
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态
height: 0; 将元素高度设为 0 ，并消除边框
filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

rgba() 和 opacity 的透明效果有什么不同？

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

css 属性 content 有什么作用？

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

CSS3有哪些新特性？

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
转换
- 旋转 transform: rotate(20deg);
- 倾斜 transform: skew(150deg, -10deg);
- 位移 transform: translate(20px, 20px);
  o 缩放 transform: scale(.5);
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;