So then I have an example of the vue on directive here where I am just using the vue el option to mount to a single div element in the hard coded html. I then worked out a simple template with just a single input element that I made as a button type. This button element then uses the vue on directive to make it so that when the button is clicked a step method is called that steps a variable in the vue data object.
I am also using the vue bind directive to bind a message variable in the data object for the value attribute of the input element. This is so that each time the button is clicked the current value of the variables that is stepped is displayed as part of the buttons value.
This is a simple example of just making a basic example where I am just stepping a variable in the data object, a real example depends on what I want to accomplish. Sometimes that can be done with a single event and handler, other times I need a few events and also use additional directives on top of the vue on directive. SO with that being said lets look at some more examples of the vue on directive in action.
Now for a vue on directive example that uses the on key up, and the on change events, along with the vue model directive.
The on key up event will fire when a keyboard key returns from the down position to the up position. SO this is the event that I would want to use when it comes to preforming some kind of action that should happen each time a key is presses, such as checking the character length, and updating a message as it goes up or down. A common task when working out a form.
The on change event will only fire once the value of a text element changes, but not while the value is being edited. So it is useful for doing something that will happen when the inputted value is really changed rather than being edited.