當Vue.js掛載到DOM元素上之后，我們可以通過Vue實例來改變頁面的數據和狀態。在Vue中，我們可以通過指令來映射DOM元素的屬性、事件和其他屬性，從而實現頁面和數據的雙向綁定。

// 定義一個Vue實例
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
// 在掛載之后，我們可以通過Vue實例來修改數據，從而改變頁面
app.message = 'Goodbye Vue.js!'

除了修改Vue實例中的數據之外，我們還可以在Vue實例的生命周期函數中執行一些操作。在mounted函數中，Vue實例已經被掛載到DOM元素上，頁面上的數據已經和Vue實例進行了綁定，我們可以在這個時候進行一些DOM相關的操作。

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
},
mounted: function () {
// 修改DOM元素的樣式
this.$el.style.color = 'blue';
}
})

除了在Vue實例的生命周期函數中進行操作之外，我們還可以通過一些其他的方式來改變Vue實例和頁面上的數據。例如，我們可以通過v-on指令來監聽DOM元素上的事件，當事件觸發時，執行Vue實例中的函數。

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
},
methods: {
sayHello: function () {
alert('Hello Vue.js!');
}
}
})
// 使用v-on指令監聽按鈕的點擊事件
<button v-on:click="sayHello">Say Hello</button>

除了監聽DOM元素上的事件之外，我們還可以通過v-bind指令來綁定DOM元素的屬性和Vue實例中的數據。例如，我們可以通過v-bind指令來綁定圖像的src屬性，使其根據Vue實例中的數據動態更改。

var app = new Vue({
el: '#app',
data: {
imageUrl: 'image.jpg',
}
})
// 使用v-bind指令綁定圖像的src屬性
<img v-bind:src="imageUrl">

總之，Vue.js提供了非常便捷的方式來實現數據和頁面的雙向綁定。通過Vue實例中的數據和指令，我們可以輕松地改變頁面的狀態和數據，實現非常靈活的交互效果。