vue如何获取指定元素

当我们使用Vue来进行开发时，有时会需要获取指定元素进行进一步操作。Vue提供了多种方式来获取指定元素，下面进行详细讲解。

通过ref获取指定元素

在Vue中通过给元素添加ref属性来获取指定元素。在Vue实例中可以通过this.$refs来访问元素，$refs的值是一个对象，对象的属性名是元素的ref属性值，属性值是元素本身。举个例子：

<template>
  <div>
    <input type="text" ref="myInput" />
    <button @click="handleClick">获取input的value</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$refs.myInput.value)
    }
  }
}
</script>

上述代码中，我们在input元素上添加了ref属性，并且命名为'myInput'，在Vue实例中，我们通过this.$refs.myInput.value来获取input元素的value值。

通过$el获取元素

在Vue实例中可以通过this.$el来访问当前组件的根元素。如果当前组件没有根元素，则$el为undefined。举个例子：

<template>
  <div>
    <button @click="handleClick">获取根元素</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$el)
    }
  }
}
</script>

上述代码中，我们通过this.$el来访问根元素，这里的根元素就是div。

除了上述两种方式获取指定元素外，我们还可以通过常规的DOM操作获取元素。比如getElementById，querySelector等方法。不过这些方法获取的元素并不能直接跟Vue实例关联起来，需要手动进行后续操作。

综上所述，Vue提供了多种方式来获取指定元素，开发者可以根据项目需求选择最合适的方式。