在Web開發過程中，獲取頁面元素的操作是非常常見的。Vue.js作為一套漸進式JavaScript框架，也提供了獲取元素的方式。Vue.js獲取元素的方式有兩種：1.使用ref屬性；2.使用$refs屬性。

使用ref屬性

<template>
<div>
<input type="text" ref="text">
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.text);
}
}
</script>

在上述代碼中，我們在input標簽中使用了ref屬性，并將其命名為text。在mounted鉤子函數中，我們可以通過this.$refs.text獲取該元素。通過這種方式可以方便的獲取到DOM元素并做出相應的操作。

使用$refs屬性

<template>
<div>
<input type="text" ref="text">
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs['text']);
}
}
</script>

與使用ref屬性不同的是，在$refs中可以傳入一個字符串數組，即可以使用屬性名和數字的形式，如this.$refs['text'][0]。$refs屬性可以訪問組件在其模板中注冊的所有子組件及元素。這種方式可以在多個元素有相同標識符時使用，并且可以避免一個組件有多個ref屬性。

總結

Vue.js作為一套漸進式JavaScript框架，提供了多種獲取元素的方式。通過使用ref屬性和$refs屬性，我們可以輕松的訪問頁面中的元素。不同的方式適用于不同的情況和需求，我們可以根據實際的開發需求選擇合適的方式。