Директивы

Директива — специальный атрибут шаблона, который начинается с v-. Она говорит Vue, что сделать с элементом: показать его по условию, повторить для каждого элемента массива, связать с полем ввода. Вы уже видели одну директиву — v-bind.

Устройство записи

v-on:click.prevent="save"
 │    │      │        │
 │    │      │        └─ значение: выражение JavaScript
 │    │      └─ модификатор (необязательно)
 │    └─ аргумент (необязательно)
 └─ имя директивы

Значение директивы — выражение, как внутри двойных фигурных скобок. Аргумент уточняет, к чему директива относится: для v-bind это имя атрибута, для v-on — имя события. Модификатор меняет поведение, например .prevent отменяет стандартное действие браузера.

Основные директивы

Директива	Короткая форма	Что делает
`v-bind:href`	`:href`	Подставляет значение в атрибут
`v-on:click`	`@click`	Вызывает код при событии
`v-if`, `v-else`	—	Добавляет или убирает элемент по условию
`v-show`	—	Скрывает элемент через CSS
`v-for`	—	Повторяет элемент для каждого значения
`v-model`	—	Связывает поле ввода с переменной
`v-html`	—	Вставляет готовый HTML

Каждой из них посвящён отдельный урок. Здесь — короткое знакомство.

Пример

<!-- src/App.vue -->
<script setup>
const tasks = ['Купить хлеб', 'Позвонить Анне']
const showHint = true
 
function sayHi() {
  alert('Привет!')
}
</script>
 
<template>
  <p v-if="showHint">Нажмите кнопку, чтобы поздороваться.</p>
  <button @click="sayHi">Привет</button>
  <ul>
    <li v-for="task in tasks" :key="task">{{ task }}</li>
  </ul>
</template>

На странице появятся подсказка, кнопка и список из двух задач. По клику на кнопку откроется окно «Привет!». v-if решает, выводить ли абзац, @click назначает обработчик, v-for повторяет li для каждой строки массива.

Динамический аргумент

Аргумент тоже можно взять из переменной — его пишут в квадратных скобках:

<script setup>
const attr = 'title'
</script>
 
<template>
  <h1 :[attr]="'Подсказка'">Мои задачи</h1>
</template>

Заголовок получит атрибут title. Это нужно редко, но такую запись полезно узнавать в чужом коде.

Частая ошибка

Значение директивы — код, а не текст. Запись v-if="false" действительно скрывает элемент, а запись @click="sayHi()" и @click="sayHi" обе работают. Но :href="https://example.com" — ошибка компиляции: Vue пытается выполнить адрес как JavaScript. Строку внутри директивы берите в одинарные кавычки: :href="'https://example.com'", а если значение постоянное — пишите обычный атрибут без двоеточия.

Спасибо, что читаете!