Синтаксис шаблона

Шаблон — разметка в блоке <template>. Это обычный HTML, в который Vue подставляет данные из скрипта. Подстановка значения в текст называется интерполяцией.

Интерполяция

Значение переменной выводится в двойных фигурных скобках:

<!-- src/App.vue -->
<script setup>
const owner = 'Олег'
const total = 5
</script>
 
<template>
  <h1>Задачи: {{ owner }}</h1>
  <p>Всего задач: {{ total }}</p>
</template>

На странице появятся строки «Задачи: Олег» и «Всего задач: 5». Если переменная изменится, Vue обновит текст — как сделать переменную изменяемой, показано в уроке про ref.

Выражения

Внутри скобок можно писать любое выражение JavaScript — то, что даёт значение:

<script setup>
const total = 5
const done = 2
const owner = 'Олег'
</script>
 
<template>
  <p>Осталось: {{ total - done }}</p>
  <p>{{ done === total ? 'Всё готово' : 'Есть дела' }}</p>
  <p>{{ owner.toUpperCase() }}</p>
</template>

Страница покажет «Осталось: 3», «Есть дела» и «ОЛЕГ». Инструкции вроде if, for или объявления const внутри скобок писать нельзя — только выражения.

Атрибуты: v-bind

В атрибутах двойные скобки не работают. Чтобы подставить значение в атрибут, перед ним ставят v-bind: или короткую форму — двоеточие:

<script setup>
const logo = '/favicon.ico'
const hint = 'Список задач'
</script>
 
<template>
  <img v-bind:src="logo" alt="Логотип">
  <h1 :title="hint">Мои задачи</h1>
</template>

У картинки атрибут src получит значение /favicon.ico, а у заголовка появится всплывающая подсказка «Список задач». Значение в кавычках после двоеточия — тоже выражение JavaScript, а не строка.

Если значение логического атрибута вроде disabled равно false, Vue уберёт атрибут целиком.

Вывод HTML

Интерполяция всегда выводит текст: строка '<b>важно</b>' появится на странице с угловыми скобками. Это защищает от внедрения чужого кода. Для вставки готового HTML есть директива v-html, но применять её можно только к разметке, которой вы доверяете, — никогда к тексту, введённому пользователем.

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

Двойные фигурные скобки внутри атрибута не сработают:

<!-- Неправильно: в атрибут попадёт текст с фигурными скобками -->
<img src="{{ logo }}">
 
<!-- Правильно -->
<img :src="logo">

Для атрибутов всегда используйте двоеточие.