vue中获取dom元素

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

1. 使用ref属性获取DOM元素

在模板中使用ref属性标识DOM元素，然后在Vue实例中通过this.$refs获取DOM元素的引用。示例代码如下：

<template>
  <div ref="myDiv">Hello World</div>
</template>

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

2. 使用$el属性获取DOM元素

在Vue实例中，通过$el属性可以获取Vue实例所挂载的DOM元素。示例代码如下：

<template>
  <div>Hello World</div>
</template>

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

3. 使用$nextTick方法获取DOM元素

在Vue中，有些DOM元素需要在渲染后才能获取到，此时可以使用$nextTick方法，该方法会在DOM渲染完成后执行回调函数，可以在回调函数中获取DOM元素。示例代码如下：

<template>
  <div ref="myDiv">Hello World</div>
</template>

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