Обробка подій ​

Прослуховування подій ​

Ми можемо використовувати директиву v-on, яку ми зазвичай скорочуємо до символу @, щоб слухати події DOM і запускати потрібний JavaScript, коли дані події виконуються. Це виглядатиме як v-on:click="handler" або скорочено @click="handler".

Значення обробника може бути одним із наступних:

1. Вбудовані обробники: вбудований JavaScript буде виконано, коли ініціюється певна подія (подібно до рідного атрибута onclick).

2. Обробники методів: ім’я властивості або шлях, що вказує на метод, визначений у компоненті.

Вбудовані обробники ​

Вбудовані обробники зазвичай використовуються в простих випадках, наприклад:

const count = ref(0)

data() {
  return {
    count: 0
  }
}

<button @click="count++">Додати 1</button>
<p>Рахунок: {{ count }}</p>

Обробники методів ​

Логіка для багатьох обробників подій буде складнішою, і, ймовірно, неможлива з вбудованими обробниками. Ось чому v-on також може прийняти назву або шлях методу компонента, який ви хочете викликати.

Наприклад:

const name = ref('Vue.js')

function greet(event) {
  alert(`Привіт, ${name.value}!`)
  // `event` є рідною подією DOM
  if (event) {
    alert(event.target.tagName)
  }
}

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // `this` всередині методів вказуює на поточний активний екземпляр
    alert(`Привіт, ${this.name}!`)
    // `event` є рідною подією DOM
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` — назва методу, визначеного вище -->
<button @click="greet">Привітати</button>

Обробник методу автоматично отримує власний об’єкт події DOM, який ініціює його – у наведеному вище прикладі ми можемо отримати доступ до елемента, який відправляє подію через event.target.tagName.

Метод проти вбудованого виявлення ​

Компілятор шаблону виявляє обробники методів, перевіряючи, чи є рядок значення v-on дійсним ідентифікатором JavaScript або шляхом доступу до властивості. Наприклад, foo, foo.bar і foo['bar'] розглядаються як обробники методів, тоді як foo() і count++ розглядаються як вбудовані обробники.

Виклик методів у вбудованих обробниках ​

Замість прив'язки безпосередньо до імені методу ми також можемо викликати методи у вбудованому обробнику. Це дозволяє нам передавати спеціальні аргументи методу замість рідної події:

function say(message) {
  alert(message)
}

methods: {
  say(message) {
    alert(message)
  }
}

<button @click="say('Слава')">Скажи Слава</button>
<button @click="say('Україні')">Скажи Україні</button>

Доступ до аргументу події у вбудованих обробниках ​

Іноді нам також потрібно отримати доступ до оригінальної події DOM у вбудованому обробнику. Ви можете передати його в метод за допомогою спеціальної змінної $event або використати вбудовану стрілочну функцію:

<!-- using $event special variable -->
<button @click="warn('Форму ще не можна надіслати.', $event)">
  Надіслати
</button>

<!-- using inline arrow function -->
<button @click="(event) => warn('Форму ще не можна надіслати.', event)">
  Надіслати
</button>

function warn(message, event) {
  // тепер ми маємо доступ до рідної події
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

methods: {
  warn(message, event) {
    // тепер ми маємо доступ до рідної події
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

Модифікатори подій ​

Дуже часто потрібно викликати event.preventDefault() або event.stopPropagation() всередині обробників подій. Хоча ми можемо це легко зробити всередині методів, було б краще, якби методи стосувалися виключно логіки даних, а не мали справу з деталями подій DOM.

Щоб розв'язати цю проблему, Vue надає модифікатори подій для v-on. Нагадаємо, що модифікатори — це директивні постфікси, які позначаються крапкою.

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

<!-- розповсюдження події click буде зупинено -->
<a @click.stop="doThis"></a>

<!-- подія надсилання більше не перезавантажуватиме сторінку -->
<form @submit.prevent="onSubmit"></form>

<!-- модифікатори можуть бути виражені у вигляді ланцюжка -->
<a @click.stop.prevent="doThat"></a>

<!-- лише модифікатор -->
<form @submit.prevent></form>

<!-- лише обробник тригера, якщо event.target є самим елементом -->
<!-- тобто, не з дочірнього елемента -->
<div @click.self="doThat">...</div>

Модифікатори .capture, .once і .passive вказують на параметри власного методу addEventListener:

<!-- використовувати режим захоплення під час додавання прослуховувача подій -->
<!-- тобто подія, спрямована на внутрішній елемент, обробляється тут, перш ніж оброблятися цим елементом -->
<div @click.capture="doThis">...</div>

<!-- подія клацання буде ініційована щонайбільше один раз -->
<a @click.once="doThis"></a>

<!-- типова поведінка події прокручування відбудеться -->
<!-- негайно, замість того, щоб чекати завершення `onScroll` -->
<!-- якщо він містить `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

Модифікатор .passive зазвичай використовується зі слухачами подій touch (дотику) для підвищення продуктивності на мобільних пристроях.

Ключові модифікатори ​

Під час прослуховування подій клавіатури нам часто потрібно перевіряти певні клавіші. Vue дозволяє додавати ключові модифікатори для v-on або @ під час прослуховування ключових подій:

<!-- викликати `submit` лише тоді, коли `key` є клавішею `Enter` -->
<input @keyup.enter="submit" />

Ви можете безпосередньо використовувати будь-які дійсні назви ключів, надані через KeyboardEvent.key як модифікатори, перетворивши їх на kebab-case.

<input @keyup.page-down="onPageDown" />

У наведеному вище прикладі обробник буде викликано, лише якщо event.key дорівнює 'PageDown'.

Ключові псевдоніми ​

Vue надає псевдоніми для найбільш часто використовуваних ключів:

• .enter
• .tab
• .delete (стосується клавіш «Delete» і «Backspace».)
• .esc
• .space
• .up
• .down
• .left
• .right

Клавіші-модифікатори системи ​

Ви можете використовувати такі модифікатори, щоб запускати слухачів подій миші або клавіатури, лише коли натиснуто відповідну клавішу-модифікатор:

• .ctrl
• .alt
• .shift
• .meta

Наприклад:

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Зробити щось</div>

Модифікатор .exact ​

Модифікатор .exact дозволяє керувати точною комбінацією системних модифікаторів, необхідних для ініціювання події.

<!-- це спрацює, навіть якщо також натиснути Alt або Shift -->
<button @click.ctrl="onClick">A</button>

<!-- це спрацює лише тоді, коли не натиснуто Ctrl і жодних інших клавіш -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- це запускатиметься лише тоді, коли не буде натиснуто системних модифікаторів -->
<button @click.exact="onClick">A</button>

Модифікатори кнопок миші ​

• .left
• .right
• .middle

Ці модифікатори обмежують обробник подіями, викликаними певною кнопкою миші.