Урок 4 · Vue

Данные в скрипте и текст в шаблоне

В шаблоне пишут вид. В script setup живут данные. Шаблон читает их напрямую.

Почему это следующий шаг

Директивы в маршруте уже были. Этот урок собирает из них целый маленький экран по порядку.

Как сделать

Заведи ref для заголовка. В шаблоне выведи его в усах. Поле свяжи через v-model. Не ищи заголовок через document.querySelector, чтобы записать ту же строку: источник правды раздвоится. Усы вставляют текст, а не HTML. Для атрибута, который должен быть значением, а не строкой, поставь двоеточие.

<script setup>
import { ref } from "vue";
const title = ref("Первый урок");
</script>
<template>
  <input v-model="title">
  <h1>{{ title }}</h1>
</template>

Что проверить

• Правка поля сразу меняет заголовок.
• В скрипте у ref есть .value, в шаблоне его нет.
• Случайный тег из поля не исполняется.