vue.js事件处理器是什么

前端之家收集整理的这篇文章主要介绍了vue.js事件处理器是什么前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

监听事件

可以用v-on指令监听DOM事件来触发一些javascript代码

demo:

增加1
{{counter}}
  counter:0

}

方法事件处理器

许多事件处理器的逻辑都很复杂,所以直接把javaScript代码写在v-on指令中是不可行的。因此v-on可以接收一个定义的方法调用

增加1
{{counter}}
  counter:0

},method:{

  counter:function(){

  this.counter++;

  }

}

有时也需要在内联语句处理器中访问原生DOM事件,可以用特殊变量$event把它传入方法

事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagagation()是非常常见的需求。尽管我们可以在methods中轻松实现这点,但更好的

方式是:methods只是纯粹的数据逻辑,而不是去处理DOM事件的细节。

为了解决这个问题,Vue.js为v-on提供了事件修饰符,通过由(.)表示的指令后缀来调用修饰符。

.stop

.prevent

.capture

.self

.once

新增

不像其他只能对原生的DOM事件起作用的修饰符,.once修饰符还能被用到自定义的组件事件上

按键修饰符 在监听键盘事件时,我们经常需要监听常见的键值。  Vue允许为v-on在监听事件时添加按键修饰符:

常见的按键还有别名:

全部的按键别名:

可以通过全局config.keyCodes对象 自定义案件修饰符别名

按键修饰符 新增

可以用如下修饰符开启鼠标或键盘事件监听,使在按键按下时发生反应。

Meta

注意:在不同系统的键盘上,Meta对应的键不一样

为什么在HTML中监听事件

你可能注意到这种事件监听的方式违背了关注点分离的传统理念。不必担心,因为所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的viewmodel上,它不会导致任何维护上的困难。实际上,使用v-on有几个好处:

1 扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法

2 因为你无须在JavaScript里手动绑定事件,你的viewmodel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试。

3 当一个viewmodel被销毁时,所有的事件处理器都会自动删除,你无须担心如何自己清理它们。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/40583.html

猜你在找的Vue相关文章