Урок 05

Обработка событий: v-on

Что такое v-on

v-on — слушает DOM-события. Клик, ввод, отправка формы, наведение.

Синтаксис

Полный:

<button v-on:click="handleClick">Клик</button>

Краткий (@):

<button @click="handleClick">Клик</button>

@ — сахар для v-on:. Используй его.

Inline vs метод

Inline:

<button @click="count++">+1</button>
<button @click="message = 'Привет'">Поздороваться</button>

Метод:

<button @click="handleClick">Клик</button>

function handleClick() {
    count.value++;
}

С аргументами:

<button @click="greet('Иван')">Поздороваться</button>

С объектом события:

<button @click="handleClick($event, 'arg')">Клик</button>

Основные события

<button @click="onClick">Клик</button>
<input @input="onInput" @change="onChange" @focus="onFocus" @blur="onBlur">
<form @submit.prevent="onSubmit">
<div @mouseover="onMouseOver" @mouseleave="onMouseLeave">
<input @keydown="onKeyDown" @keyup="onKeyUp">
<div @scroll="onScroll">
<div @wheel="onWheel">

Модификаторы

.stop — остановить всплытие:

<div @click="outer">
    <button @click.stop="inner">Клик</button>
</div>

.prevent — предотвратить дефолт:

<form @submit.prevent="onSubmit"></form>
<a @click.prevent href="/">Ссылка</a>

.once — один раз:

<button @click.once="handleOnce">Один раз</button>

.self — только на себя:

<div @click.self="onSelf">
    <button>Клик на кнопку не сработает</button>
</div>

.capture — захват:

<div @click.capture="onCapture">Сначала сработает здесь</div>

Модификаторы клавиш

По конкретной клавише:

<input @keyup.enter="onEnter">
<input @keyup.esc="onEsc">
<input @keyup.tab="onTab">
<input @keyup.delete="onDelete">
<input @keyup.space="onSpace">
<input @keyup.up="onUp">
<input @keyup.down="onDown">

Через kebab-case:

<input @keyup.page-down="onPageDown">

Через точку с цифрой (kebab для .):

<input @keyup.a="onA">

С кастомными клавишами — Vue.config.keyCodes:

app.config.keyCodes.f1 = 112;

Комбинации:

<input @keyup.ctrl.enter="onCtrlEnter">
<input @keyup.alt.enter="onAltEnter">

Модификаторы мыши

<button @click.left="onLeft">ЛКМ</button>
<button @click.right="onRight">ПКМ</button>
<button @click.middle="onMiddle">СКМ</button>

Модификаторы системных клавиш

<input @keyup.ctrl.enter="onCtrlEnter">
<input @keyup.shift.enter="onShiftEnter">

Точная комбинация (без других модификаторов) — .exact:

<button @click.ctrl.exact="onCtrlOnly">Только Ctrl</button>
<button @click.exact="onNoModifiers">Без модификаторов</button>

Полный пример

<template>
    <form @submit.prevent="submit">
        <input
            v-model="name"
            @keyup.enter="submit"
            placeholder="Имя"
        >

        <button type="submit" :disabled="!name">
            Отправить
        </button>

        <button type="button" @click.once="clear">
            Очистить
        </button>

        <div class="log">
            <p v-for="(msg, i) in log" :key="i">{{ msg }}</p>
        </div>
    </form>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('');
const log = ref([]);

function submit() {
    log.value.push(`Отправлено: ${name.value}`);
    name.value = '';
}

function clear() {
    log.value = [];
}
</script>

Модификаторы в действии

Стоп всплытие:

<div @click="outer">
    <button @click.stop="inner">Кнопка</button>
</div>

Без .stop: клик на кнопку вызывает и inner, и outer. С .stop: только inner.

Форма:

<form @submit.prevent="onSubmit"></form>

Без .prevent: страница перезагрузится. С .prevent: останется.

Что важно помнить

@ = v-on: — используй краткий
Модификаторы цепочкой: @click.stop.prevent
.prevent для форм — обязательно
.stop для вложенных — иначе всплытие

Итог

v-on или @ — слушает события
Модификаторы: .stop, .prevent, .once, .self, .capture
Клавиши: .enter, .esc, .tab и др.
Комбинации: .ctrl.enter

Дальше — формы и v-model.