События Vue.js и их обработка

Понятие событий Vue.js

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

Каким образом ведет себя пользователь и в зависимости от его действий выполнять какую-то логику. 

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

Во Vue есть специальная директива которая позволяет нам подписываться на события, которые произошли с каким-то элементом. Так как это директива, то отслеживание этих самых событий будет происходить внутри нашего шаблона.

Директива Vue для работы с событиями

Для примера я подготовил небольшой шаблон, в котором есть простой элемент кнопки, по которой будет пользователь кликать и counter - число кликов.

<template>

<div>

<p>{{ counter }}</p>

<p><button>Кнопка</button></p>

</div>

</template>

Counter показывает сколько кликов сделал пользователь по кнопке. 

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

Т.к. эта директива, мы её прописываем как атрибут для нашего элемента. Далее ставится знак двоеточия и указывается тот тип события который будет применяться. Эти события очень похожи на события JavaScript. И первое событие, которое мы с вами рассмотрим - это событие клика по какому-то элементу: событие click.

В кавычках мы должны прописать какую-то логику, которая должна у нас выполняться. Если мы будем взаимодействовать с уровнем данных, мы с вами можем воспользоваться упрощенной формой записи для этой логики. Нам здесь не нужно использовать конструкций this, т.к. на уровне шаблона для того, чтобы обратиться к нашему уровню данных мы не пишем с вами конструкцию this потому, что это не просто Javascript, а это шаблон и здесь уже в шаблоне есть все необходимые переменные для доступа к уровню данных. 

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

<p><button v-on:click="counter = counter + 1">Кнопка</button></p>

При каждом клике по нашей кнопке, значение counter будет увеличиваться на единицу. 

Упрощенная форма записи

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

Мы можем здесь написать упрощенную форму записи.

v-on:click="counter++"

И это точно также будет работать.

Кроме того, для конструкции v-on упрощённая форма записи, которую чаще всего вы и будете будете встречать в компонентах выглядит следующим образом:

<p><button @click="counter++">Кнопка</button></p>

Вот такие вводные несколько слов по поводу событий во Vue.js: как мы можем на них подписаться. В следующих видео мы уже с вами более подробно рассмотрим, как можно работать с этими событиями.