【Vue.js】Vue官方文档学习-事件处理-CSDN博客

本文链接：https://blog.csdn.net/joseydon/article/details/81225825

使用 v-on 指令监听 DOM 事件。

一、事件触发时执行js语句

<div id="app1">
        <button @click="counter += 1">点击我</button>
        <p>按钮被点击次数为：{{counter}}</p>
    </div>
----------
    //事件触发时执行js语句
    var app1 = new Vue({
        el: '#app1',
        data: {
            counter:0
        }
    })

二、定义在methods对象中的事件处理器

v-on 可以接收要调用的方法名。

    <div id="app2">
        <button @click="greet">Greet</button>
    </div>
----------
    //  在methods对象中定义事件监视器
    var app2 = new Vue({
        el: '#app2',
        data: {
            name: 'Vue.js'
        },
        methods:{
            greet: function(event){
                alert('Hello' + this.name + '!')
                 // `event` 是原始 DOM 事件对象
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })
    //  直接调用methods方法
    app2.greet()

三、定义在行间的事件处理器

<div id="app3">
        <button @click="say('hi')">Say hi</button>
        <button @click="say('what')">Say what</button>
    </div>
----------
    //  定义在行间内的事件处理器
    var app3 = new Vue({
        el: '#app3',
        methods: {
            say: function(msg){
                alert(msg)
            }
        }
    })

当需要访问原始DOM事件对象的时候，可以使用特殊的$event变量将它传递给一个方法。

<div id="app4">
        <button @click="warn('Form cannot be submitted yet.', $event)">
            submit
        </button>
</div>
----------
    //  传递DOM事件对象
    var app4 = new Vue({
        el: '#app4',
        methods:{
            warn: function(msg,event){
                    // 现在可以访问原始事件对象
                    if (event) event.preventDefault()
                    alert(msg)
            }
        }
    })

四、事件修饰符

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

<!-- 只有在 event.target 是元素自身时，才触发处理函数。 -->
<!-- 也就是说，event.target 是子元素时，不触发处理函数 -->
<!-- 使用 v-on:click.prevent.self 会阻止所有点击 -->
<!-- 使用 v-on:click.self.prevent 只阻止元素自身的点击 -->
<div v-on:click.self="doThat">...</div>

<!-- .once 修饰符：不仅能处理DOM事件还可以用于处理组件事件 -->
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为（滚动）将立即发生， -->
<!-- 而不是等待 `onScroll` 完成后才发生， -->
<!-- 以防在滚动事件的处理程序中含有 `event.preventDefault()` 调用 -->
<!-- .passive 会向浏览器传达你并不希望阻止事件的默认行为 -->
<!-- .passive 和 .prevent 放在一起使用 -->
<div v-on:scroll.passive="onScroll">...</div>

五、按键修饰符

在监听键盘事件时经常需要查找常用按键对应的 code 值。
Vue 可以在 v-on 上添加按键修饰符，用于监听按键事件。

<!-- 只在 `keyCode` 是 13 时，调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

常用按键修饰符别名

记住所有 keyCode 是非常麻烦的事，所以 Vue 提供一些最常用按键的别名：
- .enter
- .tab
- .delete (捕获“删除”和“退格”按键)
- .esc
- .space
- .up
- .down
- .left
- .right

<!-- 和上面的示例相同 -->
<input v-on:keyup.enter="submit">

自定义按键修饰符别名

通过全局 config.keyCodes 对象设置：

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

自动对应按键修饰符

直接使用 KeyboardEvent.key 暴露出来的所有合法按键名作为修饰符，但是要将它们转换为串联式命名。

<input @keyup.page-down="onPageDown">

六、系统辅助按键

触发鼠标或键盘事件监听器

仅在以下修饰符对应的按键被按下时，才会触发鼠标或键盘事件监听器

.ctrl
.alt
.shift
.meta

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

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">做一些操作</div>

在keyup事件触发时，辅助按键必须是按下状态。也就是说，keyup.ctrl 事件需要同时按下 ctrl 键和释放一个按键。

.exact 修饰符

.exact 修饰符可以控制触发事件所需的系统辅助按键的准确组合。

<!-- 如果 Alt 键或 Shift 键与  Ctrl 键同时按下，也会触发事件 -->
<button @click.ctrl="onClick">A</button>

<!-- 只在 Ctrl 按键按下，其他按键未按下时，触发事件 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 只在没有系统辅助按键按下时，触发事件 -->
<button @click.exact="onClick">A</button>