前端知识点

深浅拷贝的区别

//浅拷贝 ，表面上分开了。实际上还是同一个对象。
let a = [1, 2, 3];
let b = a;
b[1] = 444;
console.log("aaaaaaaaa,", a);
console.log("bbbbbbbbb,", b);

//深拷贝，实际上是2个对象。
let aa = [1, 2, 3];
let bb= '';
//深拷贝
bb = JSON.parse(JSON.stringify(aa));
bb[1] = 444;
console.log("aaaaaaaaa,", aa);
console.log("bbbbbbbbb,", bb);

重要人物去世之后，网站变成灰色

filter: grayscale(100%);

Vue示例

< style scoped>
    h1 {
    border: 1px red solid;
    box-sizing: border-box;
    background-clip: content-box;
}
< /style>
    < template>
    < h1>{{ msg }}< /h1>
    < h1>{{ nums == 4 ? '11' : '22' }}< /h1>
    < h1>{{ b.map(value => (value + 1)) }}< /h1>

    < div class="card">
        < button type="button" @click="count++">count is {{ count }}< /button>
        < /div>
        < /template>
        < script setup lang="ts">
        import {ref} from 'vue'

        defineProps< { msg: string }>()

        const count = ref(0)
        const nums: number = 4
            const b: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
                < /script>

SCSS编写媒体查询代码

$bs: (
    'phone': (
        320px,
        480px
    ),
    'pad': (
        481px,
        768px
    ),
    'notebook': (
        769px,
        1024px
    ),
    'desktop': (
        1025px,
        1200px
    ),
    'tv': 1201px
);

@mixin respond-to($b) {

    $bp: map-get($bs, $b);


    @if type-of($bp) == 'list' {

        $min: nth($bp, 1);
        $max: nth($bp, 2);

        @media (min-width: $min) and (max-width: $max) {
            @content;
        }


    } @else {
        @media (min-width: $bp) {
            @content;
        }
    }
}

.box {

    width: 100px;
    height: 100px;


    @include respond-to('phone') {
        background: red;
    }


    @include respond-to('pad') {
        background: green;
    }
}

IDEA配置SASS

1、yarn安装scss
    yarn global add sass
2、idea配置scss
    C:\Users\Mr.Zhang\AppData\Local\Yarn\bin\sass
    $FileName$:$FileNameWithoutExtension$.css --style compressed