Vue2 中如何获取 DOM

在 Vue2 的开发过程中，获取 DOM 元素是一个常见需求。虽然 Vue 倡导数据驱动的响应式编程，尽量避免直接操作 DOM，但某些场景下获取 DOM 仍是必要的，比如手动操作元素的样式、获取元素的尺寸等。以下将介绍几种在 Vue2 中获取 DOM 的方法。

使用 ref 属性

这是 Vue2 中获取 DOM 最常用的方式。在模板中给需要获取的 DOM 元素添加一个 ref 属性，例如：

<template>
  <div>
    <p ref="myParagraph">这是一个段落</p>
    <button @click="getParagraph">获取段落</button>
  </div>
</template>

<script>
export default {
  methods: {
    getParagraph() {
      const paragraph = this.$refs.myParagraph;
      console.log(paragraph.textContent);
    }
  }
}
</script>

在上述代码中，通过 this.$refs 可以访问到设置了 ref 的 DOM 元素，从而进行后续操作。

使用原生的 document 方法

虽然 Vue 推荐使用响应式数据，但在某些特殊情况下，仍然可以使用原生 JavaScript 的 document 方法来获取 DOM 元素。例如：

<template>
  <div id="myDiv">这是一个 div</div>
</template>

<script>
export default {
  mounted() {
    const div = document.getElementById('myDiv');
    console.log(div);
  }
}
</script>

不过，这种方式与 Vue 的数据驱动理念相悖，并且可能会导致代码的可维护性降低，因此应尽量少用。

使用 $el 属性

每个 Vue 实例都有一个 $el 属性，它指向 Vue 实例所挂载的 DOM 元素。如果想获取挂载点内的特定元素，可以结合 $el 和原生 DOM 操作方法。比如：

<template>
  <div>
    <span id="mySpan">这是一个 span</span>
  </div>
</template>

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

在实际开发中，需根据具体需求合理选择获取 DOM 的方法。使用 ref 属性获取 DOM 简单直观，符合 Vue 的开发风格；而原生 document 方法虽直接，但不利于代码维护。掌握这些方法，能让开发者在 Vue2 项目中更灵活地处理与 DOM 相关的操作，提升开发效率。