Оглавление
Vue
Прогрессивный фреймворк для интерфейсов: шаблоны, реактивность, компоненты, Pinia и Vue Router.
1.Начало работы
- Что такое VueЗачем нужен Vue, какую версию изучает курс и чем фреймворк отличается от работы с DOM вручную.
- Создание проектаКак создать проект командой npm create vue@latest, запустить его и что лежит в папках.
- Однофайловые компонентыИз каких блоков состоит файл .vue: template, script setup и style, и как они связаны.
- Синтаксис шаблонаИнтерполяция в двойных фигурных скобках, выражения в шаблоне и привязка атрибутов через v-bind.
- ДирективыЧто такое директивы Vue, как устроена их запись и какие директивы встречаются чаще всего.
2.Реактивность
- Реактивное состояние: refКак объявить изменяемые данные через ref, зачем нужен .value и как Vue обновляет страницу.
- Функция reactiveРеактивный объект без .value, ограничения reactive и правило выбора между ref и reactive.
- Вычисляемые свойстваКак через computed получать значения из состояния: счётчики, отфильтрованные списки, кеширование.
- Наблюдатели: watch и watchEffectКак выполнить код при изменении данных: watch, watchEffect, опции deep и immediate.
3.Шаблоны: условия, списки, формы
- Условный вывод: v-if и v-showКак показывать и скрывать элементы по условию: v-if, v-else-if, v-else, v-show и разница между ними.
- Списки: v-for и keyКак вывести массив директивой v-for, зачем нужен атрибут key и как перебирать числа и объекты.
- События: v-on и модификаторыКак обрабатывать клики и нажатия клавиш через v-on, получать объект события и использовать модификаторы.
- Поля форм: v-modelДвусторонняя привязка полей ввода через v-model: текст, флажки, списки выбора и модификаторы.
- Привязка классов и стилейКак включать CSS-классы по условию через :class и задавать стили из данных через :style.
- Анимация появления: TransitionКак плавно показывать и скрывать элементы встроенными компонентами Transition и TransitionGroup.
4.Компоненты
- КомпонентыКак вынести часть интерфейса в отдельный компонент, подключить его в App.vue и зарегистрировать глобально.
- Входные параметры: propsКак передать данные в компонент через defineProps, указать типы и значения по умолчанию.
- События компонента: emitКак дочерний компонент сообщает родителю о действиях через defineEmits и как родитель их слушает.
- v-model на компонентахКак сделать собственный компонент, который работает с v-model, через макрос defineModel.
- СлотыКак передать в компонент разметку через слоты: слот по умолчанию, именованные слоты и слоты с данными.
- Передача данных вглубь: provide и injectКак передать значение сразу всем вложенным компонентам без цепочки props через provide и inject.
- Хуки жизненного циклаЭтапы жизни компонента и функции onMounted, onUpdated, onUnmounted для кода, который должен выполниться в нужный момент.
- Ссылки на элементы шаблонаКак получить доступ к элементу DOM или дочернему компоненту через атрибут ref и useTemplateRef.
5.Логика и данные
6.Vue Router
- Vue Router: подключение и маршрутыКак установить Vue Router, описать маршруты, вывести страницу через RouterView и сделать меню на RouterLink.
- Параметры маршрута и переходыДинамические адреса вида /posts/:id, чтение параметров через useRoute и переходы из кода через useRouter.
- Вложенные маршрутыКак сделать раздел сайта с общим макетом через children, ленивую загрузку страниц и страницу 404.
- Навигационные хукиКак проверить переход до открытия страницы: beforeEach, поле meta, перенаправление на вход и beforeEnter.