Vue入门（四）——事件处理

vue.png

一、监听事件的Vue处理

虽然我们可以直接使用原声DOM的方式去绑定事件，但是Vue为我们提供的、为标签绑定事件的方法更为方便。不仅如此，用Vue提供的指令还可以让ViewModel更加简洁，逻辑更彻底。

Vue提供了v-on指令帮助我们进行事件的绑定。基本的内联事件处理方法，见下面官方的demo:

  
  增加 1
  
这个按钮被点击了 {{ counter }} 次。

二、事件处理方法集成到Vue对象

内联的方式绑定事件，只能处理简单的逻辑。复杂的情况，还是封装到JS中最为方便，也不容易出错。

Vue对象中可以添加methods属性，开发者可以把事件处理函数放在methods中。

 


  
  
  


  

    
{{ number }}
    
    
  
  

三、事件修饰符

在事件处理程序中调用event.preventDefault()或是event.stopPropagation()是非常常见的需求。尽管我们可以在methods中轻松地实现这一点，但更好的方式是：methods只有纯粹的数据逻辑，而不去处理DOM事件的细节。

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

这部分的例子官方文档写的很详细，就直接用官方文档的例子吧。

• .stop
• .prevent
• .capture
• .self
• .once

...

...

四、按键修饰符

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

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

全部的按键别名：

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

五、事件绑定的简写

Vue中属性绑定的简写是'v-bind:' === ':'，而事件的简写为'v-on:' === '@'

六、事件绑定总结

Vue为了方便大家进行开发，提供了事件的相关的封装，尤其是v-on指令非常方便地跟Vue对象中methods进行配合进行复杂的事件处理，非常方便。另外事件的事件修饰符和按键修饰符也可以为Vue事件锦上添花。

下一篇，会探讨Vue实例与生命周期，敬请期待。