初级前端常用基础面试题

本文由贵州靓仔徐昌友提供。

Css盒子模型

所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

地址:https://www.cnblogs.com/itmacy/p/6958181.html

项目中如何解决浏览器的跨域问题  

1.jsonp请求跨域问题   在服务端设置   req.getParameter(“callback”)

2.Jsonp的插件使用

3.在服务端设置响应头

4.Axios跨域 运用反向代理模式解决跨域问题

浏览器的存储有哪几个 他们的区别是什么?

cookie:数据存储,跨页面通讯;

数据每次都会发送给服务端;

前后端都可以操作;

cookie的默认是会话级别的有效期,即页面打开到页面关闭;但可以手动设置过期时间;

只要cookie里面有数据,请求的时候都会自动携带;

存储大小:4KB左右,受IE的限制

localStorage:存储数据,跨页面通讯;

不会与服务器端通讯,相对与cookie较安全,不用担心数据被截获;

只能有前端操作,后端操作不了;

存储的时效性是永久的,但是可以手动删除;

不管有没有数据,请求的时候都不会自动携带;

存储大小:5M左右

sessionStorage:存储数据;

仅在当前会话下有效。sessionStorage引入了“浏览器窗口”的概念。sessionStorage是在同源的窗口中始终保存存在的数据。只要这个浏览器窗口关闭后就会被销毁;

存储大小:5M左右;

不会与服务器端通讯,相对与cookie较安全,不用担心数据被截获;

也可以简单的理解为sessionStorage是没有设置有效期的cookie,cookie的有效期设置为永久,就是localStorage。

Vue的指令有哪些?

vue生命周期有哪几个谈谈对他的理解

总共分为8个阶段,分别为 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。

beforeCreate:在实例初始化之后,数据观测者( data observer)和 event/ watcher事件配置之前调用。

created:在实例创建完成后立即调用。在这一步,实例已完成以下的配置:数据观测者,属性和方法的运算, watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。

beforeMount:在挂载开始之前调用,相关的 render函数首次调用。

mounted:    el被新创建的vm.$el替换,并且在挂载到实例上之后再调用该钩子如果root实例挂载了一个文档内元素,当调用 mounted时vm.sel也在文档内。

beforeUpdate:在数据更新时调用,发生在虛拟DOM重新渲染和打补丁之前。

updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩。

beforeDestroy:在实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed:在 Vue. js实例销毀后调用。调用后,Vue. js实例指示的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

当使用组件的kep- alive功能时,增加以下两个周期。

 

activated在keep- alive组件激活时调用;

deactivated在keep-live组件停用时调用。

Vue2.5.0版本新增了一个周期钩子:ErrorCaptured,当捕获一个来自子孙组件的错误时调用。

为什么v-for时候要加一个key呢? 他的作用是啥

可以简单的这样理解:加了key(一定要具有唯一性)是我们想达到的效果

Vue中如何解决冒泡事件呢?

冒泡事件值在父热区中再有一个热区 但是点击里面这个热区就会出现两次触发事件,所以呢可以在里面那个事件上写一个.stop

Vue中的vue-router是什么 他有哪些组件,他是如何动态传值的?

答:Vue-router是路由插件 组件包括 router-link和 router-vIew。 在组件中,使用$router对象的 params.id,即 $route.params.id 。

Vue组件通讯有哪些方式?

1、props 和 $emit。父组件向子组件传递数据是通过props传递的,子组件传递给父组件是通过$emit触发事件来做到的。

2、$parent 和 $children 获取单签组件的父组件和当前组件的子组件。

3、$attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。

4、父组件中通过 provide 来提供变量,然后在子组件中通过 inject 来注入变量。(官方不推荐在实际业务中适用,但是写组件库时很常用。)

5、$refs 获取组件实例。

6、envetBus 兄弟组件数据传递,这种情况下可以使用事件总线的方式。

7、vuex 状态管理。

v-model 如何实现双向数据绑定的

v-model其实是个语法糖,它实际上是做了两步动作:
1、绑定数据value
2、触发输入事件input

<template>
  <div id="app">
    {{username}} <br/>
    <input type="text" :value="username" @input="username=$event.target.value">
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      username:''
    }
  }
}

</script>

vuex有哪几种属性

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

  1. state:vuex的基本数据,用来存储变量
  2. geeter:从基本数据(state)派生的数据,相当于state的计算属性
  3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
  4. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
  5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

理解的es6 有哪些 ? Promise 的使用是怎么样的呢?

模板字符串 剪头函数  和Promise  async 和await 的使用

扩展:https://www.cnblogs.com/zhujieblog/articles/13161364.html

随笔

解决浏览器强制跳转https问题

2021-10-22 12:40:34

随笔资源分享

分享个仿站小工具

2021-12-25 23:00:02

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索