Обработка событий

Когда мы хотим прослушать события DOM, мы можем использовать директиву v-on, а затем выполнить некоторую инструкцию или выражение JavaScript при их срабатывании.

Например:

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button was clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Обработчики событий метода

Иногда реализуемая логика может быть очень сложной, и поэтому мы не сможем поместить наш JavaScript в атрибут v-on. Следовательно, v-on принимает имя метода, который мы хотели бы вызвать. Например:

<div id="example-2">
  <!-- `greets` is the name of a method that is defined below -->
  <button v-on:click="greet">Greets</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // defines the method under the `methods` object
  methods: {
    greets: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
// methods can also be invoked in JavaScript as well
example2.greet() // => 'Hello Vue.js!'

Методы в встроенных обработчиках

Мы можем использовать метод во встроенном операторе JavaScript вместо привязки непосредственно к имени метода:

<div id="example-3">
  <button v-on:click="reply('hi')">Say hi</button>
  <button v-on:click="reply('what')">Say what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    reply: function (message) {
      alert(message)
    }
  }
})

Модификаторы событий

Чтобы изменить обычное событие, мы делаем вызов event.preventDefault () или event.stopPropagation () внутри обработчиков событий. Всегда лучше, чтобы ваши методы имели дело исключительно с логикой данных, а не с деталями событий DOM. Vue предоставляет нам некоторые модификаторы событий для v-on.

• .стоп
• .предотвращать
• .захватить
• .self
• .один раз
• .passive

<!-Here the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-In this case the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-chaining modifiers-->
<a v-on:click.stop.prevent="doThat"></a>
<!-- the modifier alone -->
<form v-on:submit.prevent></form>
<!-using capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is always handled here before being handled by that element -->
<span v-on:click.capture="doThis">...</span>
<!-You should only trigger handler if event.target is the element itself -->
<span v-on:click.self="doThat">...</span>

Версия 2.1.4+ предоставила нам .once:

<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>

Версия 2.3.0+ предоставляет модификатор .passive, который соответствует пассивной опции addEventListener.

<!-- the scroll event's default behavior will happen -->
<!-- immediately, instead of waiting for `onScroll` to be completed  -->
<!-- whenever it contains `event.preventDefault()` -->
<span v-on:scroll.passive="onScroll">...</span>

Ключевые модификаторы

Когда нам нужно прослушать события для определенных клавиш, мы можем использовать директиву v-on:

<!-- call `vm.submit()`only when the `key` is `Enter` -->
<input v-on:keyup.enter="submit">

Ключевые коды

Также разрешено использовать keyCode в Vue:

<input v-on:keyup.13="submit">

• .войти
• .tab
• .удалять
• .esc
• .пространство
• .up
• .вниз
• .оставил
• .право

Ключи модификатора системы

Приведенные ниже модификаторы можно использовать для запуска прослушивателей событий мыши или клавиатуры:

• .ctrl
• .alt
• .сдвиг
• .мета

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

Это стало доступно в Vue 2.5.0+ и позволяет контролировать точную комбинацию системы. Модификаторы должны вызывать событие.

<!-- this fires even if Alt or Shift is also pressed -->
<button @click.ctrl="onClick">A</button>
<!-- this only fires when Ctrl and no other keys are pressed -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-this only fires when no system modifiers are pressed -->
<button @click.exact="onClick">A</button>

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

Они были добавлены в версии 2.2.0+ и ограничивают обработчик событиями, вызываемыми определенной кнопкой мыши.

• .оставил
• .право
• .middle

Почему слушатели в HTML?

Подождите, зачем добавлять обработчики событий в HTML? Преимущества обработчиков событий в HTML:

1. Проще найти реализации функций-обработчиков в вашем коде JS, просматривая HTML-шаблон.
2. Поскольку вам не нужно вручную подключать прослушиватели событий в JS, ваш код ViewModel также может быть чисто логическим и без DOM. Это облегчает тестирование.
3. Всякий раз, когда ViewModel уничтожается, все прослушиватели событий автоматически удаляются. Вам не нужно беспокоиться о том, чтобы убрать это самостоятельно.