Узнайте, как повысить уровень обработки событий с помощью директивы Vue v-on.

Прослушивание пользовательских событий является неотъемлемой частью любого адаптивного веб-приложения, и приложения Vue не являются исключением. Vue поставляется с простым и эффективным способом обработки событий с помощью директивы v-on.

Что такое привязка событий в Vue?

Привязка событий — это функция Vue.js, которая позволяет вам прикреплять прослушиватель событий к Объектная модель документа (DOM) элемент. Когда происходит событие, прослушиватель событий запускает действие или ответ в вашем приложении Vue.

Вы можете добиться привязки событий в Vue с помощью v-на директива. Эта директива позволяет вашему приложению прослушивать пользовательские события, такие как щелчок, ввод или нажатие клавиши.

Чтобы прикрепить прослушиватель событий к элементу, используя v-на, добавьте имя события в качестве параметра директивы:

<HTML>
<голова>
<сценарийисточник=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
голова>
<тело>

<дивидентификатор="приложение">
<кнопкаv-на: нажмите="счетчик++">Нажми на менякнопка>
<п>{{ прилавок}}п>
див>
<сценарий>
константа приложение = Vue.createApp({
 данные() {
возвращаться {
 текст: «Вью потрясающий!»,
 счетчик: 0
 }
 }
 })
 приложение.mount('#приложение')
сценарий>
тело>
HTML>

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

Приведенный выше блок кода связывает выражение JavaScript счетчик++ к кнопке нажмите событие с v-на директива. Vue использует @ символ в качестве сокращения вместо v-на директива из-за v-начастое использование:

<кнопка @нажмите="счетчик++">Нажми на менякнопка>

Привязка событий в Vue не ограничивается событиями кликов. Vue обрабатывает другие события, такие как события нажатия клавиш, события наведения мыши и многое другое.

Чтобы связать любое из этих событий с v-на директива, заменить нажмите событие с названием желаемого события:

<кнопка @keydown.enter="счетчик++">Нажми на менякнопка>

Приведенный выше код устанавливает прослушиватель событий на кнопка который прислушивается к нажатие клавиши событие. Когда любая клавиша нажата, когда кнопка находится в фокусе, Vue оценивает счетчик++ выражение.

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

Свойство методов в Объект опций Vue содержит важные функции, необходимые вашему приложению Vue для повышения реактивности. С помощью свойства методов в Vue вы можете обрабатывать сложную логику, основанную на событиях.

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

<HTML>
<голова>
<сценарийисточник=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
голова>
<тело>
<дивидентификатор="приложение">
<кнопка @нажмите="приращение">Добавить 1кнопка>
<кнопка @нажмите="уменьшать">уменьшить 1кнопка>
<п>{{ прилавок }}п>
див>
<сценарий>
 константное приложение = Vue.createApp({
 данные() {
 возвращаться {
 текст: 'Vue потрясающий!',
 счетчик: 0
 }
 },
 методы: {
 приращение () {
 этот.счетчик = этот.счетчик + 1
 },
 уменьшать() {
 этот.счетчик = этот.счетчик - 1
 }
 }
 })
 app.mount('#приложение')
сценарий>
тело>
HTML>

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

Приложение достигает этого с помощью @щелчок директива. @щелчок указывает на функции в свойстве method для управления значением счетчика.

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

Вот так:

<тело>
<дивидентификатор="приложение">
<кнопка @нажмите="приращение (5)">Добавить 5кнопка>
<кнопка @нажмите="уменьшить (3)">уменьшить 3кнопка>
<п>{{ прилавок }}п>
див>


<сценарий>
 константное приложение = Vue.createApp({
 данные() {
 возвращаться {
 текст: 'Vue потрясающий!',
 счетчик: 0
 }
 },
 методы: {
 приращение (число){
 этот.счетчик = этот.счетчик + число
 },
 уменьшить (число) {
 этот.счетчик = этот.счетчик - число
 }
 }
 })
 app.mount('#приложение')
сценарий>
тело>

Этот блок кода расширяет предыдущее приложение Vue, позволяя передавать аргументы методам, связанным с прослушивателем событий щелчка на кнопке.

Методы увеличения и уменьшения в экземпляре Vue принимают аргумент num для увеличения или уменьшения свойства счетчика.

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

Изучение модификаторов Prevent и Stop в Vue

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

Например:

<форма @отправить.предотвратить="обработатьОтправить">
<входтип="текст"v-модель="текст">
<кнопкатип="представлять на рассмотрение">Представлять на рассмотрениекнопка>
форма>

Блок кода выше связывает предотвращать модификатор события отправки. предотвращать модификатор обычно используется при работе с формами в Vue.

предотвращать Целью модификатора является предотвращение поведения по умолчанию при отправке формы, которое заключается в перезагрузке страницы. С использованием предотвращать, Vue может продолжать свои процессы, пока ручкаОтправить метод позаботится об отправке формы.

Другим примером очень полезного модификатора является останавливаться модификатор события. останавливаться модификатор события останавливает распространение события дальше вверх по дереву DOM.

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

Чтобы понять, как останавливаться модификатор останавливает распространение событий дальше вверх по дереву DOM, рассмотрим блок кода ниже:

<тело>
<дивидентификатор="приложение">
<див @нажмите="внешний клик"сорт="внешний">
<див @клик.стоп="внутренний клик"сорт="внутренний">
<кнопка @нажмите="КнопкаНажмите"сорт="кнопка">Нажми на менякнопка>
див>
див>
див>
<сценарий>
 константное приложение = Vue.createApp({
 методы: {
 внешний клик () {
 console.log('Внешний щелчок')
 },
 внутренний клик () {
 console.log('Внутренний щелчок')
 },
 кнопкаКлик() {
 console.log('Нажатие кнопки')
 }
 }
 });
 app.mount("#приложение");
сценарий>
тело>

Приведенный выше блок кода имеет три прослушивателя событий, прикрепленных к трем различным элементам. кнопка элемент находится внутри div с внутренний класс, в то время как div с внутренний класс находится внутри div с внешний сорт.

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

<голова>
<стиль>
 .внешний {
 отступ: 20 пикселей;
 цвет фона: черный;
 }
 .внутренний {
 отступ: 20 пикселей;
 цвет фона: серый;
 }
 кнопка {
 отступ: 10 пикселей;
 цвет фона: белый;
 граница: 2px сплошной черный;
 размер шрифта: 16px;
 вес шрифта: полужирный;
 курсор: указатель;
 }
стиль>
голова>

При запуске программы созданное приложение Vue будет выглядеть так:

Обратите внимание, что при нажатии кнопки программа вызывает кнопкаНажмите метод и записывает сообщение в консоль. Программа также вызывает внутренний клик метод.

Однако программа не вызывает внешний клик метод, потому что блок кода добавил останавливаться модификатор к внутренний клик прослушиватель событий. Это останавливает распространение события дальше по дереву DOM.

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

Обработка событий в веб-приложениях

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

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