Vue 裡v-on:click指令
為了讓使用者和你的應用進行互動，我們可以用 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>