События Vue.js

Vue.js позволяет нам перехватывать любое событие DOM с помощью директивы v-on для элемента. Эта тема является ключевой для создания интерактивного компонента.


Что такое события Vue.js

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

Если мы хотим что-то сделать, когда в этом элементе происходит событие щелчка:

<template>
  <a>Click me!</a>
</template>

мы добавляемv-onдиректива:

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>

Vue также предлагает для этого очень удобный альтернативный синтаксис:

<template>
  <a @click="handleClick">Click me!</a>
</template>

Вы можете использовать круглые скобки или нет.@click="handleClick"эквивалентно@click="handleClick()".

handleClickэто метод, прикрепленный к компоненту:

<script>
export default {
  methods: {
    handleClick: function(event) {
      console.log(event)
    }
  }
}
</script>

Более подробно методы описаны в моейРуководство по методам Vue.

Здесь вам нужно знать, что вы можете передавать параметры из событий:@click="handleClick(param)"и они будут получены внутри метода.

Доступ к исходному объекту события

Во многих случаях вам может потребоваться выполнить действие с объектом события или найти в нем какое-либо свойство. Как получить к нему доступ?

Используйте специальные$eventдиректива:

<template>
  <a @click="handleClick($event)">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(event) { console.log(event) } } } </script>

и если вы уже передали переменную:

<template>
  <a @click="handleClick('something', $event)">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(text, event) { console.log(text) console.log(event) } } } </script>

Оттуда вы могли позвонитьevent.preventDefault(), но есть способ лучше: модификаторы событий

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

Вместо того, чтобы возиться с «вещами» DOM в ваших методах, скажите Vue, чтобы он все делал за вас:

  • @click.preventвызовevent.preventDefault()
  • @click.stopвызовevent.stopPropagation()
  • @click.passiveиспользуетпассивная опция addEventListener
  • @click.captureиспользует захват событий вместо всплытия событий
  • @click.selfубедитесь, что событие щелчка не произошло из дочернего события, а произошло непосредственно с этим элементом
  • @click.onceсобытие будет срабатывать только один раз

Все эти параметры можно комбинировать, добавляя модификатор один за другим.

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

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: