css
1，盒模型 2，如何实现一个最大的正方形 3，一行水平居中，多行居左 4，水平垂直居中 5，两栏布局，左边固定，右边自适应，左右不重叠 6，如何实现左右等高布局 7，画三角形 8，link @import导入css 9，BFC理解
js
1，判断 js 类型的方式 2，ES5 和 ES6 分别几种方式声明变量 3，闭包的概念？优缺点？ 4，浅拷贝和深拷贝 5，数组去重的方法 6，DOM 事件有哪些阶段？谈谈对事件代理的理解 7，js 执行机制、事件循环 8，介绍下 promise.all 9，async 和 await, 10，ES6 的 class 和构造函数的区别 11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式, 12，介绍一下rAF(requestAnimationFrame) 13，javascript 的垃圾回收机制讲一下, 14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？
//https://github.com/camsong/fetch-ie8
//get
fetch("**").then(res=>res.json()).then(res=>{console.log(res)})
fetch("**").then(res=>res.text()).then(res=>{console.log(res)})
//post
fetch("**",{
method:'post',
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "name=kerwin&age=100"
}).then(res=>res.json()).then(res=>{console.log(res)});
fetch("/users",{
method:'post',
// credentials: 'include',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
name:"kerwin",
age:100
})
}).then(res=>res.json()).then(res=>{console.log(res)});
注意
Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})
2.axios
axios.get("")
axios.post("")
axios.put("")
axios.delete("")
axios({
url:"",
headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"1.0.0","e":"1"}',
'X-Host': 'mall.cfg.common-banner'
}
}).then(res=>{
console.log(res.data);
})
返回的数据会被包装
{
*:*
data:真实后端数据
}
二. 组件
1. 虚拟dom与diff算法 key的作用
（1）把树按照层级分解
(2) 同key值对比
(3) 同组件对比
2. 为什么组件化
扩展 HTML 元素，封装可重用的代码
3. 组件注册方式
- a.全局组件
- b.局部组件
4. 组件编写方式与Vue实例的区别
*自定义组件需要有一个root element
*父子组件的data是无法共享
*组件可以有data，methods,computed....,但是data 必须是一个函数
5. 组件通信
i. 父子组件传值 (props down, events up)
ii. 属性验证
props:{name:Number} Number,String,Boolean,Array,Object,Function,null(不限制类型)
iii. 事件机制
a.使用 $on(eventName) 监听事件
b.使用 $emit(eventName) 触发事件
iv. Ref
<input ref="mytext"/> this.$refs.mytext
v. 事件总线
var bus = new Vue();
* mounted生命周期中进行监听
6. 动态组件
- 元素，动态地绑定多个组件到它的 is 属性
- 保留状态，避免重新渲染
7. slot插槽 (内容分发)
- 混合父组件的内容与子组件自己的模板-->内容分发
- 父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
a. 单个slot
b. 具名slot
注意 v-slot 只能添加在 template 上, 文本节点也可以当具名插槽内容插入
8. transition过渡
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
(1)单元素/组件过渡
* css过渡
* css动画
* 结合animate.css动画库
(2) 多个元素过渡(设置key)
*当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
mode:in-out ; out-in
(3)多个组件过渡
(4)列表过渡(设置key)
不同于 transition， 它会以一个真实元素呈现：默认为一个 。你也可以通过 tag 特性更换为其他元素。
* 提供唯一的 key 属性值
9. 生命周期
i. 生命周期各个阶段
ii. 生命周期钩子函数的触发条件与作用
10. swiper学习
11. 自定义组件的封装
自定义封装swiper组件（基于swiper）
注意： 防止swipe初始化过早
三. 指令
1. 自定义指令
(1)自定义指令介绍 directives - 对普通 DOM 元素进行底层操作
(2)钩子函数
* 参数 el,binding,vnode,oldvnode
* bind,inserted,update,componentUpdated,unbind
(3)函数简写
(4)自定义指令-轮播
- inserted 插入最后一个元素时初始化swiper
2. nextTick
- this.$nextTick()
四.过滤器
cn.vuejs.org/v2/guide/fi…cn.vuejs.org/v2/guide/fi…
全局写法
局部写法
可以串联
过滤器是 JavaScript 函数，因此可以接收参数
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
五、.单文件组件
1.写法
cn.vuejs.org/v2/guide/si…cn.vuejs.org/v2/guide/si…
a.
<template>
html代码
</template>
<script>
js代码
</script>
<style>
css代码
</style>
b.
<template>
html代码
</template>
<script src="相对路径的外部的js"></script>
<style src="相对路径的外部的css"></style>
2.vue-cli3.0的使用
npm install -g @vue/cli (一次安装)
vue create myapp
文末
篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页
