回首Vue3之指令篇（五）

这是我参与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事件或者组件上自定义事件的数据。

2. 内联语句,即：

<button @click="count++"></button>
复制代码

注意事项

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

1. Vue3中不在支持使用数字 (即键码) 做为 v-on 修饰符。在Vue3的使用示例以下：

//错误的使用方式
<input @keyup.13="add" />

//正确的使用方式
<input @keyup.enter="add" />
复制代码

2. Vue3中再也不支持 config.keyCodes，即自定义按键别名不能在被使用

Vue.config.keyCodes = {
  f1: 112
}

<input @keyup.f1="submit" />
复制代码

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

3. Vue中键盘事件只做用在可编辑元素上，即input和textarea。若是你想做用在其余元素上，请给元素加上属性contenteditable 或 tabindex="number"，number为一个数值，可设为-一、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 修饰符