vue 如何获取dom节点

在 Vue 中获取 DOM 节点有许多不同的方法，其中比较常用的方式有使用 ref、$refs、$el 和 document.getElementById。下面将分别介绍这几种方式：

1. 使用 ref

在 Vue 模板中，可以通过 ref 特性来给 DOM 元素或子组件添加引用，然后可以通过 this.$refs 来访问这些引用。例如：

```html

```

通过这种方式，我们可以获取到特定的 DOM 元素，并在需要的时候对其进行操作。

2. 使用 $el

在 Vue 实例中，可以通过 $el 来获取当前实例对应的 DOM 元素。例如：

```html

```

通过这种方式，我们可以直接获取到当前 Vue 实例对应的 DOM 元素，然后可以对其进行操作。

3. 使用 document.getElementById

在 Vue 中也可以直接使用原生的 document.getElementById 方法来获取指定 id 的 DOM 元素。例如：

```html

```

通过这种方式，我们可以直接使用原生的方法来获取指定 id 的 DOM 元素。

除了上述介绍的几种方式外，还可以使用 Vue 的生命周期钩子函数中的 created、mounted 和 updated 来获取 DOM 元素。此外，还可以通过使用第三方库如 jQuery 等来获取 DOM 元素。

总的来说，Vue 中获取 DOM 元素的方式有很多种，选择合适的方式取决于具体的场景和需求。在实际开发中，可以根据具体情况选择最合适的方法来获取 DOM 元素，并进行相应的操作。