Handling native events in Vue.js
Since JavaScript’s inception, events have always played a vital role in the success of this programming language. For this reason, all JavaScript frameworks have made sure they offer a strong solution to handle native and custom events.
We refer to native events as the ones built in HTML elements and APIs such as a click event triggered by <button>, a change event triggered by <select>, or a load event triggered by <img>.
Just like with props and directives, Vue.js event handling seamlessly merges with the existing native syntax to handle events offered by HTML elements. In native HTML, all events handlers are prefixed with the word on, so a click event becomes onclick and a change event becomes onchange. Vue.js follows this convention by creating a directive (which, as we know, starts with v-) called v-on. So a click event in Vue is handled using v-on:click and a change event is listened to by using v-on:change.
You...
