Для чого використовується v-on?
v-on - це директива Vue, яка використовується для прив'язки обробників подій до елементів або компонентів.
Простими словами:
v-onдозволяє "слухати" події (click, input, submit, keyup тощо) і викликати методи або вирази Vue.
Основне призначення v-on
1. Обробка подій DOM
javascript
<button v-on:click="increment">+</button>Скорочення:
javascript
<button @click="increment">+</button>2. Передавання аргументів у методи
javascript
<button @click="sayHello('Vue')">Click</button>І метод:
javascript
methods: {
sayHello(name) {
console.log(`Hello, ${name}`);
}
}3. Використання inline-виразів
javascript
<button @click="count++">+</button>4. Модифікатори подій
Модифікатори уточнюють поведінку події:
Керування поширенням і стандартною поведінкою
javascript
<button @click.stop="doSomething"></button>
<button @click.prevent="submit"></button>
<button @click.stop.prevent="mixed"></button>.stop→event.stopPropagation().prevent→event.preventDefault()
Одноразове виконання
javascript
<button @click.once="init"></button>Спрацьовування тільки на елементі (не на дочірніх)
javascript
<button @click.self="onSelf"></button>Робота з клавіатурою
javascript
<input @keyup.enter="send">Vue вміє:
- enter
- tab
- esc
- space
- up/down/left/right
- ctrl, shift, alt, meta
Модифікатор .capture
javascript
<button @click.capture="handle">...</button>Слухає подію на фазі capture, а не bubble.
Модифікатор .passive
Використовується для оптимізації scroll-обробників:
javascript
<div @scroll.passive="handleScroll"></div>5. Слухати користувацькі події компонента
javascript
<MyButton @click="submit"/>Якщо компонент емітить:
javascript
this.$emit('click')6. Динамічне ім'я події
javascript
<button v-on:[eventName]="handler">Press</button>javascript
eventName = "dblclick"Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.