Vue 事件
Vue 中的事件處理是透過 v-on 指令完成的，這樣我們就可以在例如點選按鈕時觸發一些操作。
事件處理是指為 HTML 元素設定在發生特定事件時執行特定程式碼。
Vue 中的事件使用起來非常簡單，並且可以使我們的頁面真正響應。
Vue 的**方法**是在事件發生時可以設定執行的程式碼。
使用 v-on **修飾符**，您可以更詳細地描述如何響應事件。
開始事件處理
讓我們從一個例子開始，演示如何透過點選按鈕來統計森林中的駝鹿數量。
我們需要
- 一個按鈕
v-on在 <button> 標籤上監聽 'click' 事件- 增加駝鹿數量的程式碼
- Vue 例項中的一個屬性（變數）來儲存駝鹿的數量
- 雙大括號
{{}}來顯示增加的駝鹿數量
示例
點選按鈕，森林裡的駝鹿數量增加一隻。每次點選按鈕，count 屬性都會增加。
<div id="app">
<img src="img_moose.jpg">
<p>{{ "Moose count: " + count }}</p>
<button v-on:click="count++">Count moose</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
注意： Vue 的一個好處是 <p> 標籤中的駝鹿數量會自動更新。使用純 JavaScript，我們需要透過額外的程式碼行來更新使用者看到的數字。
活動
有很多事件可以用作觸發程式碼執行的觸發器，其中最常見的有：'click'、'mouseover'、'mouseout'、'keydown' 和 'input'。
有關可用的事件列表，您可以訪問我們的 HTML DOM 事件頁面。
'v-on'
v-on 指令允許我們建立能夠響應使用者操作的頁面。
Vue 的 v-on 透過告訴瀏覽器要監聽哪個事件以及發生該事件時要做什麼來工作。
方法
如果我們想在事件發生時執行更復雜的程式碼，我們可以將程式碼放在 Vue 方法中，並像這樣從 HTML 屬性中引用該方法
<p v-on:click="changeColor">Click me</p>
事件修飾符
除了 v-on 和 Vue 方法之外，我們還可以使用稱為**事件修飾符**的東西來修改事件，例如使其在頁面載入後僅發生一次，或者修改 'submit' 等事件以防止表單被提交。
瞭解更多
正如我們所見，要學習如何使用 Vue 中的事件，我們需要了解三種技術
- Vue
v-on指令 - Vue 方法
- Vue
v-on修飾符
點選“下一頁”繼續本教程，瞭解更多關於這些事件處理技術的內容。
