Обработка событий

Когда мы хотим прослушивать события DOM, мы можем использовать директиву v-on, а затем выполнять некоторую инструкцию или выражение JavaScript, когда они запускаются.

Например:

  

Была нажата кнопка {{ counter}} раз.

var example1 = new Vue ({el: '# example-1', data: {counter: 0}})

Обработчики событий метода

Иногда реализуемая логика может быть очень сложной, и поэтому мы не сможем разместить наш JavaScript в атрибуте v-on. . Следовательно, v-on принимает имя метода, который мы хотели бы вызвать. Например:

  
var example2 = new Vue ({el: '# example-2', data: {name: 'Vue.js'},//определяет в рамках метода объекта `methods` методы: {greets: function (event) {//` this` внутри методов указывает на экземпляр Vue alert ('Hello' + this.name + '!')//`event` - это собственное событие DOM if (event) {alert (event.target.tagName)}}}})//методы также могут быть вызваны в JavaScript как wellexample2.greet ()//=> 'Hello Vue.js!'

Методы во встроенных обработчиках

Мы можем использовать метод во встроенном операторе JavaScript вместо непосредственной привязки к имени метода:

  
новый Vue ({el: '# example-3', methods: {reply: function (message) {alert (me ssage)}}})

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

Чтобы изменить обычное событие, мы вызываем событие. preventDefault () или event.stopPropagation () внутри обработчиков событий. Всегда лучше, чтобы ваши методы имели дело исключительно с логикой данных, вместо того, чтобы иметь дело с деталями событий DOM. Vue предоставляет нам некоторые модификаторы событий для v-on.

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
               ...    ...   

Версия 2.1.4+ предоставила нам с .once:

      

Версия 2.3.0+ предоставляет модификатор .passive, который соответствует пассивной опции addEventListener.

      ...   

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

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

     

Коды клавиш

Также разрешено использовать keyCode в Vue:

.

    
  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

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

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

  • .ctrl
  • .alt
  • .shift
  • .meta

.exact Modifier

Это стало доступно в Vue 2.5.0+ и позволяет контролировать точную комбинацию системы. модификаторы должны запускать событие.

         

Модификаторы кнопок мыши

Они были добавлены в версии 2.2.0+ и ограничивают обработчик событиями, запускаемыми определенной кнопкой мыши.

  • .left
  • .right
  • .middle

Почему слушатели в HTML?

Погодите, зачем добавлять прослушиватели событий в HTML? Преимущества обработчиков событий в HTML:

  1. Легче найти реализации функции обработчика в вашем JS-коде, просматривая HTML-шаблон.
  2. Поскольку вам не нужно вручную прикреплять прослушиватели событий в JS, ваш код ViewModel также может быть чистой логикой и без DOM.. Это упрощает тестирование.
  3. Каждый раз, когда ViewModel уничтожается, все прослушиватели событий автоматически удаляются. Вам не нужно беспокоиться о том, чтобы очистить его самостоятельно.
Оцените статью
nanomode.ru
Добавить комментарий