Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить директива `v-on`?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Директива **`v-on`** використовується для **прослуховування подій** і виклику методів у відповідь на дії користувача чи події браузера. **Ключове:** `v-on` зв'язує подію (click, input, change, keyup тощо) з обробником у компоненті - це основний механізм обробки подій у Vue.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняДиректива `v-on` використовується для **прослуховування подій** і виклику методів у відповідь на дії користувача або події браузера. Простіше кажучи: > `v-on` **зв'язує подію (click, input, change, keyup тощо) з обробником у компоненті.** Це основний механізм обробки подій у Vue. --- ## Базове використання ```html <button v-on:click="handleClick">Клік</button> ``` Скорочення (використовується майже завжди): ```html <button @click="handleClick">Клік</button> ``` --- ## Що робить `v-on` під капотом? Воно: 1. знаходить DOM-елемент 2. підписується на подію (`addEventListener`) 3. викликає метод компонента, коли подія спрацьовує --- ## Приклад ```vue <template> <input @input="onInput"> </template> <script> export default { methods: { onInput(e) { console.log("Введено:", e.target.value) } } } </script> ``` --- ## Що можна передавати в обробник? ### Виклик методу ```html <button @click="increase">+</button> ``` ### Inline-вираз ```html <button @click="count++">+</button> ``` ### Аргументи ```html <button @click="sayHello('Vue')">Привіт</button> ``` ### Об'єкт події ```html <button @click="handle($event)">Click</button> ``` --- ## Модифікатори v-on Vue підтримує безліч модифікаторів для роботи з подіями: #### Керування спливанням: ```html @click.stop <!-- event.stopPropagation() --> @click.prevent <!-- event.preventDefault() --> @click.stop.prevent ``` #### Одноразове виконання: ```html @click.once ``` #### Тригер лише при кліку по самому елементу: ```html @click.self ``` #### Фаза захоплення (capturing): ```html @click.capture ``` #### Passive-слухачі: ```html @scroll.passive ``` #### Модифікатори клавіш (key modifiers): ```html @keyup.enter @keyup.esc @keyup.ctrl.enter ``` --- ## Використання з компонентами Можна слухати події, які компонент сам "емітить": ```html <MyButton @click="submit" /> ``` Якщо компонент усередині викликає: ```js this.$emit('click') ``` то `v-on` спрацює. --- ## Динамічне ім'я події Можна підписатися на подію, назва якої обчислюється: ```html <button v-on:[dynamicEvent]="onEvent"> ``` ```js dynamicEvent = "dblclick" ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.