-
data.name?.length
如果要访问 JavaScript 中对象的嵌套属性，则必须在每个级别检查是否为 null 或 undefined，否则最终将会抛出 TypeError。
在以前，会通过这种写法避免（data.name && data.name.length）,这种写法不美观，且占用内存空间
如果表达式返回 null 或 undefined，则可选链运算符的左侧将始终返回 undefined
-
listeners
$attrs--继承所有的父组件属性（除了prop传递的属性、class 和 style ）
父组件传递下来的，但是在你调用的那个组件里没有注册使用，需要继续传递下下去的所有。
根组件：
//根组件里的引用的子组件，需要将message title age name 等数据传递到son组件里
<son :title="title" :name="name" :age="age" ></son>
子组件：
//子组件里引用孙组件，子组件声明了title属性，剩下的age、name还需要继续往下传递
<grandson :age="age" :name="name"></grandson>
如此往下，如果根组件定义了很多自定义属性都要绑定，写起来很麻烦，所以$attrs就排上了用场，子组件可以这样写：
<grandson v-bind="$attrs"></grandson>
listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）
jsx写法
此处较多，详见“vue中使用jsx”&& || 灵活运用
a. :class="inputValue && 'hasInitial'"
如果inputValue值不为空，则class='hasInitial',为空，则class=''
b. initialValue = initialValue[0] || []
如果initialValue[0]不为空，则initialValue[0]，为空则[]
综合：&& 前true则后，前false则前
|| 前true则前，前false则后
- scss篇
- 变量基本构成：
$color:red; $ 变量声明符，color 变量名称，red 变量值 - 多个值取一个值nth（开始的下标不是0是1）
$divColor: orange green;
div{
background-color: nth($divColor,2)
}
- 传递多个参数
@mixin box-shadow($shodw...){
box-shadow:$shodow;
}
div{
@include box-shadow(-5px 0 5px orange,5px 0px 5px blue)
}
- 代替样式名称#{}
@mixin set-value($direction){
margin-#{$direction}:10px;
padding-#{$direction}:10px;
}
.input-box{
@include set-value(bootom);
}
这样可以用于公共样式书写
eg:
@mixin btn-bg-color($btnclass,$bgcolor){
.btn-#{$btnclass}{
background-color:$bgcolor
}
}
@include btn-bg-color('warning',#5cb85c)
- 默认值的设置及修改
@mixin transform($deg:20deg){
transform:rotate($deg);
-webkit-box-shadow:rotate($deg);
-moz-box-shadow:rotate($deg);
-o-box-shadow:rotate($deg);
-ms-box-shadow:rotate($deg);
}
.box{
@include transform(50deg);
}
-
混入mixin
a. 定义通用的样式，在页面中使用
_mixins.scss中：@mixin box-shadow($shodw...){ //传递多个参数 box-shadow:$shadow; }普通页面中：
.card{ height: 50px; @include box-shadow(-5px 0 5px orange,5px 0px 5px blue) }b.递归出样式，适用于针对不同状态，赋予不同颜色等等
@each $idx, $color in (1, $color-theme_blue), (2, $color-theme_orange), (3, $color-theme_red), (4, $color-theme_purple) { .legend-item--level#{$idx}{ color: $color; &::before{ background-color: $color; } } }c. 换肤功能
variables.scss:$bg-body-black: #000000; $bg-body-light: #FFFFFF; //设置不同皮肤时变量色值 :export { //这里导出，是用于在script中使用色值。特别是echarts中 lightBgBody:$bg-body-light; blackBgBody:$bg-body-black; }_mixins.scss:
@mixins bg_color($color,$background-color:'background-color'){ //此处为$background-color设置默认值‘background-color’，为了这个公共色值去设置color、border等其他属性 #{$background-color}: $color; //为属性设置变量 [data-theme='light'] & { #{$background-color}: $bg-body-light; } [data-theme='black'] & { #{$background-color}: $bg-body-black; } }
换肤按钮所在页面：
toggleTheme(type) {
window.document.documentElement.setAttribute('data-theme', type)
this.$store.dispatch('common/setTheme', {
theme: type
})
}
用到需要换肤的页面：
<script>
import colors from '@/styles/_modules/_variables.scss'
export default{
methods:{
changeColor(){
//换肤前的代码：
// const color = colors.lightBgBody
//换肤后的代码
const theme = this.$store.state.common.theme || 'light'
const color = theme === 'light' ? colors.lightBgBody : colors.blackBgBody
}
}
}
</script>
<style lang="scss" scoped>
.app-main{
//换肤前的代码：
//background-color: $bg-body-light;
//换肤后的代码
@include bg_color($bg-body-light)
}
</style>
- ResizeObserver对单个元素进行大小监听
const resizeOb= new ResizeObserver(entries => {
for(const entry of entries) {
console.log(entry)
}
})
resizeOb.observe(document.getElementById("test"))
//打印结果 {target: div#test, contentRect: DOMRectReadOnly}
通过实例化一个监听器，然后调用observe方法传入一个要执行监听的DOM元素或SVG元素，那么每次resize事件触发时都会执行ResizeObserver实例化时传入的回调函数，改回调函数默认会返回一个数组，数组里包含了每个被执行了监听器的元素及其可读信息，元素的拜访顺序也是监听器执行的顺序（对，实例化一个监听器，可多次执行observe方法对不同元素进行监听！）
ResizeObserver是在resize的过程中调用的，resize本身属于频繁触发的事件，在期间穿插太多逻辑其实对性能影响较大，如果只是想对某个元素变动后执行某个回调的话，建议最好搭配函数节流进行使用。
