Назария

События и v-model

События: v-on и @

Подписка на событие — директива v-on:событие, коротко @событие. Значение — имя функции или небольшое выражение:

<button @click="increment">+1</button>
<button @click="count++">+1</button>                 <!-- выражение прямо в шаблоне -->
<button @click="addItem('книга')">Добавить</button>   <!-- вызов с аргументом -->
<input @keyup.enter="search" />

В шаблоне ref распаковывается, поэтому count++ работает без .value. Если функции нужен объект события, его передают специальной переменной $event: @input="onInput($event)".

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

После точки можно добавить модификатор — частые действия без лишнего кода:

<form @submit.prevent="save">         <!-- event.preventDefault() -->
<a @click.stop="open">                <!-- event.stopPropagation() -->
<button @click.once="start">          <!-- сработает один раз -->
<input @keyup.enter="send" />          <!-- только клавиша Enter -->
<input @keyup.esc="cancel" />

@submit.prevent — то же, что e.preventDefault() в обработчике, но короче и нагляднее.

v-model — двусторонняя связь

Связать поле ввода и данные в React нужно было вручную: value + onChange. Во Vue для этого есть v-model:

<input v-model="name" />
<p>Привет, {{ name }}!</p>

Это сокращение для :value="name" + @input="name = $event.target.value". Данные меняются, когда печатают в поле, а поле меняется, когда меняют данные из кода (name.value = "" очистит поле).

v-model для разных полей

<textarea v-model="bio"></textarea>

<input type="checkbox" v-model="agree" />              <!-- true / false -->

<input type="radio" value="card" v-model="pay" />
<input type="radio" value="cash" v-model="pay" />      <!-- pay = "card" или "cash" -->

<select v-model="city">
  <option value="dyu">Душанбе</option>
  <option value="msk">Москва</option>
</select>

Vue сам выбирает нужное свойство (value или checked) и событие (input или change).

Модификаторы v-model:

v-model.trim — убирает пробелы по краям;
v-model.number — превращает введённое в число ("42" → 42);
v-model.lazy — обновляет данные не на каждую букву, а когда поле покинули.

Форма целиком

const App = {
  setup() {
    const form = reactive({ name: "", email: "", subscribe: true });
    const sent = ref(false);
    const submit = () => {
      if (!form.name.trim()) return;
      console.log("Отправляем", { ...form });
      sent.value = true;
    };
    return { form, sent, submit };
  },
  template: `
    <form v-if="!sent" @submit.prevent="submit">
      <input v-model.trim="form.name" placeholder="Имя" />
      <input v-model="form.email" type="email" placeholder="Почта" />
      <label><input type="checkbox" v-model="form.subscribe" /> Подписаться</label>
      <button>Отправить</button>
    </form>
    <p v-else>Спасибо, {{ form.name }}!</p>
  `,
};

reactive удобен для форм: все поля в одном объекте, v-model="form.name" работает напрямую.

Изменение массивов

Во Vue реактивный массив можно менять методами push, unshift, splice — изменения отследятся. Можно и заменить массив целиком: items.value = items.value.filter(...). Оба способа нормальны; замена через filter удобна для удаления.

Итог

@событие="функция" или выражение; модификаторы .prevent, .stop, .enter, .once.
v-model связывает поле и данные в обе стороны; для чекбокса — true/false, для select — value опции.
v-model.trim, .number, .lazy — обработка ввода без лишнего кода.
Массивы можно менять push / unshift / splice или заменять целиком.