前端面试题

哈士奇冲鸭

已于 2022-04-11 20:21:26 修改

阅读量266

点赞数 4

文章标签： css javascript ajax vue.js

于 2022-04-11 19:33:43 首次发布

本文链接：https://blog.csdn.net/weixin_46465573/article/details/124105689

版权

Css模块

1.css水平居中方法

1.text-align: center
2.margin: 0 auto
3.position: absolute
  left:50%
  transfrom: translateY(-50%)
4.display: flex
//设置和检索弹性盒子在主轴方向上的排列方式
  justify-content: center

2.css垂直居中方法

1.line-height: hight//当前元素高度
2. position: absolute
   top: 50%
   tranfrom: translateX(-50%)
3.display: flex
  //align-items定义flex子项在flex容器的当前行的侧轴上的对齐方式
  align-center: center

3.风车

<style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid gray;
    }
    .box>div {
      float: left;
      width: 0;
      height: 0;
      border: 50px solid transparent;
    }
    .box .box1 {
      border-bottom-color: yellow;
    }
    .box .box2 {
      border-left-color: yellow;
    }
    .box .box3 {
      border-right-color: yellow;
    }
    .box .box4 {
      border-top-color: yellow;
    }
  </style>
</head>
<body>
 <div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
 </div>
</body>

效果图
粪车效果图

4.向左的箭头

<style>
    .box {
      border-top: 1px solid;
      border-right: 1px solid;
      //向右旋转45°
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
    <div class="box">
    </div>

效果图
指向右的箭头

5.向下的三角形

  <style>
    div {
      width: 0;
      height: 0;
      //盒子边框全为透明色
      border: 10px solid transparent;
      border-top-color: red;
    }
  </style>
</head>
<body>
    <div>
    </div>
</body>

效果图
向下的三角形

6.单行文本溢出省略

  <style>
    .dan {
      width: 100px;
      border: 1px solid;
      /* white-space: nowrap;控制文本不会换行 */
      white-space: nowrap;
      overflow: hidden;
      /* 溢出的文本显示为省略号 */
      text-overflow: ellipsis;
    }
   </style>
   <body>
  <div class="dan">
    这是我的第一篇博客，某些地方写的不好的，请指出来让我进行改正
  </div>
</body>

效果图
单行文本溢出

7.多行文本溢出省略

<style>
    .box {
      width: 100px;
      border: 1px solid gray;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 将对象作为弹性申缩盒子模型显示 */
      display: -webkit-box;
      /* 要求文本几行显示 */
      -webkit-line-clamp: 2;
      /* 设置或检索伸缩盒子对象的子元素的排列方式 */
      /* 垂直 */
      -webkit-box-orient: vertical;
      /* vertical-align: baseline; */
    }
  </style>
</head>
<body>
  <div class="box">
    这一篇博客，主要是用来熟悉一下怎么发布和去写博客，里面的内容仅供大家参考，有些不足的地方，欢迎大家来进行指正修改
  </div>
</body>

效果图
多行文本溢出

JS模块

1.如何中断ajax请求

一种是设置超时时间，让ajax自动断开请求，另一种是手动停止ajax请求，核心是调用XML对象的abort方法。

ajax.abort()

2.事件委托

事件委托是指，将事件绑定到目标元素的父元素上面，利用冒泡机制来触发该事件

3.target、currentTarget的区别？

target是指当前被点击的元素
currentTarget是指当前所绑定的事件的元素

4.闭包

闭包是指一个函数可以访问另一个函数作用域中的变量

5.基本数据类型

string（），boolean（），number（），null，undefined，symbol（），bigint（）

6.箭头函数

 1.箭头函数中的this是继承而来的，默认指向在定义他时所处的对象，而不是执行时的对象，
 2. 箭头函数没有原型 原型是undefined
 3.箭头函数的this指向的是全局对象，而函数指向的是引用对象
 4.Call，apply，bind方法改变不了箭头函数的指向

7.get和post的区别

1.get是通过url地址栏传递值，数据被放在url后面，通过？进行连接，通过&来区别不同的属性，传递的参数和值都可以通过url地址栏直接看到，明文传递数据，保密性差。
2.post传递的参数是放在HTTP的包体内，url不可见，密文传递，保密性好。
3.get只有url编码，但是post支持多种编码方式
4.get请求的数据会被保存，但是通过post请求的数据不会被保存。

Vue模块

1.生命周期

 1.vue实例从创建到销毁的过程就是生命周期
 2.beforeCreate->created->beforemount->mounted->beforeupdate->updated->beforeDestroy->destroyed
 3、keep-alive下：activated deactivated

2.第一次加载页面会触发哪些状态

 第一次加载页面会触发beforecreate，created，beforemount，mounted

2.MVVM

MVVM是model-view-viewmodel的缩写，model表示的是数据模型，view代表的是UI组件，viewmodel是同步model和view的对象，model和view通过viewmodel来进行交互。
优点：
低耦合，可重用，可测试，独立开发

3.MVVM和MVC的区别

Mvc和MVVM都是一种设计思想，MVVM主要解决了mvc中大量的dom操作使页面渲染性能降低，加载变慢，影响用户体验的问题。

3.组件之间的传值

1.父向子传递数据：父组件通过标签上的data：data方式定义传值，子组件通过props方法接收数据
2.子向父传递数据：子组件通过$emit方法传递参数

4.V-show和v-if的区别

v-show是通过修改元素指令display的css属性让其显示或隐藏
v-if 是直接销毁和重建dom打到让元素显示或隐藏的效果

5.Keep-alive的作用

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态和避免从新渲染