学习笔记-插槽、DOM、过滤器| 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第5天
插槽
让我们更灵活地使用组件，增强组件的扩展性。开发或使用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.过滤器：通过固定算法重新组织数据
