9.2

1.js和jquery获取dom对象区别

1. 通过原生js获取对象的方式获取到的是dom对象；
2. jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合。

2.js数组方法及作用

1. 向数组的末尾添加元素，原数组改变（push）
2. 从数组的末尾删除元素，原数组改变（pop）
3. 向数组的开头添加元素，原数组改变（unshift）
4. 从数组的开头删除元素，原数组改变（shift）
5. 数组排序，不改变原数组（sort）
6. 替换或删除数组中的元素，改变原数组（splice）
7. 数组反转（reverse）
8. 连接两个数组（concat）
9. 从数组中截取元素（slice）
10. 查到数组中的元素 indexOf() inCludes()
11. 遍历数组：forEach
12. 当数组中所有元素都满足条件，返回true，只要有一个不满足条件，返回false（every）
13. 当数组中所有元素都不满足条件，返回false，只要有一个满足条件，返回true（some）
14. 数组过滤方法（filter）
15. 数组映射方法（map）
16. 判断数组中的元素是否满足条件，返回第一个满足条件的下标（findIndex）
17. 判断数组中的元素是否满足条件，返回第一个满足条件的元素（find）

3.请求统一loading全部请求结束后loading消失

var num = 0
  axios.interceptors.request.use(function (config) {  //在请求发出之前进行一些操作
    num++
    _bus.$emit('showloading')
    return config
  }

  axios.interceptors.response.use(response => {        // 接受请求后num--，判断请求所有请求是否完成
    num--
    if (num <= 0) {
      _bus.$emit('closeLoading')      
    } else {
      _bus.$emit('showloading')      
    }
  })

4.js,jQuery获取dom的方法

js：

• 通过id获取dom返回符合条件的dom对象 document.getElementById(id)
• 通过标签名获取dom，返回符合条件的所有dom对象组成类伪数组 document.getElementsByTagName(tagName)
• 通过class获取，返回符合条件的所有dom对象组成类伪数组 document.getElementsByClassName(class)
• 通过标签的属性name获取，返回符合条件的所有dom对象组成类伪数组 document.getElementsByName(name)
• 通过选择器获取，返回符合条件dom对象 document.querySelector(选择器)
• 通过选择器获取，返回符合条件的所有dom对象组成类伪数组 document.querySelectorAll(选择器) jquery:
• $("#test")
• $(".test")
• $("div")

5.jQuery往元素上添加属性用什么api

• 设置或获取元素的固有属性prop()
• 设置或获取元素自定义属性值attr()

6.axios的请求拦截器和响应拦截器的封装

// 这个文件夹的是用来拦截器的设置
import axios from 'axios'
// 创建一个单例（实例）
const instance = axios.create({
  baseURL: 'http://kumanxuan1.f3322.net:8001',
  timeout: 4000
})
// 拦截器 - 请求拦截
instance.interceptors.request.use(config => {
  // 部分接口需要拿到 token
  const token = localStorage.getItem('token')
  if (token) {
    config.headers = {
      'aa-token': token
    }
  }
  return config
}, err => {
  return Promise.reject(err)
})
// 拦截器 - 响应拦截
instance.interceptors.response.use(res => {
  return res
}, err => {
  return Promise.reject(err)
})
// 导出
export default instance

7.左侧固定宽度200px，右侧宽度自适应如何实现

• flex:右侧子元素添加 flex-grow: 1；
• 定位:右侧子元素left:200px;top:0;bottom:0;right:0;
• css:右侧子元素width:calc(100% - 200px)
• 浮动：左侧左浮动，右侧margin-left:200px;

8.定位分几种

• relative
• absolute
• fixed
• sticky

9.css cecv中计算符前有空格和没有空格的区别

10.vuex中各个方法

• state,Vuex的数据源
• getters,对state的预处理
• mutations,对state中值的修改
• actions,异步操作
• modules,模块管理

11.递归需要注意的问题

• 递归一定要有条件限定，保证递归能停下来，否则可能会发生栈内存溢出
• 递归次数不能太多，否则可能会发生栈内存溢出。

12.兄弟组件传值

1.建一个总线bus.js文件

import vue from 'Vue'
export default  new vue

2.A组件中：引入bus.js（也可以在main.js中引入）

import bus from './bus.js'

bus.$emit('test', this.message)

3.B组件中：引入bus.js

import bus from './bus.js'

bus.$on('test', data => {
this.message = data
})

13.路由跳转方式

// 1.声明式导航
	<router-link to='/list'></router-link>
// 2.编程式导航
	this.$router.push('/list')

14.路由传参方式

• 拼接参数
• this.$router.push({path:'/list',query: {id}})
• this.$router.push({path:'/list',params: {id}})
• params方式刷新页面参数会丢失

15.路由守卫的作用

• to：目标路由对象
• from：即将要离开的路由对象
• next()：放行

用途：权限校验，白名单

16.v-for中key的作用

• 提升v-for渲染的效率
• 提高渲染性能
• 避免数据混乱的情况出现

17.节流、防抖

// 防抖-   n秒后在执行该事件，若在n秒内被重复触发，则重新计时
let timeout = null

function debounce(fun, wait) {
    if (!timeout) {
        clearTimeout(timeout)
    }
    timeout = setTimeout(()=>{
        fun()
    }, wait)
}

// 节流-   n秒内只运行一次，若在n秒内重复触发，只有一次生效
let timer, flag
function throttle(fun, wait) {
    if(!flag) {
        flag = true
        fun()
        timer = setTimeout(()=>{
            flag = false
        }, wait)
    }
}