Vue基础--插槽、DOM操作、过滤器

祭夜醉美

已于 2022-04-17 11:46:34 修改

阅读量423

点赞数

分类专栏： # Vue 文章标签：前端

于 2022-04-17 11:35:07 首次发布

本文链接：https://blog.csdn.net/qq_44665456/article/details/124226563

版权

8 篇文章 1 订阅

订阅专栏

本文介绍了Vue中组件的灵活性，通过插槽实现自定义内容，增强组件扩展性，例如用于创建自定义button和table。同时，探讨了DOM操作，包括虚拟DOM的概念，如何获取元素样式和宽度，以及避免过度依赖真实DOM。此外，还讲解了过滤器的使用，如日期格式化，展示了数据处理的方法。

摘要由CSDN通过智能技术生成

一、插槽
让我们更灵活地使用组件，曾庆组件的扩展性

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

	<.div>

</template>

具名插槽
在这里插入图片描述

插槽在项目中的应用

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

二、DOM操作

DOM：文档对象模型
DOM节点：元素节点、属性节点、文本节点
通过操作 DOM 实现页面效果：jQuery
$（“h1”).text(“hello world”)

1、虚拟DOM
Vue中的数据变化，并不是直接改变 DOM，而是通过改变虚拟 DOM，并计算变更差异，进而修改 DOM 中有变化的内容
在这里插入图片描述
2、获取元素样式

window.getComputedStyle(element).width

3、获取元素宽度

export default {
	mounted(){
		let h1 = this.$refs.title;
		let width = window.getComputedStyle(h1).width
		console.log(width);
		}
}

在这里插入图片描述
4、获取真实 DOM 总结

主要讲解如何获取真实 DOM，进一步操作请参照 DOM 文档
Vue 应用开发的过程中，大部分情况是不需要获取真实 DOM 的。不要把 jQuery 的思想带入到 Vue 中来

三、过滤器
通过固定算法重新组织数据

filters:{
	split(str){
		return str.split("").join(); 	
	}
}

在这里插入图片描述
案例：格式化日期
dataFormate: 将 “2020-1-1” 转换成 2020年1月1日

知识点回顾：

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

关注

专栏目录