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, but they can also be general methods that can be used within the vue instance. It is also possible to share a set of methods across more than one vue instance by way of the mixin option of vue instances. In addition it is also possible to make a set of methods global by making use of the Vue.mixin static method.
However the methods in the methods option do not have to just be event handlers, the methods can be used in other methods, as well as in other functions such as life cycle hooks. 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 option basic examples
One of the major use case examples of the method option is to have a place to park event handers for use in a template. However there are a number of other places to which one of these methods can be used also. In this section I will be going over a few quick examples of the methods option that have to do with just a single vue instance.
1.1 - Using The v-on directive to use a method as an event handler
This 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 of the vue instance which of some major use case for the methods option. 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 when using a static template.
1.2 - Using methods as helpers for other methods.
Another use case example of the methods option is to take something that I might be doing that is a little involved and start breaking it now into smaller find grain helper functions. These helper functions can then be called within other methods, or in many of the other functions for the various options for a vuejs instance.
1.3 - Methods and render functions
If I want to use a method with a render function rather than the usual static template, then there is the on property of the options object that I can use with the create element method. Helper methods can also be called in the body of the render function also to help break down the process of creating a view with this kind of method.
2 - vue method key mods
When it comes to using a method in a template there are a number of modifiers for the v-on directive that is often what is used to call a method in a template. For example when I want to have an on click event work for just the right mouse button rather than then left I could do is when working out the logic of the event handler, or I could use the right modifier with the click event when using v-on. In this section I will be going over a few quick examples of these modifiers.
2.1 - keycode v-on modifier
When using the v-on:event directive there is an additional modifier that can be used to set the key code that the event will fire for when using keyboard events. For example say that I want to call a submit method when a keyup event fires for a text input method, but only for the enter key which has a keycode of 13. There are a number of ways to go about doing this, but one way would be to use a key modifier when using the v-on directive.
2.2 - Left and right mouse buttons
When using the click event with the v-on directive I can use the left and right modifiers to use different methods for the right and let button or call the same method in different ways. When using a right click on a web page there is often a default menu that will pop up on desktops, so I can also use the prevent modifier as a way to prevent this kind of browser default action.
3 - Mixins and methods
I can go to town adding all kinds of methods to the method option of a single instance, but when it comes to working on a real project there is going to be a need to have a way to pull some methods out of the methods option of a single instance and share those methods across many instances of a Vue class. To do this I will want to make use of the mixin option of the vuejs constructor, or make methods global for everything in the page by passing a collection of methods to the Vue.mixin static method.
4 - Conclusion
The method option of a vue instance is how I can go about adding event handlers, and helper methods to a vue instance. I can also use the mixin option or the Vue.mixin static method as a way to have sets of methods that I can use across more than one or even all vue instances in a single pager app that I am making with vuejs.