8、插槽、DOM操作（虚拟DOM）、过滤器（fliter）

1、插槽slot

1. 创建更加灵活，易扩展，自定义button，table等
2. 开发或使用UI库，了解组件制作原理
3. 后续的ElementUI的组件，基本都是基于插槽实现的

    <!--  案例二  -->
    <div class="case2">
      <h1>案例二</h1>
      <!-- 插槽 -->
      <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>
      </Layout>
    </div>

2、DOM（文档对象模型）

DOM
DOM	文档对象模型
DOM节点	元素节点、属性节点、文本节点
jQuery	通过操作DOM实现页面的效果

3、Vue中的DOM是虚拟的（this.$refs）

• 1、Vue中的数据变化，并不是直接改变DOM，而是通过改变虚拟DOM，并计算变更差异，进而修改DOM中有变化的内容
• 2、Vue应用开发过程中，大部分情况是不需要获取真实的DOM，不用把jQuery的思想带到Vue中

  // 2、模板加载
<div ref="box">Hello world!</div>
  mounted() {
    console.log("这是mounted函数的内容");
    // 获取真实DOM
    // let box = document.querySelector(".case2 div");
    // let style = window.getComputedStyle(box);
    // console.log(style.height);
    // 获取虚拟DOM
    let box = this.$refs.box;
    let style = window.getComputedStyle(box);
    console.log(style.height);
  },

4、过滤器（通过固定算法重新组织数据）

    <!--  案例三  -->
    <div class="case3">
      <h1>案例三</h1>
      <p>过滤器，拆分字符串，日期格式</p>
      <p>{{ message | mySplit }}</p>
      <p>{{ date | dateFormate }}</p>
    </div>
  // 案例三：过滤器，拆分字符串，日期格式
  filters: {
    mySplit(value) {
      return value.split("").join();
    },
    dateFormate(value) {
      let data = new Date(value);
      let year = data.getFullYear();
      let month = data.getUTCMonth() + 1;
      let day = data.getDate();
      return `${year}年${month}月${day}日`;
    },
  },

5、源代码

<template>
  <div id="app">
    <!--  案例一  -->
    <div class="case1">
      <h1>案例一</h1>
      <div v-if="loading">
        <p>异步加载数据正在进行中...</p>
      </div>
      <div v-if="!loading">
        <p>异步加载数据完成！</p>
        <ul v-for="(value, index) of userList" :key="index">
          <li>{{ value }}</li>
        </ul>
      </div>
    </div>
    <!--  案例二  -->
    <div class="case2">
      <h1>案例二</h1>
      <p>通过this.$refs获取数据</p>
      <div ref="box">Hello world!</div>
    </div>
    <!--  案例三  -->
    <div class="case3">
      <h1>案例三</h1>
      <p>过滤器，拆分字符串，日期格式</p>
      <p>{{ message | mySplit }}</p>
      <p>{{ date | dateFormate }}</p>
    </div>
  </div>
</template>

<script>
export default {
  // 1、初始化数据
  created() {
    console.log("这是created函数的内容");
    this.getUserList();
    this.loading = false;
  },
  // 2、模板加载
  mounted() {
    console.log("这是mounted函数的内容");
    // 案例二：通过this.$refs获取数据
    // 获取真实DOM
    // let box = document.querySelector(".case2 div");
    // let style = window.getComputedStyle(box);
    // console.log(style.height);
    // 获取虚拟DOM
    let box = this.$refs.box;
    let style = window.getComputedStyle(box);
    console.log(style.height);
  },
  data() {
    return {
      message: "Hello world",
      date: "2022-3-3",
      userList: [],
      loading: true,
    };
  },
  methods: {
    getUserList() {
      // 案例一
      // 3、通过计时器，模拟一个ajax异步加载数据
      setTimeout(() => {
        this.userList = ["jasmine", "jamsine_qiqi", "qiqi"];
      }, 3000);
    },
  },
  // 案例三：过滤器，拆分字符串，日期格式
  filters: {
    mySplit(value) {
      return value.split("").join();
    },
    dateFormate(value) {
      let data = new Date(value);
      let year = data.getFullYear();
      let month = data.getUTCMonth() + 1;
      let day = data.getDate();
      return `${year}年${month}月${day}日`;
    },
  },
};
</script>

<style>
#app {
  display: flex;
  justify-content: space-around;
}
.case2 div {
  display: block;
  width: 100px;
  height: 100px;
  background-color: antiquewhite;
}
</style>