Вывод данных

Шаблон умеет показывать переменные из <script setup>: напишите имя переменной в двойных фигурных скобках, {{ }}.

<script setup>
const cafe = "Кафе «Уголок»";
const special = "Морковный торт";
</script>

<template>
    <h1>{{ cafe }}</h1>
    <p>Десерт дня: {{ special }}</p>
</template>

Страница покажет:

Кафе «Уголок»
Десерт дня: Морковный торт

Vue подставляет значение переменной на место {{ special }}, а текст вокруг скобок остаётся как есть. Пробелы внутри скобок не обязательны, но в коде на Vue их обычно ставят.

Любую переменную из <script setup> можно использовать в шаблоне без лишнего кода: никаких querySelector() и textContent. Числа тоже подходят: при const price = 4; запись €{{ price }} покажет €4. А одну переменную можно показывать в нескольких местах. Когда в кафе меняется десерт дня, вы меняете одну строку скрипта, и все места на странице показывают новый десерт.

Типичные ошибки:

• Одинарные скобки: { special } не заменяется, и страница показывает эту запись как есть, вместе со скобками.
• Имя, которого нет в скрипте, например опечатка {{ specail }}: на этом месте страница ничего не показывает, а в консоли появляется предупреждение. Читать его вы научитесь в конце этого урока.