Vue基础（五）——插槽、DOM操作、过滤器

一、插槽

1、介绍

插槽能让我们更灵活地使用组件，增强组件的扩展性。

2、案例

（1）MyLayout.vue：

在文件中写上3个插槽：

<template>
    <div>
        <div class="header">
            <slot name="header"></slot>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<slot name = "header"></slot>：这个就是插槽。 

（2）App.vue：

<template>
    <my-layout>
        <template v-slot:header>
            <h1>Header</h1>
        </template>
        <template v-slot:content>
            <h1>Content</h1>
        </template>
        <template v-slot:footer>
            <h1>Footer</h1>
        </template>
    </my-layout>
</template>

<script>
import MyLayout from "./components/MyLayout.vue";
export default {
    components: {
        MyLayout,
    },
};
</script>

使用<template>标签绑定插槽。 

（3）显示：

 （4）查看F12的元素

 发现，h1标签已经放到插槽中了。

3、插槽在项目中的作用

1、可以创建更加灵活、易扩展组件：自定义button、自定义table等。

2、开发或使用UI库，有很多漂亮的组件库，了解插槽就了解了：组件的制作原理。

后续学习的ElementUI的组件，基本都是基于插槽实现的。

二、DOM操作

1、虚拟DOM 

Vue中的数据变化，不是通过操作DOM来实现的。

而是使用js，模拟了一个虚拟DOM。

虚拟DOM和真实DOM作比较，发现差异，更新差异。

2、两种方式获取dom：

<template>
    <div id="box1" ref="box2">
        hello vue
    </div>
</template>

<script>
export default {
    mounted() {
        // 原生js获取dom：
        let box1 = document.querySelector("#box1");
        let width1 = window.getComputedStyle(box1).width;
        console.log("width1:" + width1);

        // vue获取dom：
        let box2 = this.$refs.box2;
        let width2 = window.getComputedStyle(box2).width;
        console.log("width2:" + width2);
    },
};
</script>

<style>
#box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>

window.getComputedStyle()：获取元素的style。 

控制台输出如下： 

３、总结

1、主要讲解如何获取真实DOM，进一步操作请参照DOM文档。

2、在Vue的开发过程中，一般不需要操作真实DOM。 不要把jQuery的思想带到Vue里面来。

三、过滤器

1、过滤器（filters）介绍

<template>
    <div>
        <h1>{{message|mySplit}}</h1>
    </div>
</template>

<script>
export default {
    filters: {
        mySplit(value) {
            // 以逗号分割为数组,又将数组拼接为字符串
            return value.split("").join();
        },
    },
    data() {
        return {
            message: "hello",
        };
    },
};
</script>

显示：

2、案例——时间格式化

<template>
    <div>
        <h1>{{date1|dateFormat}}</h1>
        <h1>{{date2|dateFormat}}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            date1: "2020-2-2",
            date2: "2022-5-1",
        };
    },
    filters: {
        dateFormat(value) {
            let date = new Date(value);
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let d = date.getDate();
            return `${year}年${month}月${d}日`;
        },
    },
};
</script>