vue method event handers
In vuejs there is the vue methods option of a vue class constructor that can be used to define event handers for a vuejs project. In native client side javaScript events can be attached to dome elements with addEventListener, or some similar method, as a way to define what needs to happen when a user clicks on something with a mouse, or preform one of many other such actions. In vuejs the methods option is one of many options that can be used to define what a Vue call instance of constructor is, keeping everything neat, tidy, and well structured. So in this post I will be going over some quick examples of using the vue methods option.
1 - vue method basic example
The basic example for the vue methods option is just a single clicker method that is fried when an input element in a template is clicked. So this is an example of using the methods option as a way to define the event handers for the one or more elements in a template. The v-on:event directive must be used as a way to attach a method in the vue methods option object as an event hander.
|
|
In the html of this example I am just using a single div as a mount point, and linking to the above javaScript in a basic.js file
|
|
2 - vue method key mods
When using the v-on:event directive there is an additional modifier that can be used to set th key code that the event will fore for when using keyboard events.
|
|