Suggest an edit

Improve this article

Refine the answer for “What is v-on used for?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`v-on` is a Vue directive used to **bind event handlers to elements or components**.

In simple terms:

> `v-on` **lets you "listen" for events (click, input, submit, keyup, etc.) and call Vue methods or expressions.**

---

## The main purpose of `v-on`

### 1. **Handling DOM events**

```javascript
<button v-on:click="increment">+</button>
```

Shorthand:

```javascript
<button @click="increment">+</button>
```

---

## 2. **Passing arguments to methods**

```javascript
<button @click="sayHello('Vue')">Click</button>
```

And the method:

```javascript
methods: {
  sayHello(name) {
    console.log(`Hello, ${name}`);
  }
}
```

---

## 3. **Using inline expressions**

```javascript
<button @click="count++">+</button>
```

---

## 4. **Event modifiers**

Modifiers refine the event's behavior:

#### Controlling propagation and default behavior

```javascript
<button @click.stop="doSomething"></button>
<button @click.prevent="submit"></button>
<button @click.stop.prevent="mixed"></button>
```

- `.stop` → `event.stopPropagation()`
- `.prevent` → `event.preventDefault()`

---

#### Running once

```javascript
<button @click.once="init"></button>
```

---

#### Triggering only on the element itself (not on children)

```javascript
<button @click.self="onSelf"></button>
```

---

#### Working with the keyboard

```javascript
<input @keyup.enter="send">
```

Vue understands:

- enter
- tab
- esc
- space
- up/down/left/right
- ctrl, shift, alt, meta

---

#### The `.capture` modifier

```javascript
<button @click.capture="handle">...</button>
```

Listens for the event during the **capture** phase, not the bubble phase.

---

#### The `.passive` modifier

Used for optimizing scroll handlers:

```javascript
<div @scroll.passive="handleScroll"></div>
```

---

## 5. **Listening to a component's custom events**

```javascript
<MyButton @click="submit"/>
```

If the component emits:

```javascript
this.$emit('click')
```

---

## 6. **Dynamic event name**

```javascript
<button v-on:[eventName]="handler">Press</button>
```

```javascript
eventName = "dblclick"
```

Markdown · drag & drop images · ⌘B / ⌘I shortcuts242 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.