跳至主要內容

事件处理

Guitar大约 3 分钟

Vue事件处理

使用 v-on指令 完成事件绑定。

语法格式：v-on:事件名="vue表达式"

简写语法：@事件名="vue表达式"

事件名：与 JS内置事件一致（见JS/事件）。同时，Vue还支持自定义事件。

绑定事件后，事件一旦发生，就会执行相应的代码。

methods 配置项

Vue实例创建时，可以在构造函数参数中给出 methods配置项，methods配置项通常封装有成员方法，并传递给vue实例（非代理方式）。

  • methods 的方法可以看作是vue实例的成员方法，可以直接调用。
  • methods 中方法（非箭头函数）的 this 是当前vue实例 vm。
const vm = new Vue({
    el : '#app',
    data : {
    },
    methods : {
        // ES6语法
        sayHi(){
            alert('hi...')
        }
    }
})

Vue内置事件

  1. 绑定的回调函数，如果函数调用时不需要传递任何参数，小括号()可以省略。

  2. Vue在调用回调函数的时候，会自动给回调函数传递一个对象，这个对象是：当前发生的事件对象。

    <button v-on:click="sayHello()">hello</button>
<button v-on:click="sayHello">hello</button>
<!--
等价执行：vm.sayHello(event)
-->

  3. 在绑定回调函数的时候，可以在回调函数的参数上使用 $event 占位符，Vue框架看到这个 $event 占位符之后，会自动将当前事件以对象的形式传过去。

    <button @click="sayHi($event, 'jack')">hi</button>
<!--
等价执行：vm.sayHi(event, 'jack')
-->

Vue事件修饰符

通过在 @事件名.事件修饰符 完成对事件的修饰，可以多个修饰符共同作用，并有细节上的先后。

.stop ： 停止事件传递，等同于 event.stopPropagation()。

阻止事件向上冒泡或者向下捕获。

.capture ：添加事件监听器时使用事件捕获模式。

.self ：仅监听事件源是自身的事件。冒泡或捕获的事件不处理

.once ： 事件只发生一次

.prevent ： 阻止事件的默认行为，等同于 event.preventDefault() 。

事件的默认行为：如超链接点击跳转、表单提交。

.passive ：解除阻止。无需等待，直接继续（立即）执行事件的默认行为（即异步执行默认行为）。

  • .passive 和 .prevent 修饰符是对立的。不可以共存。如果一起用，就会报错。

按键修饰符

对于keydown、keyup事件，添加按键修饰符可以捕获指定的按键进行相应。如：

.enter

.tab （必须配合keydown事件使用。）

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

系统修饰键

即4个比较特殊的键。

.ctrl

  • 对于keydown事件来说：
  1. 按下crtl，触发，KeyboardEvent.key = Control
  2. 按下ctrl+其他，触发，KeyboardEvent.key = 其他

  • 对于keyup事件来说：需要按下 ctrl+其他，然后松开，keyup事件才能触发，KeyboardEvent.key = 其他。

     <input type="text" @keyup.ctrl.c="getInfo"/>
<!--按下ctrl+c并松开后执行-->

.alt

.shift

.meta

  • 可以多个修饰符联合修饰，按照先后顺序进行过滤，当符合所有修饰条件时，执行相应操作

获取指定按键的修饰符

  1. 通过 keyboardEvent.key 获取这个键的真实名字（keyboardEvent是一个键盘事件对象）。如：PageDown
  2. 将这个真实名字以kebab-case风格进行命名。如：page-down

自定义按键修饰符

通过Vue的全局配置对象config来进行按键修饰符的自定义。使得指定的按键修饰符能被解析成指定的键值，从而对事件监听进行修饰。

Vue.config.keyCodes.按键修饰符 = 键值

// Vue.config.keyCodes.huiche = 13;
// 使用 .huiche 修饰符，捕获键值为13的键（即回车）
Copyright ©2024-present Guitar