Loading

详解 Vue 的 v-on 指令

v-on 如何操作:

  1. 为元素绑定监听事件
  2. v-on:事件名="函数名",简写@事件名='函数名'
  3. v-on绑定的事件触发后,vue会去实例对象的methods中找对应的回调函数
  4. 使用修饰符,如v-on:事件名.once="函数名"
  5. 使用@事件名='函数名($event)'来获取事件对象

常见的事件修饰符:

  .once 默认只要事件触发,回调函数会反复执行,若只想让它执行一次,可使用once修饰符:

  .prevent 阻止监听的元素本身的默认行为(而非监听事件的)

  .stop 嵌套的元素中,多个元素监听到发生同一事件时,会发生事件冒泡,可用stop修饰符阻止。

  .self 让回调函数只有当前元素触发事件时才执行(即避免被其他元素冒泡影响,但该元素触发监听事件可影响其他元素)

  .capture 添加事件侦听器时使用 capture 模式,将事件冒泡变成事件捕获

v-on按键修饰符,用来监听按键,可参考 Vue.js文档

  • 文中建议使用内置的按键别名,但在不满足需求的情况下,可通过Keycode自定义按键名
  • Keycode:键盘上每个键都对应一个数字,这个数字就是键的Keycode
  • 知道了键的Keycode就可以在JS代码位置根据Keycode自定义键的别名:
Vue.config.keyCodes.f2=113

posted @ 2023-02-13 12:22  LiJialong  阅读(131)  评论(0编辑  收藏  举报