Подписка на события
Для подписки на события 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 уничтожается, все слушатели событий автоматически удаляются.
0 комментариев