Let's use a range of events and their modifiers to look at the cool ways we can deal with event handlers in Vue.
<template> <div> <button @mouseenter="counter += 1">Increment the counter!</button> <button @click="increment">Increment using a method!</button> <div v-text="counter"></div> <form @submit.prevent="logName"> <input @keyup.ctrl.alt.shift.down="keyHandler" v-model="firstName" placeholder="First name..." /> </form> </div> </template> <script> export default { data() { return { counter: 0, firstName: '' } }, methods: { increment() { console.log('counter incremented!') this.counter += 1 }, logName() { console.log('firstName:', this.firstName) }, keyHandler() { this.firstName = 'Evan' } } } </script>
- Using '@' replace 'v-on'
- @submit.prevent -> preventDefault
- @submit.stop
- @submit.once
- @keyup.ctrl.alt.shift.down --> "ctrl + alt + shift + down" 4 keys click together