Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Для чого використовується v-on?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`v-on` - це директива Vue, яка використовується для **прив'язки обробників подій до елементів або компонентів**. **Ключове:** `v-on` дозволяє "слухати" події (click, input, submit, keyup тощо) і викликати методи або вирази Vue.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`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" ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.