Suggest an editImprove this articleRefine the answer for “What does the `v-on` directive do?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)The **`v-on`** directive is used to **listen for events** and call methods in response to user actions or browser events. **Key point:** `v-on` binds an event (click, input, change, keyup, etc.) to a handler in the component - it is Vue's main mechanism for handling events.Shown above the full answer for quick recall.Answer (EN)ImageThe `v-on` directive is used to **listen for events** and call methods in response to user actions or browser events. In other words: > `v-on` **binds an event (click, input, change, keyup, etc.) to a handler in the component.** This is Vue's main mechanism for handling events. --- ## Basic usage ```html <button v-on:click="handleClick">Click</button> ``` Shorthand (used almost always): ```html <button @click="handleClick">Click</button> ``` --- ## What does `v-on` do under the hood? It: 1. finds the DOM element 2. subscribes to the event (`addEventListener`) 3. calls the component's method when the event fires --- ## Example ```vue <template> <input @input="onInput"> </template> <script> export default { methods: { onInput(e) { console.log("Entered:", e.target.value) } } } </script> ``` --- ## What can you pass to the handler? ### Calling a method ```html <button @click="increase">+</button> ``` ### An inline expression ```html <button @click="count++">+</button> ``` ### Arguments ```html <button @click="sayHello('Vue')">Hello</button> ``` ### The event object ```html <button @click="handle($event)">Click</button> ``` --- ## v-on modifiers Vue supports many modifiers for working with events: #### Controlling propagation: ```html @click.stop <!-- event.stopPropagation() --> @click.prevent <!-- event.preventDefault() --> @click.stop.prevent ``` #### Running once: ```html @click.once ``` #### Triggering only when clicking the element itself: ```html @click.self ``` #### Capturing phase: ```html @click.capture ``` #### Passive listeners: ```html @scroll.passive ``` #### Key modifiers: ```html @keyup.enter @keyup.esc @keyup.ctrl.enter ``` --- ## Using it with components You can listen for events that a component itself emits: ```html <MyButton @click="submit" /> ``` If the component internally calls: ```js this.$emit('click') ``` then `v-on` will fire. --- ## Dynamic event name You can subscribe to an event whose name is computed: ```html <button v-on:[dynamicEvent]="onEvent"> ``` ```js dynamicEvent = "dblclick" ```For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.