ES6
1.1 let 和const
1.2 对象和数组解构赋值
let obj={
name:'jcak'，
age:18,
sayHi():{
console.log("Hi")
}
}
let {name,age,sayHi}=obj
sayHi(); //Hi
1.3箭头函数
1、箭头函数的this指向的是所属的作用域，而普通函数的this是指向所调用的对象。 2、箭头函数不能作为构造函数去使用 3、箭头函数不能使用arguments
1.4新增了Symbol类型，命名是唯一的，不会产生冲突
1.5 Promise/async/await
三种状态，pending（等待）、fulfilled（成功）、rejected（失败）
var pro = new Promise((resolve, reject) => {
setTimeout(() => {
const num = prompt() //方法用于显示可提示用户进行输入的对话框
if (num > 10) {
resolve()
} else {
reject()
}
}, 3000)
})
pro.then(() => {
// 写成果兑现的时候具体要做的事情
console.log('承诺兑现，你真棒')
}).catch(() => {
// 写承诺失败要做的具体事情
console.log('承诺失败，你真菜')
}).finally(() => {
console.log('不管承诺成功与否我都会出来')
})
1.6 for...of 和for...in
1.7MAP和SET
map也就是键值对，set是集合，值唯一。
HTML
2.1 跨域
2.1.1postMessage解决http和https之间的通信
跨域源于同源策略，也就是域名，端口，还有协议必须相同，如果不相同则出现跨域问题。 利用window.postMessage解决http和https之间的通信
2.1.2利用JSONP解决跨域
02利用JSONP解决跨域
//vue.js
this.$http.jsonp('http://www.domain2.com:8080/login', {
params: {},
jsonp: 'handleCallback'
}).then((res) => {
console.log(res);
})
2.1.3服务器端设置Access-Control-Allow-Origin为True来进行解决
03 服务端设置CORS
2.1.4 webpack本地代理
devServer: {
port: 8080,
proxy: {
"/api": {
target: "http://192.168.25.20:8088" // 后端接口
}
}
}
2.2 cookie、localStorage、sessionStorage区别
2.3布局
常见类型
2.3.1 单列布局
2.3.2 双列布局
2.3.3 三列布局
2.3.4 div垂直居中
01 绝对定位
div{
background:red;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
02
2.4 HTTP协议
2.4.0 HTTP和HTTPS的区别
HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。 HTTP和HTTPS 使用完全不同的连接方式，所用的端口不同，前者是80 端口，后者是 443端口 主要的状态码 200、404、500
2.4.1 GET请求
主要是从服务器获取数据
2.4.2 POST请求
主要是发送数据
2.5 computed和watch的区别
2.5.1 computed 计算结果并返回，只有当被计算的值发生改变时才会触发
new Vue({
el: '#id',
template: `<div>
<span>Name: {{name}}<span>
</div>`,
data: {
firstName: 'Leo',
lastName: 'Alan'
},
computed: {
name () {
return `${this.firstName} + ${this.lastName}`
}
}
})
2.5.2 监听某一个值，当被监听的值发生变化时，执行对应的操作
(与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果)
new Vue({
el: '#id',
template: `<div>
// ...
</div>`,
data: {
firstName: 'Leo',
lastName: 'Alan',
obj1: {
a: 0
}
},
watch: {
// 监听firstName,当firstName发生变化时就会执行该函数
firstName () {
// 执行需要的操作...
// 注:初始化不会执行，只有当被监听的值(firstName)发生变化时才会执行
},
// 监听lastName
lastName: {
handler (newName, oldName) {
// 执行需要的操作...
},
immediate: true // true: 初始化时就会先执行一遍该监听对应的操作
},
obj1: {
handler () {
// 执行需要的操作...
},
deep: true // 该属性默认值为false.
// 当被监听的值是对象,只有deep为true时,对应属性的值(obj1.a)发生变化时才能触发监听事件，但是这样非常消耗性能
},
// 监听对象具体的属性， deep就不需要设置为true了
'obj1.a': {
handler () {
// 执行需要的操作...
}
}
}
})
2.6 vue组件通信
2.6.1 父子组件
1、props+emit 2、parent 3、provider/inject
2.6.2 兄弟组件
1、eventBus 2、refs
