回首Vue3之指令篇（五）

也笑
468 阅读3分钟

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

这篇文章我们来讲一下v-on的使用方法，以及在使用它的时候我们需要注意的地方。

v-on指令：绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

修饰符

  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
  • .once - 只触发一次回调。
  • .left - 只当点击鼠标左键时触发。
  • .right - 只当点击鼠标右键时触发。
  • .middle - 只当点击鼠标中键时触发。
  • .passive - { passive: true } 模式添加侦听器

在这里我们需要注意的是按键修饰符，在下面的内容中会讲到。

如何使用

对于Vue大家应该都知道v-on可以简写为@，当然你如果未接触过，现在知道也不晚。

事件 变量event是事件类型

<button @click="doThis"></button>   ===  <button v-on:click="doThis"></button>

<button @[event]="doThis"></button>

从代码中可以看出，我们可以指定事件类型来绑定事件，也可以给个变量动态的去绑定事件。

修饰符

<button @click.stop="doThis"></button>

<button @click.stop.prevent="doThis"></button>

从代码中可以看出，修饰符可以单个使用，也可以串联使用（触发每个修饰符的功能）。

对象语法

<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
                        ===
<button @mousedown="doThis" @mouseup="doThat"></button>

从代码中可以看出，我们可以写一个对象语法，其等价于对象所包含的所有单个事件的集合。

假设我们有个方法函数使变量count加1，其表达式如下：

setup() {
    const count = ref(0)
    function add() {
        count.value++
    }

    return {
        count,
        add
    }
}

那么上述代码示例中的doThis,可以是以下场景：

  1. 方法的名字，即:
<button @click="add"></button>

//如果需要传参，又需要原生dom的数据，我们可以这样做
<button @click="add(参数,$event)"></button>

$event可以获取原生DOM事件或者组件上自定义事件的数据。

  1. 内联语句,即：
<button @click="count++"></button>

注意事项

值得我们注意的是：键盘事件与按键修饰符在Vue3中使用与Vue2中使用是有些差异的。

  1. Vue3中不在支持使用数字 (即键码) 作为 v-on 修饰符。在Vue3的使用示例如下：
//错误的使用方式
<input @keyup.13="add" />

//正确的使用方式
<input @keyup.enter="add" />
  1. Vue3中不再支持 config.keyCodes，即自定义按键别名不能在被使用
Vue.config.keyCodes = {
  f1: 112
}

<input @keyup.f1="submit" />

上述使用方式在Vue3中是不被支持的。

  1. Vue中键盘事件只作用在可编辑元素上，即input和textarea。如果你想作用在其他元素上，请给元素加上属性contenteditable 或 tabindex="number"，number为一个数值，可设为-1、0、1等，在使用它们的时候，可能会对你的布局和功能产生影响，你需要根据自己的场景解决一下。
//可编辑元素
<input @keyup.enter="add" />

//非可编辑元素
<h1 @keyup.enter="add" tabindex="0">点击</h1>
或
<h1 @keyup.enter="add" contenteditable>点击</h1>

总结

  1. 需要注意修饰符的使用，尤其是按键修饰符

  2. 需要注意键盘事件只作用在可编辑元素上，非可编辑元素加contenteditable 或 tabindex="number"可解决

  3. Vue3中不在支持使用数字 (即键码) 作为 v-on 修饰符

想了解更多文章，传送门已开启：回首Vue3目录篇 ！

avatar
文章
阅读
粉丝