Управление событиями с помощью Vue.js

Development, Java | Amber | Комментировать запись

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

Как работает v-on

Взаимодействие пользователя с представлением (или видом приложения) может запускать в DOM события (например, к событиям относятся клик мышки или нажатие клавиши). Директиву v-on можно использовать для обработки этих событий.

В качестве простого примера мы можем написать счетчик, которы будет подсчитывать каждое нажатие кнопки пользователем. Начнем с инициализации в модели данных счетчика со значением 0:

data() {
  return {
    count: 0
  }
}

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

<label>Count is: {{count}}</label>
<button v-on:click="count++">Increment</button>

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

В этом случае он увеличит значение счетчика на единицу.

Привязка методов к v-on

Мы можем привязать методы к событиям, используя их имена.

<input v-model="addValue">
<button v-on:click="addToCount">Add</button>

Указанный в шаблоне метод addToCount можно определить в модели следующим образом.

methods: {
  addToCount: function() {
    this.count = this.count + parseInt(this.addValue);
  }
}

Метод addToCount будет принимать входные данные от addValue и добавлять их к счетчику.

Сокращенный синтаксис v-on

Вместо полного синтаксиса объявления событий v-on мы можем использовать символ @:

<button @click="addToCount">Add</button>

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

Есть ряд вызовов, которые часто выполняются при обработке событий. Vue упростил их реализацию с помощью модификаторов.

Например, при обработке событий часто вызывается event.preventDefault(), чтобы предотвратить стандартное поведение браузеров.

Вместо того, чтобы записывать вызовы в методах, мы можем использовать модификаторы, которые по умолчанию идут вместе с директивой vue-on.

<a href="test" @click.prevent="addToCount">Add</a>

Приведенный выше код удалит поведение тега <a> по умолчанию и просто вызовет метод addToCount. Если бы мы не добавили модификатор, страница попыталась бы перенаправить нас на путь, указанный в атрибуте href.

В Vue доступны следующие модификаторы:

• stop – предотвращает всплытие событий в дереве DOM.
• prevent – предотвращает стандартное поведение.
• capture – режим захвата используется для обработки событий.
• self – запускается только в том случае, если целью события является оно само.
• once – запускает функцию не более одного раза

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

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

<input v-on:keyup.13="addToCount" v-model="addValue">

Когда в приведенном выше примере событие keyup запускается с кодом клавиши 13 (это клавиша Enter), вызывается метод addToCount.

Поскольку все коды клавиш запомнить сложно, Vue предоставляет набор предварительно определенных клавиш, например: enter, tab, delete, esc, space и left.

Кроме того, вы можете присвоить клавишам пользовательские псевдонимы:

Vue.config.keyCodes.a = 65

Читайте также: Как работают хуки жизненного цикла в Vue.js