【Vue】学习笔记-插槽、DOM、过滤器

插槽

让我们更灵活地使用组件，增强组件的扩展性。开发或使用UI库，了解组件制作原理。ElementUI基本基于插槽实现。例如实现按钮中文本的自定义，可以通过属性传值，也可以通过插槽来实现。

App.vue

<template>
  <div class="app">
    <my-button >提交</my-button>
    <my-button >注册</my-button>
  </div>
</template>

<script>
import MyButton from "./components/MyButton.vue"
export default {
  components:{
    MyButton
  }
}
</script>

MyButton

<template>
  <div>
      <button>
          <slot></slot>
      </button>
  </div>
</template>

<script>
export default {
 
}
</script>

具名插槽：组件
Layout

<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>

<script>
export default {

}
</script>

App.vue

<template>
  <div class="app">
    <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>
</template>

<script>
import Layout from "./components/Layout"
export default {
  components:{
    Layout
  }
}
</script>

DOM

DOM：文档对象模型
DOM节点：元素节点 属性节点 文本节点

Vue通过虚拟DOM来实现DOM操作

代码如下：

<template>
  <div class="app">
    <div ref="box">hello world</div>
  </div>
</template>

<script>

export default {
  mounted() {
    // let box = document.querySelector('#box');
    // let style=window.getComputedStyle(box);
    // console.log(style.height)
    let box = this.$refs.box
    let style = window.getComputedStyle(box);
    console.log(style.height)
  },
}
</script>

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

过滤器

通过固定算法重新组织数据
过滤器算法是每一个字符串变成一个个字母

<template>
  <div id="app">
    <h1>{{message | mySplit}}</h1>
    <h1>{{title | mySplit}}</h1>
  </div>
</template>

<script>

export default {
  filters:{
    mySplit(value){
      return value.split("").join();
    }
  },
  data() {
    return {
      message:"hello",
      title:"world"
    }
  },
}
</script>

举例：日期格式化（过滤器可以复用）

<template>
  <div id="app">
   <h1>{{date | dataFormate}}</h1>
   <h1>{{date1 | dataFormate}}</h1>
  </div>
</template>

<script>

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

总结

1.插槽：通过让组件更灵活，更易扩展
2.获取真实DOM ：ref
3.过滤器：通过固定算法重新组织数据