Vue中获取DOM的多种方式有哪些总结？

本文共计1020个文字，预计阅读时间需要5分钟。

目录 + Vue获取DOM的方法 + 1. 使用DOM API直接找元素 + 2. 使用refs + 3. 使用自定义指令 + Vue3.0获取虚拟DOM方法 + Vue获取DOM的方法 + Vue实现了MVVM模型，将数据和表现分离，只需更新数据就能实现更新表现

目录

• Vue获取DOM的方法
• 1、使用DOM API直接找元素
• 2、refs
• 3、使用自定义指令
• vue3.0获取虚拟dom方法

Vue获取DOM的方法

Vue实现了MVVM模型，将数据和表现进行了分离，我们只需要更新数据就能使DOM同步更新，但是某些情况下，还是需要获取DOM元素进行操作

本文主要介绍几种在Vue中获取DOM元素的方法

1、使用DOM API直接找元素

<script>     ...     mounted () {         let elm = this.$el.querySelector('#id')     } </script>

Vue组件在patch阶段结束时会把this.$el赋值为挂载的根dom元素，我们可以直接使用$el的querySelector, querySelectorAll等方法获取匹配的元素。