监听事件
可以用v-on指令监听DOM事件来触发一些javascript代码。
demo:
增加1
{{counter}}
}
许多事件处理器的逻辑都很复杂,所以直接把javaScript代码写在v-on指令中是不可行的。因此v-on可以接收一个定义的方法来调用
},method:{
counter:function(){
this.counter++;
}
}
有时也需要在内联语句处理器中访问原生DOM事件,可以用特殊变量$event把它传入方法:
方式是:methods只是纯粹的数据逻辑,而不是去处理DOM事件的细节。
为了解决这个问题,Vue.js为v-on提供了事件修饰符,通过由(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
新增
不像其他只能对原生的DOM事件起作用的修饰符,.once修饰符还能被用到自定义的组件事件上
按键修饰符 在监听键盘事件时,我们经常需要监听常见的键值。 Vue允许为v-on在监听事件时添加按键修饰符:
常见的按键还有别名:
全部的按键别名:
可以通过全局config.keyCodes对象 自定义案件修饰符别名
按键修饰符 新增
可以用如下修饰符开启鼠标或键盘事件监听,使在按键按下时发生反应。
Meta
1 扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法
2 因为你无须在JavaScript里手动绑定事件,你的viewmodel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试。