Подписка на события

Для подписки на события DOM и выполнения JavaScript-кода по их наступлении, используйте директиву v-on.

<div id="example-1">
  <button v-on:click="counter += 1">+1</button>
  <p>Кнопка выше была нажата {{counter}} раз</p>
</div>
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

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

Логика обработки события может быть сложной, поэтому v-on может принять название метода, который нужно вызвать.

<div id="example-2">
  <!-- `greet` — это название метода, определённого ниже -->
  <button v-on:click="greet">Поприветствовать</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // определяйте методы в объекте `methods`
  methods: {
    greet: function (event) {
      // `this` внутри методов указывает на экземпляр Vue
      alert('Привет, ' + this.name + '!')
      // `event` — нативное событие DOM
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// вызывать методы можно и императивно
example2.greet() // => 'Привет, Vue.js!'

Методы и inline-обработчики

Связаться с методом можно не по имени, а вызвав в JavaScript-выражении.

<div id="example-3">
  <button v-on:click="say('hi')">Скажи hi</button>
  <button v-on:click="say('what')">Скажи what</button>
</div>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

Передать оригинальное событие DOM в метод inline-обработчика можно через специальную переменную $event:

<button v-on:click="warn('Форма пока что не может быть отправлена.', $event)">
  Отправить
</button>
// ...
methods: {
  warn: function (message, event) {
    // теперь у нас есть доступ к нативному событию
    if (event) event.preventDefault()
    alert(message)
  }
}

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

При необходимости вызвать event.preventDefault() или event.stopPropagation() в обработчике события нужно использовать модификаторы событий для v-on.

Модификаторы директив указываются как постфиксы и отделяются точкой.

Конечно, это можно сделать внутри метода, но лучше сохранить чистоту логики и абстрагироваться от деталей реализации событий DOM.

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
<!-- событие click не будет всплывать дальше -->
<a v-on:click.stop="doThis"></a>

<!-- событие submit больше не будет перезагружать страницу -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- модификаторы можно объединять в цепочки -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- и использовать без указания пользовательского обработчика -->
<form v-on:submit.prevent></form>

<!-- при добавлении слушателя события можно использовать capture mode -->
<!-- т.е. событие, нацеленное на внутренний элемент, обрабатывается здесь после обработки этим элементом -->
<div v-on:click.capture="doThis">...</div>

<!-- вызывать обработчик только в случае наступления события непосредственно -->
<!-- на данном элементе (то есть не на дочернем компоненте) -->
<div v-on:click.self="doThat">...</div>

Порядок модификаторов имеет значение, так как код генерируется в указанном порядке. Использование @click.prevent.self будет предотвращать все клики, а @click.self.prevent будет предотвращать клики только на самом элементе.

<!-- Событие click сработает только 1 раз -->
<a v-on:click.once="doThis"></a>

Модификатор .once в отличие от остальных, которые поддерживают нативные DOM-события, можно использовать и в пользовательских событиях компонентов.

Модификаторы клавиш

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

<!-- вызвать `vm.submit()` только если `keyCode` равен 13 -->
<input v-on:keyup.13="submit">

Vue предоставляет псевдонимы для часто используемых кодов клавиш:

<!-- аналогично примеру выше -->
<input v-on:keyup.enter="submit">

<!-- работает также и в сокращённой записи -->
<input @keyup.enter="submit">
  • .enter
  • .tab
  • .delete (ловит как “Delete”, так и “Backspace”)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

Можно также определить пользовательские псевдонимы клавиш через глобальный объект config.keyCodes:

// позволит использовать `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

Автоматические модификаторы клавиш

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

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

В примере обработчик будет вызван если $event.key === 'PageDown'.

Системные модификаторы клавиш

Можно использовать следующие модификаторы, чтобы отслеживать события мыши или клавиатуры с зажатой клавишей-модификатором:

  • .ctrl
  • .alt
  • .shift
  • .meta
<!-- Alt + C -->
<input @keyup.alt.67="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

Почему подписчики указываются в HTML?

Все обработчики во Vue строго связываются с ответственным за текущее представление экземпляром vm. Поэтому трудностей в поддержке не возникает.
Преимущества использования v-on:

  • Легче получить представление об обработчиках
  • Код vm остаётся независимым от DOM и содержит только необходимую логику, так как не нужно вручную привязывать слушателей событий в JavaScript.
  • Когда vm уничтожается, все слушатели событий автоматически удаляются.