首先，獲取DOM元素是指在頁(yè)面中動(dòng)態(tài)獲取或操作DOM元素，vue中如何獲取DOM元素呢？vue提供了兩種方式獲取DOM元素，一種是通過(guò)ref屬性來(lái)獲取DOM元素，另一種是通過(guò)$refs來(lái)獲取DOM元素。

下面我們介紹一下第一種方式：通過(guò)ref屬性來(lái)獲取DOM元素，ref是vue在模板中提供的一個(gè)特殊屬性，用來(lái)為某個(gè)元素注冊(cè)一個(gè)唯一標(biāo)識(shí)符。我們可以使用$refs屬性訪問(wèn)這個(gè)元素，進(jìn)而操作DOM。

<template>
<div>
<input type="text" ref="input">
<button @click="handleClick">click me</button>
</div>
</template>
<script>
<!-- 在vue實(shí)例中編寫(xiě)以下代碼 -->
methods: {
handleClick() {
console.log(this.$refs.input.value);
}
}
</script>

上述代碼中，我們給input元素設(shè)置了ref屬性為"input"，然后在vue實(shí)例中通過(guò)this.$refs.input獲取到了該元素，并使用value屬性獲取到了輸入框中的值。

接下來(lái)介紹第二種方式：通過(guò)$refs來(lái)獲取DOM元素，$refs是vue實(shí)例內(nèi)部自己維護(hù)的一個(gè)對(duì)象，包括了所有擁有ref屬性的元素。我們可以通過(guò)$refs來(lái)獲取某個(gè)元素，并進(jìn)行DOM操作。

<template>
<div>
<input type="text" ref="input">
<button @click="handleClick">click me</button>
</div>
</template>
<script>
<!-- 在vue實(shí)例中編寫(xiě)以下代碼 -->
methods: {
handleClick() {
console.log(this.$refs["input"].value);
}
}
</script>

上述代碼中，我們同樣給input元素設(shè)置了ref屬性為"input"，然后在vue實(shí)例中通過(guò)this.$refs["input"]獲取到了該元素，并使用value屬性獲取到了輸入框中的值。

需要注意的是，在某些特定的場(chǎng)景下，我們需要在DOM渲染完成后再進(jìn)行DOM操作，此時(shí)可以使用vue提供的mounted生命周期鉤子函數(shù)。

<template>
<div>
<h1 ref="title">{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!"
}
},
mounted() {
console.log(this.$refs.title.innerText);
this.$refs.title.style.color = "red";
}
};
</script>

上述代碼中，我們給h1元素設(shè)置了ref屬性為"title"，然后在mounted生命周期鉤子函數(shù)中使用this.$refs.title獲取到了該元素，并分別使用innerText屬性獲取到了元素中的文本內(nèi)容，以及style屬性修改了元素的字體顏色。

綜上，vue提供的兩種獲取DOM元素的方式分別是通過(guò)ref屬性和$refs對(duì)象來(lái)實(shí)現(xiàn)，可以根據(jù)實(shí)際場(chǎng)景選擇合適的方式。同時(shí)，在進(jìn)行DOM操作時(shí)，需要注意在DOM渲染完成后再進(jìn)行操作。