Vue: собери интерфейс без лишнего шума

Подробнее

Шаблон читает состояние, а не запоминает его сам

В Vue ты описываешь разметку и реактивные данные. Когда меняется ref или поле reactive, шаблон обновляется. Не ищи элемент через document.querySelector, чтобы записать в него ту же самую строку: источник правды тогда раздвоится.

Директивы в шаблоне — это связь. v-bind подставляет значение в атрибут, v-on слушает событие, v-model соединяет поле и данные в обе стороны. Обычный текст в усах выводится как текст, а не как HTML.

<script setup>
import { ref } from "vue";
const title = ref("Первая страница");
</script>

<template>
  <label>
    Название
    <input v-model="title">
  </label>
  <h1>{{ title }}</h1>
</template>

С чего начать раздел

• Директивы показывают данные и прячут блоки по условию.
• Реактивность объясняет, почему одно поле обновляет страницу, а другое нет.
• Компоненты делят интерфейс, когда один файл разросся.
• v-for и v-model нужны почти в любом маленьком списке задач.

Где обычно теряется обновление

Замена свойства у обычного объекта, который не был реактивным, ничего не перерисует. То же с массивом, если ты хранишь его вне ref. И ещё шаблон может читать правильное значение, но обработчик меняет копию. Смотри в Vue DevTools, какое состояние лежит в компоненте после клика.