Что такое Vue
Vue — фреймворк для построения интерфейсов в браузере. Вы описываете, как страница должна выглядеть при текущих данных, а Vue сам обновляет нужные элементы, когда данные меняются. Курс написан для Vue 3 (актуальная ветка 3.5) и использует рекомендуемый стиль — Composition API с <script setup>.
Зачем фреймворк
В уроках учебника про DOM вы находили элементы через querySelector, вешали обработчики и вручную меняли textContent. Для счётчика это удобно, но в большом интерфейсе легко забыть обновить один из элементов. Vue снимает эту работу:
| Без фреймворка | С Vue |
|---|---|
| Найти элемент и изменить текст | Изменить переменную — текст обновится сам |
| Создавать элементы списка в цикле | Описать один элемент и директиву v-for |
| Хранить состояние в DOM | Хранить состояние в переменных компонента |
Компоненты
Интерфейс на Vue собирается из компонентов — небольших самостоятельных частей страницы: форма добавления задачи, один пункт списка, шапка сайта. Каждый компонент хранится в отдельном файле с расширением .vue, в котором рядом лежат разметка, код и стили.
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Нажато: {{ count }}</button>
</template>Это целый компонент: кнопка показывает число и увеличивает его при каждом клике. Ни одного обращения к DOM в коде нет — Vue сам перерисует текст кнопки.
Что понадобится
- Node.js версии 20 или новее — проверьте командой
node -v; - редактор кода, например VS Code с расширением Vue (Official);
- знание JavaScript из учебника: модули, стрелочные функции, массивы и их методы,
fetchиasync/await.
Что будет в курсе
Сначала вы соберёте список задач: добавление, отметка о выполнении, удаление, фильтры. На нём разберёте шаблоны, реактивность и компоненты. Затем сделаете небольшой блог, который загружает статьи из API, с несколькими страницами на Vue Router и общим хранилищем на Pinia. В конце — тесты и публикация.
Частая ошибка
В интернете много примеров для Vue 2 и для Options API — с блоками data(), methods и computed внутри объекта export default. Этот код работает и в Vue 3, но смешивать два стиля в одном проекте неудобно. Если пример начинается с export default и data(), ищите вариант с <script setup>: в документации Vue переключатель API находится в левом меню.