為了讓用戶和你的應用進行交互，我們可以用 v-on 指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法：
<body> <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反轉消息</button> </div> </body> <script src="./js/vue.js"></script> <script> var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { // 獲取message變量值將其轉換成數組，逆轉后再鏈接，再賦值給message this.message = this.message.split('').reverse().join('') } } }) </script>
通過v-on綁定click事件，點擊button時就會觸發事件，vue中的事件函數都卸載methods屬性中。其中v-on:click可以縮寫成@click，即使用@代替v-on。
<!DOCTYPE html> <html lang="zh"> <head> <script src="./js/vue.js"></script> </head> <body> <div id="app"> {{ message }} <button v-on:click="me">click </button> </div> <script> vm = new Vue({ el: "#app", data: { message: "張三" }, methods: { me: function () { this.message = '李四'; } } }) </script> </body> </html>
效果如下:
2 內聯處理器中的方法
除了直接綁定到一個方法，也可以在內聯 JavaScript 語句中調用方法：
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
3 事件修飾符
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。
為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
4 按鍵修飾符
在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
5 系統修飾符
可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>