Директива v-on в Vue3
Встроенные директивы Vue3v-onДиректива используется для привязки слушателей событий и может прослушивать DOM-события или пользовательские события.
Базовое описание
v-onДиректива используется для привязки функций-обработчиков событий к элементам. Её можно использовать для прослушивания нативных DOM-событий, а также событий, генерируемых пользовательскими компонентами.
- Сокращение: @
- Ожидаемый тип: Function | Inline Statement | Object
- Function: Привязывает слушателей событий, поддерживает нативные DOM-события и пользовательские события.
Базовое использование
Пример
<!-- Полный синтаксис -->
<button v-on:click="handleClick">Нажми</button>
<!-- Сокращённая запись -->
<button @click="handleClick">Нажмите</button>
<button v-on:click="handleClick">Нажми</button>
<!-- Сокращённая запись -->
<button @click="handleClick">Нажмите</button>
Пример
<template>
<div>
<button @click="count++">Увеличить</button>
<p>Количество: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return { count: 0 }
}
}
</script>
<div>
<button @click="count++">Увеличить</button>
<p>Количество: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return { count: 0 }
}
}
</script>
Модификаторы событий
Пример
<!-- Предотвратить всплытие события -->
<button @click.stop="handleClick">Остановить распространение</button>
<!-- Предотвратить поведение по умолчанию -->
<form @submit.prevent="handleSubmit">
<button type="submit">Отправить</button>
</форма>
<!-- Срабатывание при нажатии клавиши Enter -->
<input @keyup.enter="handleEnter" placeholder="Нажмите Enter для отправки" />
<button @click.stop="handleClick">Остановить распространение</button>
<!-- Предотвратить поведение по умолчанию -->
<form @submit.prevent="handleSubmit">
<button type="submit">Отправить</button>
</форма>
<!-- Срабатывание при нажатии клавиши Enter -->
<input @keyup.enter="handleEnter" placeholder="Нажмите Enter для отправки" />
Другие расширения