Vue.js - очень мощная, простая в освоении и доступная библиотека, которая со знанием HTML, CSS и Javascript позволяет нам начать создавать в ней веб-приложения. Vue.js построен путем объединения лучших функций из уже существующих Angular и React Framework. Это прогрессивная и реактивная структура Javascript, которая используется для создания пользовательских интерфейсов (пользовательских интерфейсов) и SPA (одностраничных приложений), поэтому разработчики любят кодировать и чувствовать свободу и комфорт при разработке приложений на Vue.js. взгляните на прослушивание и обработку событий в Vue.js., мы узнаем, что он предоставляет директиву v-on для прослушивания и обработки событий. Мы можем использовать директиву v-on для прослушивания DOM и выполнения необходимых задач. Он также предоставляет множество обработчиков событий. Однако в этой статье мы узнаем и сосредоточимся только на событиях щелчка. Итак, приступим!
Как и событие onClick в JavaScript, Vue.js предоставляет v-on: click для прослушивания событий.
Синтаксис события v-on: click будет таким:
< кнопка v-on: нажмитезнак равно'functionName'>Нажмите</ кнопка >
Vue.js также предоставляет сокращение @ вместо использования v-on.
< кнопка @clickзнак равно'functionName'> Щелкните</ кнопка >
Vue.js не останавливается только на прослушивании события щелчка и вызове функции. Это также позволит нам напрямую писать любые арифметические операции или все, что связано с Javascript, внутри кавычек. Именно так:
< кнопка @clickзнак равно'число + = 1'> Добавить</ кнопка >
Vue.js позволяет нам вызывать метод или функцию во встроенном выражении Javascript, как показано ниже:
< кнопка @clickзнак равно'сообщение (' Привет ')'> Показать</ кнопка >Используя обработчики событий Vue.js, мы также можем получить доступ к событию DOM, используя встроенный оператор, передав специально предоставленную Vue.js переменную $ event в аргумент метода, как в примере ниже:
< кнопка @clickзнак равно'сообщение (' Привет ', $ event)'> Отправить</ кнопка >
Vue.js также позволяет нам вызывать несколько функций или методов. Мы можем вызвать несколько функций и разделить их запятыми, как в этом примере:
< кнопка @clickзнак равно'первый (' Привет '), второй (' Привет ', $ event)'> Отправить</ кнопка >Vue.js также предоставляет модификаторы событий.
Модификаторы событий
Нам часто нужно вызывать модификаторы вместе с событиями. Итак, Vue.js предоставляет некоторые из следующих модификаторов:
.останавливаться
Это остановит передачу события клика.
< к @ click.stopзнак равно'сделай это'></ к >.не допустить
Это предотвратит перезагрузку или перенаправление страницы.
< форма @ submit.preventзнак равно'onSubmit'></ форма >.однажды
Это вызовет событие щелчка только один раз.
< к @ click.onceзнак равно'сделай это'></ к >.захватывать
В основном он используется для добавления прослушивателя событий.
< div @ click.captureзнак равно'сделай это'> ...</ div >Мы также можем связать модификаторы. Однако имейте в виду, что порядок модификаторов имеет значение и повлияет на результаты.
< к @ click.stop.preventзнак равно'сделай это'></ к >Заключение
В этой статье мы рассмотрели все концепции обработки событий Click от новичка до уровня ниндзя. Мы узнали о различных синтаксисах записи событий щелчка и различных способах использования v-on:click директива, предоставленная Vue.js для удобства разработчиков и различных модификаторов событий. Чтобы получить более полезный контент, связанный с Vue.js, продолжайте посещать linuxhint.com.