Composition API
- setup
- ref
- reactive
- toRefs
- lifeCycle
Proxy 检测值的变化
watchEffect
- 自动收集依赖并触发
- 自动/手动销毁 effect
- 使副作用失效
- 副作用执行顺序可控制
小于 1 分钟
overflow:hidden
清除clear:both;
清除两边的浮动display:table;
overflow:visible;
子绝父相定位
相对定位relative
:相对于原来位置移动绝对定位absolute
:相对于 relative 特性的父容器定位相对定位
:只改变位置不影响文档流布局;绝对定位
:包裹性:实际内容撑开;破坏性:脱离文档流; 悬浮性:在原始流之上;relative
时,它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。absolute
,absolute 相对于其包含块定位。和 relative 定位不一样,absolute 定位会将元素从当前的文档流里面移除,周围的元素会忽略它。fixed定位
,它是一种特殊的绝对(absolute)定位,区别是其包含块是浏览器窗口。float:浮动定位
z-index属性
指定元素的堆叠次序。z-index 的取值是整数,数值大的元素优先于数值小的元素显示。margin 属性
将元素水平居中<div>,<li>,<table>
:符合块级元素的基本特征,也就是一个水平流上只能单独显示一个元素,多个块级元素则换行显示。@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译为: #header {
width: 10px;
height: 20px;
}
主要介绍 JavaScript 的基础知识,包括数据类型、变量、函数、对象、数组、操作符、循环、Map 和 Set 等知识点。
标识符: 在 JS 中所有的可以由我们自主命名的都可以称为是标识符
if (true) {
// TDZ开始
tmp = "abc" // ReferenceError
console.log(tmp) // ReferenceError
let tmp // TDZ结束
console.log(tmp) // undefined
tmp = 123
console.log(tmp) // 123
}
设计模式丶
JavaScript 学习笔记,包括包装类,类型检测,错误与调试,变量和作用域,函数,面向对象,闭包,构造函数,原型和原型链,继承等知识点。
// 封装axios的请求,返回重新封装的数据格式
// 对错误的统一处理
import axios from 'axios'
import errorHandle from './errorHandle'
import store from '@/store'
import publicConfig from '@/config'
const CancelToken = axios.CancelToken
class HttpRequest {
constructor (baseUrl) {
this.baseUrl = baseUrl
this.pending = {}
}
// 获取axios配置
getInsideConfig () {
const config = {
baseURL: this.baseUrl,
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
timeout: 10000
}
return config
}
removePending (key, isRequest = false) {
if (this.pending[key] && isRequest) {
this.pending[key]('取消重复请求')
}
delete this.pending[key]
}
// 设定拦截器
interceptors (instance) {
// 请求拦截器
instance.interceptors.request.use((config) => {
// Do something before request is sent
let isPublic = false
publicConfig.publicPath.map((path) => {
isPublic = isPublic || path.test(config.url)
})
const token = store.state.user.token
if (!isPublic && token) {
config.headers.Authorization = 'Bearer ' + token
}
const key = config.url + '&' + config.method
this.removePending(key, true)
config.cancelToken = new CancelToken((c) => {
this.pending[key] = c
})
return config
}, (err) => {
// debugger
errorHandle(err)
// Do something with request error
return Promise.reject(err)
})
// 响应请求的拦截器
instance.interceptors.response.use((res) => {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
const key = res.config.url + '&' + res.config.method
this.removePending(key)
if (res.status === 200) {
return Promise.resolve(res.data)
} else {
return Promise.reject(res)
}
}, (err) => {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
// debugger
errorHandle(err)
return Promise.reject(err)
})
}
// 创建实例
request (options) {
const instance = axios.create()
const newOptions = Object.assign(this.getInsideConfig(), options)
this.interceptors(instance)
return instance(newOptions)
}
get (url, config) {
const options = Object.assign({
method: 'get',
url: url
}, config)
return this.request(options)
}
post (url, data) {
return this.request({
method: 'post',
url: url,
data: data
})
}
}
export default HttpRequest