Similar to the restrictions on inline expressions, event handlers are restricted to one statement only.
Sometimes we also need to access the original DOM event in an inline statement handler.
You can pass it into a method using the special $event variable:. It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers.
Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.
In 1.0.16, two additional modifiers have been introduced:. When listening for keyboard events, we often need to check for common key codes.
Vue.js also allows adding key modifiers for v-on when listening for key events:. Remembering all the keyCodes is a hassle, so Vue.js provides aliases for most commonly used keys:.
delete (captures both “Delete” and, if the keyboard has it, “Backspace”).
1.0.8+: Single letter key aliases are also supported. 1.0.17+: You can also define custom key modifier aliases:.
You might be concerned that this whole event listening approach violates the good old rules about “separation of concern”.