Базовое руководство по обработке событий в Vue
16 мая 2022 г.Как и любой фреймворк, Vue позволяет нам добавлять реактивность в наши приложения и веб-сайты с помощью событий. Самое замечательное в событиях Vue то, что они имитируют ванильный Javascript, поэтому все события, которые вы привыкли использовать в Javascript, также можно использовать во Vue.
События в Vue
Самым основным событием, часто используемым в Vue, а также в большинстве Javascript, является «щелчок». Компонент ниже представляет собой простой счетчик, который увеличивается на 1 при каждом нажатии кнопки. Для этого мы используем встроенное событие @click:
```javascript
<скрипт>
экспорт по умолчанию {
данные() {
возврат {
счетчик: 0
<шаблон>
<кнопка @click="++счетчик">
{{ прилавок }}
Поскольку мы можем писать встроенный Javascript прямо в наши события, мы можем просто написать ++counter, чтобы увеличить данные нашего счетчика. Таким образом, вышеизложенное будет увеличивать счетчик каждый раз, когда мы нажимаем кнопку и отображаем его в нашем элементе «кнопка».
Как упоминалось ранее, мы не ограничены только @click. Все остальные события Javascript тоже работают в том же формате. Это означает, что вы можете использовать:
@keydown
@mousedown
@указатель вниз
@указатель
@прокрутка
- и т.д.
Мы не ограничиваемся только запуском Javascript в соответствии с нашими событиями. Мы можем запустить метод или функцию, если они определены в нашем Vue Javascript. Вот тот же код, использующий вместо этого метод:
```javascript
<скрипт>
экспорт по умолчанию {
данные() {
возврат {
счетчик: 0
методы: {
incrCounter: функция () {
++это.счетчик
<шаблон>
<кнопка @click="incrCounter">
{{ прилавок }}
v-on и @ в Vue
Возможно, вы видели события, написанные как v-on:click, а не @click. Оба они означают одно и то же и взаимозаменяемы, поэтому используйте тот, который вам удобен!
СОБЫТИЯ, специфичные для мыши
Мы можем дополнительно изменить любые события мыши, используя модификаторы «left», «middle» и «right».
Если вы запускаете событие, связанное с мышью, например щелчок или mousedown, тогда mousedown.right будет отслеживать только правые щелчки мыши, а mousedown.middle будет отслеживать только средние щелчки мыши.
```javascript
{{ прилавок }}
{{ прилавок }}
{{ прилавок }}
Как использовать данные событий для событий Vue?
Иногда мы хотим получить доступ к событию или объекту e в наших событиях. В ситуациях, когда мы просто хотим получить доступ к e без каких-либо других аргументов, нам не нужно упоминать e — он автоматически передается непосредственно в функцию.
Например, приведенный ниже код по-прежнему будет отображать в консоли e.clientX и e.clientY всякий раз, когда пользователь нажимает кнопку:
```javascript
<скрипт>
экспорт по умолчанию {
данные() {
возврат {
счетчик: 0
методы: {
incrCounter: функция (е) {
++это.счетчик
console.log(e.clientX, e.clientY)
<шаблон>
<кнопка @click="incrCounter">
{{ прилавок }}
Все становится немного сложнее, когда у вас есть более двух аргументов.
В этих ситуациях есть два способа доступа к данным «события». Либо инкапсулируйте функцию, либо используйте предопределенную переменную $event.
Например, предположим, что мы хотим увеличить счетчик на пользовательскую величину и продолжить консольный журнал e.clientX и e.clientY. Это достижимо с помощью $event для передачи данных события в нашу функцию:
```javascript
<скрипт>
экспорт по умолчанию {
данные() {
возврат {
счетчик: 0
методы: {
incrCounter: функция (количество, e) {
++это.счетчик
console.log(e.clientX, e.clientY)
<шаблон>
{{ прилавок }}
В качестве альтернативы мы могли бы также передать объект e непосредственно в функцию следующим образом:
```javascript