Vue Event Handling
Vue：2.5
Vue 的事件操作是透過 v-on 語法執行，也可以縮寫成 @event。
Event Handlers
範例
<div id="app">
<p>{{ message }}</p>
<p>{{ count }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
<button @click="count += 1">Count + 1</button>
</div>const vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
count: 1
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
});Event Modifiers
Vue 提供了幾個 事件修飾符 來處理 事件冒泡 的問題。（詳細可參考 DOM Event Flow）
| 名稱 | 功用 |
|---|---|
.stop |
等同於 event.stopPropagation()，停止事件傳導 |
.prevent |
等同於 event.preventDefault()，停止執行預設行為 |
.capture |
在 Capture Phase 階段執行 Event method |
.self |
只觸發自己的事件，不會包含子元件 |
.once |
只觸發一次 |
.passive |
執行預設行為（與 .prevent 互斥） |
範例
<div id="app">
<ul id="list" @click="sayHello('list')">
<li id="list-item" @click="sayHello('list-item')">
<!-- 同時啟用 stopPropagation() 和 preventDefault() -->
<!-- 或者可以傳入 $event 變數，由 method 內部執行 -->
<a class="list-item-link" @click.prevent.stop="sayHello('list-item-link')" href="https://blog.johnsonlu.org/">Link</a>
</li>
</ul>
</div>const vm = new Vue({
el: '#app',
data: {},
methods: {
sayHello: function (who) {
console.log('Hello', who);
}
}
});Key Modifiers
除了常見的修飾符以外，Vue 另外提供了 按鍵修飾符 處理鍵盤相關的 event。
.enter.tab.delete（包含Delete和Backspace鍵）.esc.space.up.down.left.right
範例
<div id="app">
<input @keyup.enter="sayHello()">
<!-- 也可以直接使用 keyCode -->
<input @keyup.13="sayHello()">
</div>const vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
},
methods: {
sayHello: function () {
alert(this.message);
}
}
});其他較少用到 Modifier 的可以直接參考 官網。
