Vue中獲取頁面中的元素就像普通的JavaScript一樣，可以使用文檔對象模型（DOM）和Vue的模板渲染功能。DOM允許你動態地修改HTML和CSS，通過選擇元素和獲取元素屬性和值。而在Vue中，你可以通過模板和Vue實例方法來獲取元素。

首先，我們來看一下如何使用DOM來獲取元素。在Vue中，你可以使用$refs這個屬性來訪問DOM元素。例如，你可以在模板中給這個元素設定一個ref屬性，在Vue實例中添加該元素的引用，之后就可以使用它來訪問該元素了。

<template>
<div>
<h1 ref="title">Hello World!</h1>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.title.innerText);
}
}
</script>

在這個例子中，我們定義了一個ref為"這是標題"的<h1>元素，然后我們在mounted鉤子函數中得到了這個元素的innerText。注意，$refs只有在該組件被掛載后才能被訪問到。

Vue還提供了許多其他的實例方法來獲取元素，包括querySelector()、querySelectorAll()和getElementById()等。使用這些方法可以在組件的生命周期函數中獲取元素并對它們進行操作。例如，在created()生命周期函數中，你可以使用querySelector()方法來選取指定的元素：

<template>
<div>
<input type="text" name="username">
</div>
</template>
<script>
export default {
created() {
const input = this.$el.querySelector('input[name="username"]');
input.setAttribute('placeholder', '請輸入用戶名');
}
}
</script>

在這個例子中，我們使用querySelector()方法找到了name為“username”的輸入域，并設置它的占位符placeholder屬性。注意，在created()生命周期函數中，模板還沒有渲染到DOM中，所以我們使用this.$el可以得到組件的頂級元素。