# 事件处理

# 监听事件

事件处理语法为 v-on:click。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="app">
        <p>点击次数：{{ counter }}</p>
        <button v-on:click="counter += 1">点击</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                counter: 0
            }
        });
    </script>
</body>
</html>

# 事件处理方法

对于更加复杂的事件处理，可以将表达式替换为方法名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="click">点击</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'ermo'
            },
            methods: {
                click: function(event) {
                    alert('Hi ' + this.name);
                    // event 是原生 DOM 事件
                    if (event) {
                        alert(event.target.tagName);
                    }
                }
            }
        });
        // 方法可以直接调用
        vm.click();
    </script>
</body>
</html>

# 内联处理器中的方法

事件方法同样可以在内联 JavaScript 中使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="say('hi')">sayHi</button>
        <button v-on:click="say('what?')">sayWhat</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
                say: function(msg) {
                    alert(msg);
                }
            }
        });
    </script>
</body>
</html>

内联事件方法中可以传入原生的 DOM 事件，使用关键字 $event。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="warn('表单无法提交', $event)">点击</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            methods: {
                warn: function(msg, event) {
                    if (event) {
                        console.log('event.preventDefault()');
                        event.preventDefault();
                    }
                    alert(msg);
                }
            }
        });
    </script>
</body>
</html>

# 事件修饰符

Vue.js 为 v-on 提供了事件修饰符去处理 DOM 事件细节。修饰符的语法是以点号 . 开始的后缀。比如 v-on:click.prevent 就等同于 event.preventDefault()。

常用的事件修饰符有：

修饰符	作用
`.stop`	阻止冒泡
`.prevent`	阻止默认事件
`.capture`	阻止捕获
`.self`	监听当前触发元素
`.once`	只触发一次
`.left`	左键事件
`.right`	右键
`.middle`	中间滚动事件

<!-- 阻止单机事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重新加载 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<form v-on:click.stop.prevent="doThat"></form>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat"></div>

<!-- 点击事件只会触发一次 -->
<div v-on:click.once="doThis"></div>

# 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 key 是 enter 的时候调用 vm.submit -->
<input v-on:keyup.enter="submit" >

<!-- 只有在 keyCode 是13的时候调用 vm.submit  -->
<input v-on:keyup.13="submit" >

其他的按键码别名：

别名	作用
`.enter`	enter
`.tab`	tab
`.delete`	捕获删除键和退格键
`.esc`	esc
`.space`	空格
`.up`	up
`.down`	down
`.left`	left
`.right`	right
`.ctrl`	ctrl
`.alt`	alt
`.shift`	shift
`.meta`	meta

← class与style绑定表单输入绑定 →