Vue 3 is in beta and it’s subject to change.
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at how to handle key and mouse events in Vue 3 components.
Key Modifiers
Vue 3 can handle keyboard events.
For instance, we can write:
<input @keyup.enter="submit" />
to run the submit method when the keyup event is triggered by pressing the enter key.
Any valid key name is acceptable as the modifier.
The following key aliases can also be used as modifiers:
.enter.tab.delete(captures both "Delete" and "Backspace" keys).esc.space.up.down.left.right
System Modifier Keys
We can also add modifiers for system modifier keys like Alt and Ctrl.
We can use the following as modifiers:
.ctrl.alt.shift.meta
The meta key is the Windows key on Windows keyboards.
On Sun keyboards, it’s the diamond key.
And on Macs, it’s the command key.
So we can listen to the Ctrl + Enter key combo press on an element by writing:
<input @keyup.ctrl.enter="clear" />
We can also listen to Ctrl + click by writing:
<div @click.ctrl="onCtrlClick">ctrl + click me</div>
.exact Modifier
The .exact modifier lets us control the exact combination of system modifiers needed to trigger an event.
For example, if we have:
<button @click.ctrl="onClick">click me</button>
then if alt or shift is pressed, then onClick will also be run.
However, if we have:
<button @click.ctrl.exact="onCtrlClick">A</button>
Then onCtrlClick only runs when we Ctrl + click the button.
Mouse Button Modifiers
Vue 3 also provides modifiers for mouse buttons.
They are:
.left.right.middle
for listening to the presses of specific buttons.
Listeners in HTML
Listeners in HTML frees the component code including DOM logic, which is cleaner than having them all in JavaScript.
When the view model is destroyed, all event listeners are automatically removed.
Form Input Bindings
We can use the v-model directive to bind the input value to the state property.
It’s syntactic sugar for updating data on user input events.
v-model ignores the initial value , checked , or selected attributes found in any element.
Only the state in the Vue instances is treated as the source of truth.
Therefore, we should remove those attributes and just set the initial value in the Vue instance.
v-model internally uses different properties and emit different events for different input elements.
Text inputs use value property and input event.
Checkboxes and radio buttons use the checked property and change event.
Select fields use the value as a prop and change as an event.
To use the v-model directive, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="message" />
<p>{{ message }}</p>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
message: ""
};
}
}).mount("#app");
</script>
</body>
</html>
We returned an object with the message property so that we can use it with v-model .
Then we render the value of message to show what we entered.
v-model will automatically synchronize the input value and the value of message .
Therefore, when we type something in the box, it’ll be displayed below it.
Conclusion
We can listen to key and mouse events with v-on .
v-model binds the inputted value to the Vue instance state.
