Vue 是一個流行的 JavaScript 框架，用于創建響應式的 Web 應用程序。在 Vue 中獲取目標元素是一個非常重要的任務。在本文中，我們將探討如何在 Vue 中獲取目標元素，以及為什么它如此重要。

在 Vue 中獲取目標元素的主要方法是使用 ref 屬性。Vue 的 ref 屬性允許我們在組件中使用 $refs 對象來引用組件中的元素。以下是一個示例：

<template>
<div>
<input v-model="message" ref="inputBox" />
<button @click="handleClick">Submit</button>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
methods: {
handleClick() {
console.log(this.$refs.inputBox.value)
}
}
}
</script>

在上面的示例中，我們創建了一個 input 元素，并在其中添加了 ref 屬性。我們還使用 @click 事件處理程序來使用 $refs 對象引用輸入框（inputBox）。在 handleClick 方法中，我們可以訪問 input 元素的 value 屬性。

Vue 獲取目標元素的另一種方法是使用 $event 對象。 $event 是一個包含當前事件屬性的特殊對象。以下是一個示例：

<template>
<div>
<button @click="handleClick($event)">Submit</button>
</div>
</template>
<script>
export default {
methods: {
handleClick(event) {
console.log(event.target)
}
}
}
</script>

在上面的示例中，我們創建了一個 button 元素，并在其中添加了 @click 事件處理程序。在 handleClick 方法中，我們可以使用 event.target 屬性來訪問目標元素。

在 Vue 中獲取目標元素是一個非常重要的任務，因為它允許我們訪問和操作頁面上的元素。使用 ref 屬性和 $event 對象，我們可以輕松地獲取目標元素，并對其進行操作。