通過添加事件，我們可以讓Vue中的頁面元素實現交互性和可操作性。Vue的事件指令可以讓我們很容易地為觸發DOM元素上的事件，綁定處理函數。通常情況下，我們會將事件綁定到指令所在的DOM元素上。

HTML代碼示例
Add
{{ count }}
Vue.js 代碼示例
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
add: function () {
this.count++
}
}
})

上述代碼中，我們使用了v-on指令，它可以用來監聽DOM事件。在這個例子中，我們監聽了按鈕上的“click”事件，并綁定了一個add方法。當點擊按鈕時，add方法會被觸發，把”count”數據值加1，并更新視圖。

我們還可以使用簡化的語法來實現事件監聽。v-on指令的縮寫為@，可以使代碼更加簡潔易讀。看下面的代碼，與上一個例子等價：

HTML代碼示例
Add
{{ count }}
Vue.js 代碼示例
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
add: function () {
this.count++
}
}
})

除了可以監聽DOM事件，Vue還提供了自定義事件的機制。我們可以使用Vue實例的$on方法來監聽自定義事件，使用$emit方法來觸發自定義事件。

Vue.js 代碼示例
// 定義一個自定義事件
Vue.component('my-component', {
template: 'Click me',
methods: {
handleClick: function () {
// 觸發自定義事件
this.$emit('custom')
}
}
})
// 創建Vue實例
new Vue({
el: '#app',
methods: {
// 監聽自定義事件
doSomething: function () {
console.log('custom event emitted')
}
},
mounted: function () {
// 在Vue實例上監聽自定義事件
this.$on('custom', this.doSomething)
}
})

上述代碼中，我們定義了一個名為“my-component”的組件，它包含一個按鈕，點擊按鈕時，會觸發一個自定義事件“custom”，在Vue實例上通過$on方法監聽該事件，事件觸發時會執行doSomething方法。

總的來說，Vue提供了非常方便的事件綁定和自定義事件機制，使得我們在構建Vue應用時，擁有更好的交互性和可操作性。