Vue事件处理 – 源码巴士

事件监听

v-on事件监听DOM事件，并在触发时运行JS代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <div id="app" class="container">
        <h1 class="page-header">VUE</h1>
        <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default" v-on:click="counter -= 1">-</button>
            </span>
            <input type="text" class="form-control" v-model="counter" value="">
            <span class="input-group-btn">
                <button class="btn btn-default" v-on:click="counter += 1">+</button>
            </span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                counter:0
            }
        });
    </script>
</body>
</html>

事件处理方法

v-on可接受一个需调用的方法名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <div id="app" class="container">
        <h1 class="page-header">VUE</h1>
        <div class="input-group">
            <input type="text" class="form-control" v-model="message"/>
            <span class="input-group-btn">
                <button class="btn btn-default" v-on:click="todo">todo</button>
            </span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                message:''
            },
            methods:{
                todo:function(evt){
                    if(evt){
                        console.log(this.message, evt.target.tagName);
                        this.message = evt.target.tagName;
                    }
                }
            }
        });
    </script>
</body>
</html>

内联处理器中的方法

可在内联JS语句中调用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <div id="app" class="container">
        <h1 class="page-header">VUE</h1>
        <div class="input-group">
            <input type="text" class="form-control" v-model="message"/>
            <span class="input-group-btn">
                <button class="btn btn-default" v-on:click="todo('hello')">todo</button>
            </span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                message:''
            },
            methods:{
                todo:function(msg){
                    if(msg){
                        this.message = msg;
                    }
                }
            }
        });
    </script>
</body>
</html>

若需在内联语句处理器中访问原始的DOM事件，可用特殊变量$event将其传入方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <div id="app" class="container">
        <h1 class="page-header">VUE</h1>
        <div class="input-group">
            <input type="text" class="form-control" v-model="message"/>
            <span class="input-group-btn">
                <button class="btn btn-default" v-on:click="todo('hello',$event)">todo</button>
            </span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                message:''
            },
            methods:{
                todo:function(msg,evt){
                    if(evt){
                        evt.preventDefault();//访问原生事件对象
                    }
                    this.message = msg;
                }
            }
        });
    </script>
</body>
</html>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常用的需求。尽管可在方法中轻松实现，更好的方式是：方法只是纯粹的数据逻辑，而不是去处理DOM事件细节。

为解决此问题，v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示。

.stop 阻止事件继续传播
.prevent 不再重载页面
.capture 使用时间捕获模式
.self 当前元素自身时触发
.once

<a v-on:click.stop="doStop">阻止单击事件继续传播</a>

<form v-on:submit.prevent="doPrevent">提交事件不再重载页面</form>

<a v-on:click.stop.prevent="doThis">修饰符可串联</a>

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

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

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

使用修饰符时，顺序很重要。相应的代码会以同样的顺序产生，因此用@click.prevent.self会阻止所有点击，而@click.self.prevent只会阻止对元素自身的点击。

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

不想其它只能对原生的DOM事件起作用的修饰符，.once修复符还能被用到自定义的组件事件上。

<div v-on:scroll.passive="onScroll">...</div>

Vue为修饰符额外提供了.passive修饰符来提升移动端的性能。例如在滚动时浏览器会在整个事件处理完毕后再触发滚动，因为浏览器并不知道这个事件是否在其他处理函数中被调用了event.preventDefault()。.passive修饰符用来进一步告诉浏览器此事件的默认行为不会被取消。

不要把.passive和.prevent一起使用，被动处理函数无法阻止默认的事件行为。

按键修饰符

在监听键盘事件时，需检查常见的键值。Vue允许为v-on在监听键盘时添加按键修饰符：

# 当keyCode为13是调用vm.submit()
<input v-on:keyup.13="submit" />
# 别名
<input v-on:keyup.enter="submit" />
# 缩写语法
<input @keyup.enter="submit" />

按键别名

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

通过全局config.keyCodes对象自定义按键修饰符别名：

Vue.config.keyCodes.f1 = 112

可将keyboardEvent.key暴露的任意有效按键名转换为kebab-case来作为修饰符：

# 当 `$event.key==='PageDown'`时被调用
<input @keyup.page-down="onPageDown">

系统修饰符

系统修饰符来实现仅在按下相应按键时才出发鼠标或键盘事件的监听器

.ctrl
.alt
.shift
.meta

# Alt + C
<input @keyup.alt.67="clear">

# Ctrl + Click
<div @click.ctrl="todo">do something</div>

修饰键与常规按键不同，在和keyup事件一起使用时，事件触发时修饰键必须处于按下状态。即只有在按住Ctrl的情况下释放其它按键，才能触发keyup.ctrl，而淡淡释放ctrl也不会触发事件。

原文链接：https://blog.csdn.net/JunChow520/article/details/103030565