Vue3 event handling
We can use it. v-on directive to listen for DOM events to execute JavaScript code.
v-on instructions can be abbreviated to @ symbols.
Syntax format:
v-on:click="methodName"
or
@click="methodName"
v-on
<divid="app"><button@click="counter += 1">increase
1</button><p>This button has been clicked {{ counter }} times.</p></div><script>const
app = { data() { return { counter: 0 } } }
Vue.createApp(app).mount('#app')</script>
Typically, we need to use a method to call the JavaScript method.
v-on can receive a defined method to call.
V-on
<divid="app"><!--\`greet\`
The method name is defined below--><button@click="greet">click me</button></div><script>const
app = { data() { return { name: 'Runoob' } }, methods: { greet(event) {
// \`methods\` internal \ ` this \ ` points to the current activity instance alert('Hello ' +
this.name + '!') // \`event\` is native DOM event if (event) {
alert(event.target.tagName) } } } }
Vue.createApp(app).mount('#app')</script>
In addition to binding directly to a method, you can also use an inline JavaScript statement:
V-on
<divid="app"><button@click="say('hi')">Say
hi</button><button@click="say('what')">Say
what</button></div><script>const app = { data() { }, methods: {
say(message) { alert(message) } } }
Vue.createApp(app).mount('#app')</script>
There can be multiple methods in an event handler, separated by a comma operator:
v-on
<divid="app"><!--the one() and two()
Execute button click event--><button@click="one($event),
two($event)">Click me</button></div><script>const app = { data() { },
methods: { one(event) { alert("The first event handler logic...") }, two(event) {
alert("Second Event Processor Logic...") } } }
Vue.createApp(app).mount('#app')</script>
Event modifier
Vue.js provide v-on event modifiers are provided to handle DOM event details, such as: event.preventDefault() or event.stopPropagation() .
Vue.js pass by the point . represents the instruction suffix to invoke the modifier.
.stop-stop bubbling.prevent-block default events.capture-prevent capture.self-listen only for events that trigger this element.once-trigger only once.left-left button event.right-right button event.middle-Intermediate wheel event
<!-- Prevent click events from bubbling -->
<a v-on:click.stop="doThis"></a>
<!-- Submitting an event will no longer overload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- Decorators can be concatenated -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- Only modifiers -->
<form v-on:submit.prevent></form>
<!-- Use event capture mode when adding event listeners -->
<div v-on:click.capture="doThis">...</div>
<!-- Trigger callback only when the event is triggered on the element itself (not on its child elements) -->
<div v-on:click.self="doThat">...</div>
<!-- Click event can only be clicked once, added in version 2.1.4 -->
<a v-on:click.once="doThis"></a>
Key modifier
Vue allows for v-on add a button modifier when listening for keyboard events:
<!-- Only called when keyCode is 13 vm.submit() -->
<input v-on:keyup.13="submit">
Remember everything. keyCode is difficult, so Vue provides aliases for the most commonly used keys:
<!-- the same as above -->
<input v-on:keyup.enter="submit">
<!-- Abbreviation syntax -->
<input @keyup.enter="submit">
All key aliases:
.enter.tab.delete(capture “delete” and “backspace” keys).esc.space.up.down.left.right
System modifier key:
.ctrl.alt.shift.meta
Mouse button modifier:
.left.right.middle
Example
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
.exact modifier
.exact modifiers allow you to control events triggered by a precise combination of system modifiers.
Example
<!-- Even if Alt or Shift are pressed together, it will trigger -->
<button @click.ctrl="onClick">A</button>
<!-- Triggered only when Ctrl is pressed -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- Triggered only when no system modifier is pressed -->
<button @click.exact="onClick">A</button>