vue官网学习笔记（七）事件处理

- 日理万妓 2022-04-24 03:22 228阅读 0赞

# 监听事件 #

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

示例：

<div id="example-1">
        <button v-on:click="counter += 1">Add 1</button>
        <p>The button above has been clicked {
       { counter }} times.</p>
    </div>

var example1 = new Vue({
        el: '#example-1',
        data: {
            counter: 0
        }
    })

# 事件处理方法 #

然而许多事件处理逻辑会更为复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称。

示例：

<div id="example-2">
        
        <button v-on:click="greet">Greet</button>
    </div>

var example2 = new Vue({
        el: '#example-2',
        data: {
            name: 'Vue.js'
        },
        // 在 'methods' 对象中定义方法
        methods: {
            greet: function(event) {
                // 'this'在方法中指向当前Vue实例
                alert('Hello' + this.name + '!')
                // 'event' 是原生DOM事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })
    // 也可以用JavaScript直接调用方法
    example2.greet() // => 'Hello Vue.js!'

# 内敛处理器中的方法 #

除了直接绑定到一个方法，也可以在内联JavaScript语句中调用方法：

new Vue({
        el: '#example-3',
        methods: {
            say: function (message) {
                alert(message)
            }
        }
    })

有时也需要在内联语句处理器中访问原始的DOM事件。可以用特殊变量$event把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
        Submit
    </button>

// ...
    methods: {
        warn: function (message, event) {
            // 现在我们可以访问原生事件对象
            if (event) event.preventDefault()
            alert(message)
        }
    }

# 事件修饰符 #

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

为了解决这个问题，Vue.js为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop   .prevent    .capture     .self      .once      .passive

<a v-on:click.stop="doThis"></a>
    
    
    <form v-on:submit.prevent="onSubmit"></form>
    
    
    <a v-on:click.stop.prevent="doThat"></a>
    
    
    <form v-on:submit.prevent></form>
    
    
    
    <div v-on:click.capture="doThis">...</div>
    
    
    
    <div v-on:click.self="doThat">...</div>

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

### 2.1.4新增 ###

<a v-on:click.once="doThis"></a>

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

### 2.3.0新增 ###

Vue还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

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

这个 .passive 修饰符尤其是能够提升移动端的性能。

注意：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住， .passive 会告诉浏览器你不想阻止事件的默认行为。

# 按键修饰符 #

在监听键盘事件时，我们经常需要检查详细的按键。Vue允许为 v-on 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.enter="submit">

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

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。

### \#按键码 ###

**注意： keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。**

使用 keyCode 特性也是允许的：

为了在必要的情况下支持旧浏览器，Vue提供了绝大多数常用的按键码的别名：

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

**注意：有一些按键（ .esc 以及所有的方向键）在IE9中不同的 key 值，如果你想支持 IE9 ，这些内置的别名应该是首选。**

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

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

# 系统修饰键 #

### 2.1.0新增 ###

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

.ctrl     .alt    .shift    .meta

**注意：在mac系统键盘上，meta对应command键。在Windows系统键盘meta对应Windows徽标键。在sun操作系统键盘上，meta对应实心宝石键。在其他特定键盘上，尤其在MIT和Lisp机器的键盘、以及其后继产品，比如Knight键盘、space-cadet键盘，meta被标记为“META”。在Symbolics键盘上，meta被标记为“META”或者“Meta”。**

例如：

<input @keyup.alt.67="clear">
    
    
    <div @click.ctrl="doSomething">Do something</div>

注意：请注意修饰键与常规按键不同，在和keyup事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住ctrl的情况下释放其它按键，才能触发keyup.ctrl。而单单释放ctrl也不会触发事件。如果你想要这样的行为，请为ctrl换用keyCode:keyup.17。

## \#.exact修饰符 ##

### 2.5.0新增 ###

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

<button @click.ctrl="onClick">A</button>
    
    
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
    
    <button @click.exact="onClick">A</button>

## \#鼠标按钮修饰符 ##

### 2.2.0新增 ###

.left   .right   .middle

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

# 为什么在HTML中监听事件？ #

你可能注意到这种事件监听的方式违背了关注点分离（separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的Vue.js事件处理方式和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

1.扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法。

2.因为你无须在JavaScript里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。

3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。