「这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战」。

1. 监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

使用v-on:xxx或@xxx绑定事件，其中xxx是事件名。

事件的回调写在methods对象中，Vue 会将其挂载到实例对象vm上。

注意，methods对象中的方法不能写成箭头函数形式，否则会导致this的指向错误。

方法内部的this指向当前 Vue 的实例对象。

<div id="root">
    <h2>当前计数：{{count}}</h2>
    <button @click="add($event,'add one')">add</button>
</div>

const vm = new Vue({
    el: '#root',
    data: {
        count: 0,
    },
    methods: {
        add(event, str) {
            // `this` 在方法里指向当前 Vue 实例
            this.count++;
            console.log(str);
            console.log(event);
        },
    },
});
// 也可以自行调用
vm.add();

以上代码中，@click="add($event,'add one')传入了两个参数，也可以不传入参数，直接写@click="add"。

两个参数中，$event是特殊变量，是事件参数，用来访问原始的 DOM 事件。其中，$event和其他参数的位置可以任意换，只要函数接收参数的顺序与之对应即可。

2. 事件修饰符

有时候需要阻止事件的默认行为，可以在事件处理方法中调用event.preventDefault()。但 Vue 为v-on指令提供了事件修饰符，由点开头的指令后缀表示。例如，常用的阻止默认事件的修饰符：

<a href="xxxx" @click.prevent="showInfo"></a>

Vue 提供了以下事件修饰符：

.stop：阻止事件冒泡
.prevent：阻止事件默认行为
.capture：使用事件的捕获模式
.self：只有event.target是当前操作的元素时才触发事件
.once：事件只触发一次
.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

3. 按键修饰符

在监听键盘事件时，有时需要检查具体是哪个按键。Vue 可以为v-on在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

Vue 中常用的按键别名：

.enter
.tab
.delete (捕获删除和退格键)
.esc
.space
.up
.down
.left
.right

对于 Vue 未提供别名的按键，可以使用按键原始的Key值绑定，但要转化为kebab-case（短横线连接，全部小写）。

还可以通过全局config.keyCodes对象，自定义修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

4. 系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

注意：

若配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
若配合keydown使用：正常触发事件。

1. exact修饰符

.exact修饰符允许控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

2. 鼠标按钮修饰符

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

.left
.right
.middle

Vue 学习笔记 —— 事件处理（二）