6、Vue_事件处理器

事件监听:v-on

PS.v-on的简写语法是@

  • 1、一般情况下,会使用一个方法来调用JavaScript方法,然后使用v-on来接收这个定义的方法来调用
    比如之前说过的例子:





  • 2、也可以直接调用JavaScript语句





  • 3、v-on还提供了事件修饰符来处理DOM事件,可以通过.表示的指令后缀来调用这些修饰符
    事件修饰符:
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
keydown:键盘按下(后面可跟修饰符)
keyup:键盘弹起(后面可跟修饰符)

例子:(来源菜鸟教程)




...
...
  • v-on在监听键盘事件时,可添加按键修饰符


Vue为常用的按键进行了别名





全部的按键别名:

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

你可能感兴趣的:(6、Vue_事件处理器)