面试题整理

最新推荐文章于 2025-04-30 01:11:37 发布

Lucky宝宝

最新推荐文章于 2025-04-30 01:11:37 发布

阅读量544

点赞数

文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/lucky_ax/article/details/120996699

版权

1，说出几种水平垂直居中的方法

答：
一、水平居中
1，对于行内元素，只需要给父级元素的css设置text-align：center;
2，对于宽度固定的块级元素，只需要给子元素设置margin：0 auto；
3，对于宽度不固定的块级元素，可以使用三种方法

增加一个table标签，把元素放在table中，设置margin：0 auto；
使用display：inline设置为行内属性，在使用taxt-alige:center;
使用定位，父元素设置为position：relative，子元素设置为position:
absolute;left：50%，margin-left:减去子元素的50%；

二、垂直居中
1，对于行内元素，子元素的行高设置成父元素的高度line-height: “父元素的高度”;
2，使用定位，父元素设置为position：relative，子元素设置为position: absolute;top：50%，margin-top:减去子元素的50%；
3,子元素使用position：relative, left:50%, top:50%,transform: translate(-50%,-50%);
4:父盒子使用弹性布局：
display: flex;
justify-content: center;
align-items:center;
justify-content: center;

2，rem的原理是什么

答：
rem是相对于长度定位的，
rem布局实际上就是实现等比缩放
试想，如果我们的元素在不同的屏幕上可以按照相同的比例来进行缩放就好了。

rem的计算原理：
试想把屏幕平均分成10份，那么每一份就是1/10，我们选择每一份的大小是1rem，那么一个5*(1/10)的大小就占屏幕大小的50%，这就是rem

我们设计稿的宽度是750px，那么对于设计稿上宽度为600px的一个元素，它的rem值是怎么计算呢？
上面我们把屏幕分成了10份，屏幕宽度就是10rem
设计稿上600px元素在设计稿上占的比例是 600/750，将这个比例应用到屏幕上，屏幕的宽度是10rem，那么，这个元素在屏幕上占用的rem就是 600/75010rem
所以，公式就是设计稿元素尺寸/设计稿宽度以rem为单位的屏幕宽度

3,说出几个语义化标签

<h1>~<h6>元素
<header>元素
<nav>元素
<main>元素
<article>元素
<section>元素
 <aside>元素
 <footer>元素
 <small>元素
 <strong>元素
  <em>元素

4，vue中你是怎么封装请求的

答：
新建一个js文件

//先引入axios
import axios from 'axios';
function public(back) { //定义回调函数
  axios({
    method: 'POST',
    url: 'guide/relationship',
    headers: {
      token: localStorage.getItem('token') || axios.token //放自己的token
    }
  }).then(res=>{
    back(res) //回调函数
  }).catch(err=>{
    console.log(err)
  })
}

export default {
  public //抛出去
}

在main.js里封装成vue原型链

/**
 * 封装获得与户主关系的函数
 * */
import public from './assets/js/public '
Vue.prototype.$public = public ;

在组件中使用

<script>
  export default {
    name: 'App',
    data() {
      return {
      }
    },
    methods: {
      getpublic (){
        this.$public .public ((res)=>{ //自己写一个回调函数
          console.log(res) //将回调函数的返回内容打印到控制台
        });
      }
    },
    mounted() {
      this.public ();
    }
  }
</script>

5，new()做了什么

(1) 创建一个新对象；
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
(3) 执行构造函数中的代码（为这个新对象添加属性）；
(4) 返回新对象。

JS的基本数据类型

原始对象类型
null
undefined
number
Boolean
string
引用对象类型
object

GET和POST有什么区别？

get用于获取数据
post用于修改数据
get请求参数包含在url中，post通过request body传递参数。

vue params和query的区别

query传参会直接暴露在url中，刷新之后还能获取
params传参不会出现在url了，但是再次刷新后就获取不到路由的参数值了

vue-router是什么，它有哪些组件

<router-link :to='' class='active-class'>   //路由声明式跳转 ，active-class是标签被点击时的样式
<router-view>                  //渲染路由的容器
<keep-alive>                    //缓存组件

watch和computed的区别

计算属性：computed
初始化的时候就可以被监听到并且计算
计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。
1.变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号。
2.根据传入的变量的变化进行结果的更新。
3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次计算缓存的数据，因此提高了程序的性能。而methods中每调用一次就会重新计算　一次，为了进行不必要的资源消耗，选择用计算属性

监听属性：Watch
watch是发生改变的时候才会触发。
当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。
侦听属性是侦听的值改变会重新执行函数，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。

组件之间是怎么传值的

父子组件传值
父子组件像子组件传值,在父组件使用v-bind绑定属性,在子组件里通过props来接收
如下图

//父组件
<APPFWXY
      :appcount="appcount"
      :onconfirm="onconfirm"
      v-show="isAPPFWXY"
      @clickShowConfirm="clickShowConfirm"
      @closeShow="closeShow"
      />

子组件通过props来接收
如下图

 props:{
            appcount:{
                type:Number,
            },
            onconfirm:{
                type:Boolean
            }
        },

子组件向父组件传值
父组件在调用子组件的地方绑定一个自定义事件
如下图

<APPFWXY
      :appcount="appcount"
      :onconfirm="onconfirm"
      v-show="isAPPFWXY"
      @clickShowConfirm="clickShowConfirm"  //自定义绑定一个事件名
      @closeShow="closeShow"
      />

子组件通过this.$emit(“自定义事件”,传递的值) 传递给父组件
如下图

clickConfirm(){
                this.$emit('clickShowConfirm',false)
            },

兄弟组件之间传值
1,兄弟之间利用父组件传值
子组件1通过this.$emit向父组件传值,父组件在传值给子组件2,子组件2通过props来接收
2,定义一个中央的事件总线let bus =new Vue()

接收方通过用它监听事件($on)

发送方通过它来触发事件($emit)

Vue中父组件可以监听到子组件的生命周期吗？

可以。
有两种方法：
1.在父组件中定义一个事件，在子组件中用$emit去触发。
2.父组件引用子组件时，给父组件添加@hook 来监听。
其它的生命周期事件，例如：created，updated 等都可以监听。

vuex的理解和使用

vuex的理解

个人理解就是一个全局状态管理，简单理解，就是你在state里定义了一个数据之后，你可以在你所在项目的任何一个组件里面进行获取，修改，并且你的修改可以得到全局的响应变更！
说白了就是全局数据管理器，储存的数据可以在任何页面里读写！

state:定义全局数据
mutation:具备同步修改state的权限，但不能做异步处理
action:异步处理，到没有修改state的权限，需要借助mutation来处理。
getters:只会对state里的数据进行包装，不会更改state里面的数据

vuex里面的数据怎么保存
配合session储存

怎么修改vuex里state的数据
如果是同步的，使用commit方法触发一个mutation进行修改
如果是异步的，使用dispatch方法触发action,在action里使用commit触发一个mutation进行修改

vue+vuex实现页面登录刷新保存状态
1,在router配置meta属性，添加一个字段，表示进入路由需要登录
2,使用钩子函数实现路由守卫，在钩子函数里面做判断。
vuex刷新时保持刷新前状态不变，将参数和变量都储存在sessionstorage里，当刷新后再从sessionstorage里将状态和变量拉回来。