Vue是一個流行的JavaScript框架，它使用虛擬DOM來更新網頁的顯示，可以提高性能，同時也提供了一些方法來手動修改DOM元素。下面是一些常見的方法：

// 獲取元素
let element = document.getElementById('example')
// 修改文本內容
element.innerText = 'New Text'
// 修改元素屬性
element.setAttribute('src', 'image.jpg')
// 添加子元素
let newElement = document.createElement('div')
newElement.innerText = 'New Element'
element.appendChild(newElement)
// 刪除子元素
let child = element.querySelector('.child')
element.removeChild(child)

在Vue中，DOM修改應該通過數據綁定來完成，而不是直接操作DOM元素。這可以避免一些潛在的錯誤，例如在異步操作中修改元素可能會導致不一致的結果。讓我們看一個例子：

<!-- 綁定變量到文本內容 -->
<p>{{ message }}</p>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
changeMessage: function() {
// 修改變量的值
this.message = 'New Message'
}
}
})
</script>

在這個例子中，我們使用雙花括號將message變量綁定到了文本內容中。當我們調用changeMessage方法時，實際上是直接修改了變量的值，而不是通過操作DOM來達到修改顯示的效果。Vue會自動檢測數據變化并更新對應的DOM元素，我們不需要手動操作。