Vue如何获取Dom

最新推荐文章于 2025-06-27 05:24:08 发布

原创最新推荐文章于 2025-06-27 05:24:08 发布 · 822 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端面试题专栏收录该内容

50 篇文章

订阅专栏

在Vue中获取DOM元素可以通过几种方法：1、使用模板引用（ref），2、使用事件绑定，3、使用生命周期钩子。这些方法各有优缺点，适用于不同的场景。本文将详细介绍这些方法的使用方式及其适用场景，帮助你更好地理解和应用它们。

一、使用模板引用（ref）

模板引用是Vue中最常用的获取DOM元素的方法。通过在元素上添加ref属性，我们可以在组件实例中通过this.$refs访问到这些元素。

步骤：
- 在模板中为目标DOM元素添加ref属性。
- 在组件实例的mounted钩子中，通过this.$refs访问该元素。

<template>

  <div>


    <input ref="myInput" type="text" />


  </div>


</template>


<script>


export default {


  mounted() {


    this.$refs.myInput.focus();


  }


}


</script>

适用场景：
- 需要在组件挂载后立即对某个DOM元素进行操作。
- 需要频繁访问某个DOM元素。

二、使用事件绑定

在某些情况下，我们可能需要在事件触发时获取DOM元素。这时可以使用事件绑定的方法，通过事件对象获取目标元素。

步骤：
- 在模板中为目标元素绑定事件处理函数。
- 在事件处理函数中，通过事件对象访问目标元素。
示例：

<template>

  <button @click="handleClick">Click me</button>
</template>


<script>

export default {

  methods: {


    handleClick(event) {


      const button = event.target;


      button.style.backgroundColor = 'blue';


    }


  }


}

</script>

适用场景：
- 需要在用户交互时获取目标元素。
- 需要根据事件对象的属性进行操作。

三、使用生命周期钩子

在Vue的生命周期钩子函数mounted或updated中，你可以直接使用原生JavaScript方法操作DOM。虽然这种方法在某些情况下很方便，但它并不是最佳实践，因为它违背了Vue的响应式原理。如果可能，尽量使用Vue的方法来处理DOM操作。

示例：

<template>
  <div id="app">Hello, Vue!</div>
</template>
 
<script>
export default {
  mounted() {
    const el = document.getElementById('app'); // 或者使用querySelector等其他DOM选择方法
    console.log(el); // 直接操作DOM元素
  }
}
</script>