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(包含 DeleteBackspace 鍵)
  • .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 的可以直接參考 官網

Categories: Vue