События — один из важнейших аспектов разработки веб-приложений. Во Vue.js 3 события являются основой взаимодействия компонентов, и они позволяют обрабатывать пользовательские действия, такие как клики, движения мыши и ввод данных. В этой статье мы рассмотрим принципы работы с событиями и обработчиками событий во Vue.js 3.
Использование директивы v-on
Для прослушивания событий во Vue.js 3 используется директива v-on. Следующий пример показывает, как прослушивать событие клика на кнопке и вызывать метод submitForm:
<template>
<div>
<button v-on:click="submitForm">Отправить</button>
</div>
</template>
<script>
export default {
methods: {
submitForm() {
console.log('Форма отправлена');
},
},
};
</script>Сокращение для v-on
Во Vue.js 3 есть сокращение для директивы v-on — символ @. Пример использования сокращения:
<template>
<div>
<button @click="submitForm">Отправить</button>
</div>
</template>
<script>
export default {
methods: {
submitForm() {
console.log('Форма отправлена');
},
},
};
</script>Передача аргументов в обработчики событий
Можно передавать аргументы в методы, вызываемые в результате события. В следующем примере передаем сообщение в метод showAlert:
<template>
<div>
<button @click="showAlert('Сообщение')">Показать сообщение</button>
</div>
</template>
<script>
export default {
methods: {
showAlert(message) {
alert(message);
},
},
};
</script>Модификаторы событий
Vue.js 3 предоставляет модификаторы событий, такие как .prevent и .stop, которые упрощают управление событиями. Например, модификатор .prevent предотвращает выполнение действия по умолчанию:
<template>
<div>
<form @submit.prevent="submitForm">
<!-- Форма -->
<button type="submit">Отправить</button>
</form>
</div>
</template>
<script>
export default {
methods: {
submitForm() {
console.log('Форма отправлена');
},
},
};
</script>