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

Директива v-on предназначена для привязки обработчиков событий к DOM-элементам. Она позволяет реагировать на действия пользователя, такие как клики, ввод текста, наведение курсора и другие события браузера. Синтаксис максимально схож с Vue, но адаптирован под минималистичную архитектуру Petite-Vue.

<button v-on:click="increment">Нажми меня</button>

В этом примере к событию click привязывается метод increment, определённый в объекте состояния. Petite-Vue автоматически отслеживает изменения и вызывает функцию при возникновении события.

Для сокращения записи используется синтаксис с @:

<button @click="increment">Нажми меня</button>

Передача аргументов в обработчик

Функция-обработчик может принимать аргументы. Например:

<button @click="greet('Мир')">Приветствие</button>
const App = {
    greet(name) {
        console.log(`Привет, ${name}!`);
    }
};

PetiteVue.createApp(App).mount();

В этом случае при клике на кнопку будет вызвана функция greet с аргументом 'Мир'.

Доступ к объекту события

Если требуется информация о самом событии (например, координаты мыши или целевой элемент), можно явно передать объект события:

<button @click="handleClick($event)">Нажми меня</button>
const App = {
    handleClick(event) {
        console.log(event.type, event.target);
    }
};

Переменная $event содержит стандартный объект события JavaScript.

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

Petite-Vue поддерживает модификаторы событий, позволяющие изменять поведение без написания дополнительных функций:

  • .prevent — предотвращает стандартное поведение события (event.preventDefault()).
  • .stop — останавливает всплытие события (event.stopPropagation()).
  • .once — обработчик сработает только один раз.
  • .self — обработчик срабатывает только если событие произошло на самом элементе, а не на его потомках.

Примеры использования:

<form @submit.prevent="submitForm">
    <button type="submit">Отправить</button>
</form>

<button @click.stop="clickHandler">Клик</button>

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

Привязка к клавишам

Для событий клавиатуры поддерживаются модификаторы клавиш. Petite-Vue позволяет реагировать на конкретные клавиши без явного анализа event.key:

<input @keydown.enter="submitForm" placeholder="Нажми Enter">
<input @keydown.esc="cancelForm" placeholder="Нажми Esc">

Список поддерживаемых клавиш: enter, tab, delete, esc, space, up, down, left, right.

Также можно использовать пользовательскую проверку через $event:

<input @keydown="checkKey($event)">
checkKey(event) {
    if (event.key === 'a') {
        console.log('Нажата клавиша A');
    }
}

События мыши

Директива v-on позволяет легко обрабатывать различные события мыши:

<div 
    @mouseenter="hoverIn" 
    @mouseleave="hoverOut" 
    @mousemove="trackMouse"
>
    Наведи курсор
</div>
const App = {
    hoverIn() {
        console.log('Курсор над элементом');
    },
    hoverOut() {
        console.log('Курсор покинул элемент');
    },
    trackMouse(event) {
        console.log(`Координаты: ${event.clientX}, ${event.clientY}`);
    }
};

Инлайн-выражения и методы

В Petite-Vue разрешены инлайн-выражения прямо в шаблоне. Это удобно для простых вычислений:

<button @click="count++">Увеличить: {{ count }}</button>

Инлайн-выражения могут включать тернарные операции, арифметические вычисления и логические проверки:

<button @click="count = count < 10 ? count + 1 : 0">Счётчик</button>

Для сложной логики рекомендуется использовать методы в объекте состояния для читаемости.

События на динамических элементах

При работе с массивами или динамическим контентом обработчики подключаются на каждый элемент через v-for:

<ul>
    <li v-for="item in items" @click="selectItem(item)">
        {{ item.name }}
    </li>
</ul>
const App = {
    items: [
        { name: 'Элемент 1' },
        { name: 'Элемент 2' }
    ],
    selectItem(item) {
        console.log('Выбран', item.name);
    }
};

Композиция событий и вызов нескольких функций

Petite-Vue позволяет вызывать несколько функций в одном обработчике через оператор , или в виде массива:

<button @click="first(), second()">Клик</button>
const App = {
    first() { console.log('Первая функция'); },
    second() { console.log('Вторая функция'); }
};

Обработка нестандартных событий

Кроме стандартных DOM-событий, Petite-Vue поддерживает пользовательские события через dispatchEvent и CustomEvent:

const button = document.querySelector('button');
button.addEventListener('custom-event', e => console.log(e.detail));

button.dispatchEvent(new CustomEvent('custom-event', { detail: { info: 123 } }));
<button @custom-event="handleCustom">Кнопка</button>
const App = {
    handleCustom(event) {
        console.log(event.detail.info);
    }
};

Это расширяет возможности взаимодействия компонентов и интеграции с внешними библиотеками.

В Petite-Vue директива v-on обеспечивает гибкую и лаконичную обработку всех типов событий, включая мышь, клавиатуру, формы и пользовательские события. Модификаторы и инлайн-выражения делают код компактным, сохраняя его читаемость и предсказуемость поведения.

Оглавление