在我們的Web應用程序或網站中，經常需要根據用戶的行為或者數據進行一些實時的DOM操作，Vue.js是一個非常強大的框架，它可以幫助開發者以更加簡單的方式完成這些操作。Vue提供了很多工具和API來訪問、操作和監聽這些DOM元素。

主要有以下三種方式來獲取DOM元素：

1. document.getElementById()
2. document.querySelector() and querySelectorAll()
3. $refs

下面我們來一一介紹這些方式的使用方法。

1. 使用document.getElementById()

這種方法最常見也最基礎的一種方法，它通過使用id屬性值來獲取對應的DOM元素。在Vue中同樣可以使用這種方法，不過Vue執行完畢后，頁面元素是具有可變性的，因此我們在編寫Vue代碼時，需要保證元素已經載入。

var app = new Vue({
el: '#app',
mounted: function () {
var el = document.getElementById('component-item');
}
})

2. 使用document.querySelector()和querySelectorAll()

querySelector()方法接收作為參數的選擇器查詢數組中的第一個元素，并返回該元素，如果匹配的元素不存在，則返回null。

var app = new Vue({
el: '#app',
mounted: function () {
var el = document.querySelector('.component-class');
}
})

反之，querySelectorAll()方法則會返回所有選擇器查詢數組中匹配的元素，而不是只返回第一個。

var app = new Vue({
el: '#app',
mounted: function () {
var els = document.querySelectorAll('.component-class');
}
})

3. 使用$refs方式

$refs式Vue提供的一個用來注冊標識符供后面進行操作的屬性。在Vue實例創建時，其所有的子組件實例引用都被加入到了$refs對象中，我們可以通過這個對象來訪問這些子組件引用。我們可以在組件的標簽上添加ref="componentItem"屬性，然后在組件的mounted鉤子函數中通過this.$refs.componentItem即可訪問到該組件。

var app = new Vue({
el: '#app',
mounted: function () {
var el = this.$refs.componentItem;
}
})

以上就是Vue中獲取頁面元素的三種方式，我們可以根據實際場景選擇相應的操作。