vue中获取dom元素

在 Vue 中获取 DOM 元素有以下几种方式：

1. $refs：在模板中使用 ref 属性给元素命名，然后在 Vue 实例中通过 $refs 属性获取元素。

<template>
  <div ref="myDiv">Hello Vue!</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv);
  }
};
</script>

2. $el：在 Vue 实例中使用 $el 属性获取根元素。

<template>
  <div>Hello Vue!</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$el);
  }
};
</script>

3. document.querySelector：在 Vue 实例中使用 document.querySelector 方法获取元素。

<template>
  <div>Hello Vue!</div>
</template>

<script>
export default {
  mounted() {
    console.log(document.querySelector('div'));
  }
};
</script>

注意：在 Vue 中尽量避免直接操作 DOM 元素，而是通过数据驱动视图的方式进行操作。