Vue.js для начинающих: события, атрибуты и методы

Этот урок посвящен работе с событиями, методами и HTML-атрибутами в Vue.js.

События

Рассмотрим изменение переменной title при клике на элемент. Для этого используется директива v-on (или её сокращенная форма @). v-on указывает Vue.js на необходимость обработки событий.

Создадим простой <span>:

<span>Текст</span>

Добавим директиву v-on:click (или @click) для обработки клика:

<span v-on:click="title = 'Новый текст'">Текст</span>

Или, используя сокращенную форму:

<span @click="title = 'Новый текст'">Текст</span>

При клике, переменная title станет «Новый текст». Аналогично используются другие события, например, v-on:mouseover (@mouseover):

<span @mouseover="title = 'Текст при наведении'">Текст</span>

Методы

Вместо прямого изменения данных, можно вызывать методы. Создадим метод changeText в объекте methods в main.js:

methods: {
  changeText: function() {
    this.title = 'Какой-либо новый текст';
  }
}

this обеспечивает доступ к переменным объекта данных. Вызовем метод при событии @mouseover:

<span @mouseover="changeText">Текст</span>

При наведении, changeText выполнится, изменив title.

HTML-атрибуты

Рассмотрим управление HTML-атрибутами, например, class. Добавим переменную styleCSS в данные:

data: {
  title: 'Заголовок',
  styleCSS: ''
}

Создадим абзац для вывода styleCSS:

<p>{{ styleCSS }}</p>

Для динамического изменения class используем v-bind (или :):

<input type="text" @input="styleCSS = $event.target.value">
<p :class="styleCSS"></p>

Или, сокращенно:

<input type="text" @input="styleCSS = $event.target.value">
<p :class="styleCSS"></p>

При вводе текста, styleCSS меняется, изменяя класс абзаца. $event.target.value содержит введенное значение.

Мы изучили работу с событиями, методами и HTML-атрибутами в Vue.js. Директивы v-on, @, v-bind и : позволяют эффективно управлять динамикой страницы. Мы научились изменять данные и вызывать функции в ответ на действия пользователя и изменения данных.