Легко добавляйте интерактивность в свои приложения Vue.js с помощью обработки событий и применяйте различные модификаторы событий для настройки условий запуска событий.
Мы слушаем события в приложении, чтобы выполнять определенные действия, когда они происходят. Например, мы можем отображать содержимое или извлекать данные при нажатии кнопки, нажатии клавиши, изменении значения ввода текста и так далее. В этой статье мы узнаем, как обрабатывать события в приложениях Vue.js, чтобы обеспечить интерактивность.
Прослушивание событий в Vue.js
Чтобы прослушать событие, мы передаем обработчик директиве v-on, прикрепленной к элементу, например:
<button v-on:click="handler">Click me</button>Мы также можем использовать символ @ для более короткого синтаксиса:
<button @click="handler">Click me</button>В Vue.js есть два типа обработчиков событий: встроенные обработчики и обработчики методов.
Встроенные обработчики событий
Чтобы создать встроенный обработчик событий, мы передаем встроенный JavaScript, который будет выполняться при запуске события. Например:
<template> <p>Count: {{ count }}</p> <button @click="count++">Add 1</button> </template><script> export default { data() { return { count: 0, }; }, }; </script>
Обработчики событий метода
Обработчики событий метода — это то, что мы используем, когда у нас есть более сложная логика, охватывающая несколько строк кода. Мы передаем имя метода, определенного в компоненте Vue.js, чтобы использовать его для обработки события.
Например:
<template> Count: {{ count }} <br /> <button @click="increment">Add 1</button> </template><script> export default { data() { return { count: 0, }; }, methods: { increment() { this.count++; if (this.count % 5 === 0) { alert(`${this.count} is divisible by 5.`); } }, }, }; </script>
Вызов методов во встроенных обработчиках
Мы также можем вызвать метод непосредственно в обработчике событий. Это полезно для передачи аргументов.
<template> <p>Count: {{ count }}</p> <button @click="increment(2)">Add 2</button> <button @click="increment(3)">Add 3</button> </template><script> export default { data() { return { count: 0, }; }, methods: { increment(amount) { this.count += amount; if (this.count % 5 === 0) { alert(`${this.count} is divisible by 5.`); } }, }, }; </script>
Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Получите бесплатную копию здесь.
Доступ к аргументам событий в обработчиках событий
Когда имя метода передается напрямую, объект события DOM, связанный с событием, будет передан в первый параметр метода:
<template> <button id="btn-1" @click="handleClick" > Button 1 </button> </template><script> export default { methods: { handleClick(event) { const target = event.target; alert(`Button with ID ${target.id} clicked`); }, }, }; </script>
Мы также можем использовать встроенную функцию стрелки для доступа к этому объекту события:
<template> <button id="btn-1" @click="(event) => handleClick('Peter', event)" > Button 1 </button> </template><script> export default { methods: { handleClick(username, event) { const target = event.target; alert( `${username} clicked the button with ID ${target.id}` ); }, }, }; </script>
Или мы могли бы передать специальную переменную $event при вызове метода из встроенного обработчика:
<template> <button id="btn-1" @click="handleClick('Peter', $event)" > Button 1 </button> </template><script> export default { methods: { handleClick(username, event) { const target = event.target; alert( `${username} clicked the button with ID ${target.id}` ); }, }, }; </script>
Модификаторы событий Vue.js
Vue.js предоставляет модификаторы событий, которые позволяют нам отделить нашу логику данных от логики, связанной с событиями. Например, модификатор события .prevent устраняет необходимость вызова event.preventDefault() в методе обработчика события:
<template> <form @submit.prevent="onSubmit"> <input name="email" type="email" placeholder="Email" /> <button type="submit">Sign up</button> </form> </template><script> export default { methods: { onSubmit() { alert('Signed up successfully.'); }, }, }; </script>
Точно так же модификатор события .stop устраняет необходимость вызывать event.stopPropagration() в обработчике метода события:
<template> <button id="outer-btn" @click="handleOuterButtonClick" > Outer button <button id="inner-btn" @click.stop="handleInnerButtonClick" > Inner button </button> </button> <p>{{ message1 }}</p> <p>{{ message2 }}</p> </template><script> export default { data() { return { message1: '', message2: '', }; }, methods: { handleOuterButtonClick() { this.message2 = 'Outer button clicked'; }, handleInnerButtonClick() { this.message1 = 'Inner button clicked.'; }, }, }; </script>
Вот список распространенных модификаторов событий в Vue.js:
.stop.prevent.self.capture.once.passive
Модификаторы связанных событий
Мы можем связать модификаторы событий в Vue.js:
<a @click.stop.prevent="handleLink1Click"></a>
<a @click.once.prevent="handleLink2Click"></a>Ключевые модификаторы
Обычно при прослушивании событий клавиатуры проверяются определенные клавиши. Vue.js предоставляет для этого ключевые модификаторы.
Например, мы можем прослушивать только клавишу «Enter»:
<input @keyup.enter="handleSubmit" />Мы можем использовать любые действительные имена ключей, открытые через KeyboardEvent.key, в качестве модификаторов, преобразовав их в kebab-case:
<input @keyup.page-down="handlePageDown" />Ключевые псевдонимы
Vue.js предоставляет псевдонимы для наиболее часто используемых клавиш:
.enter.tab.delete (captures both "Delete" and "Backspace" keys).esc.space.up.down.left.right
Клавиши модификатора системы
Применение модификаторов системных клавиш к событиям клавиш вызовет событие только при нажатии соответствующей клавиши-модификатора.
<!-- Ctrl + Enter --> <input @keyup.ctrl.enter="clearTextField" /><!-- Ctrl + Click --> <div @click.ctrl="handleCtrlClick">Do something</div>
Точный модификатор
Модификатор .exact позволяет нам контролировать точную комбинацию системных модификаторов, необходимых для запуска события:
<!-- this will fire even if Alt or Shift is also pressed --> <button @click.ctrl="handleClick">Button</button><!-- this will only fire when Ctrl and no other keys are pressed --> <button @click.ctrl.exact="handleCtrlClick">Button</button><!-- this will only fire when no system modifiers are pressed --> <button @click.exact="handleClick">Button</button>
Модификаторы кнопок мыши
Модификаторы событий кнопки мыши будут вызывать обработчики событий только для определенных кнопок. Они есть:
.left.middle.right
<button @click.left="handleLeftClick">Button</button><button @click.middle="handleMiddleClick">Button</button><button @click.right="handleRightClick">Button</button>
Заключение
Мы можем прослушивать события в Vue.js, передавая встроенный код или обработчик метода в директиву v-on для события. Мы можем применять различные модификаторы к событию для дальнейшей настройки условий запуска события.
Обновлено на: codingbeautydev.com.
Подпишитесь на информационный бюллетень Coding Beauty
Получайте новые советы и руководства по веб-разработке каждую неделю.
