在Vue中，我們常常需要通過id來獲取某個DOM元素或者給DOM元素設(shè)置屬性和事件。Vue提供了兩種方式去獲取DOM元素的id，分別是通過refs和$el。

首先介紹refs。refs是Vue提供的引用方式，我們可以通過refs屬性獲取DOM元素或者組件實例。refs屬性是一個對象，它的屬性名是我們給元素或者組件實例設(shè)置的名稱，屬性值則是這個元素或者組件實例。我們可以把它看作一個對象映射表，將每個元素或者組件實例與它的引用名稱一一對應(yīng)。

<template>
<div>
<input type="text" ref="inputBox" />
<button @click="handleClick">點擊</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
const inputBox = this.$refs.inputBox;
console.log(inputBox.value);
}
}
}
</script>

上面是一個示例，我們在模板中為input元素設(shè)置了ref屬性為inputBox，我們在handleClick方法中通過this.$refs.inputBox獲取到了這個元素并且打印了它的值。

下面我們介紹第二種方式，也是Vue官方推薦的方式，就是通過$el獲取DOM元素。$el是Vue實例的一個屬性，它指向Vue實例所管理的根元素。

<template>
<div id="myDiv">
我是div元素
</div>
</template>
<script>
export default {
mounted() {
const myDiv = this.$el.querySelector('#myDiv');
console.log(myDiv);
}
}
</script>

上面是一個示例，我們在模板中為div元素設(shè)置了一個id為myDiv，我們在mounted鉤子中通過this.$el.querySelector('#myDiv')獲取到這個元素。

總結(jié)一下，獲取DOM元素的id有兩種方式：一種是通過refs獲取，另一種是通過$el獲取。兩種方式各有優(yōu)缺點，具體使用時需要根據(jù)實際情況進行選擇。