Vue中的事件处理

一、事件的基本使用

vue中事件处理其中指的就是用v-on监听DOM事件，并在触发时运行一些JavaScript代码。

需要注意的是，v-on后面不仅可以跟click，还有keydown、keyup、submit等。

这里以v-on:click为例：v-on:click => 简写形式：@click

如果我们的JS逻辑比较简单的话，可以直接写成如下形式：

//完整写法
<button v-on:click="count++">点击实现计数器加1的功能</button>
//简写形式
<button @click="count++">点击实现计数器加1的功能</button>

如果我们点击事件之后的逻辑比较负责，就不建议直接在后面书写了。此时我们只是在v-on后面写一个调用的方法的方法名，具体的方法在methods配置项中配置。

下面只是演示，因此只展现了关键代码。

<button @click="greet">点击弹窗打招呼</button>


new Vue({
    
    el:'#root',
    methods:{
        greet:function(){
            alert('你好，同学！')
        }
    }
})

需要注意的是，greet其实是可以传参的。当调用greet()函数时，默认会传入一个事件对象event。

二、 为v-on提供的事件修饰符

• .stop：阻止事件冒泡
• .prevent：阻止默认事件
• .capture：使用事件的捕获模式（先捕获再冒泡）
• .self：只当在 event.target 是当前元素自身时触发处理函数
• .once：事件只触发一次
• .passive：事件的回调立即执行，无需等待事件回调执行完毕。（这一点在鼠标滚轮滚动和拖动滚动条那个例子中非常典型）

<!-- 阻止事件冒泡 -->
<div @click = "greet">
    <button @click.stop = "greet">greet不会弹窗两次，因为我已经被阻止冒泡</button>
</div>

<!-- 阻止事件的默认行为 -->
<button href="#" @click.prevent="greet">点我不会进行网页跳转，因为我已经被阻止默认行为</button>

<!-- 使用事件的捕获模式:先捕获再冒泡 -->
<div @click.capture = "showMsg(1)">
    div1
    <div class = "box2" @click = "showMsg(2)">
        div2
    </div>
</div>

<!-- 事件只会触发一次 -->
<button @click.once = "greet">点我打招呼</button>

三、 键盘事件

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

键盘事件：v-on:keydown和v-on:keyup

常见的按键修饰符有以下几种（下面是Vue为按键起的别名）：

• enter
• tab
• delete（包括“删除”和“退格”键）
• esc
• space
• up
• down
• left
• right

Vue中也提供了自定义按键别名的方式：Vue.config.keyCode.别名 = 键码