Темная тема
Vue - The Complete Guide (Router & Composition API)
01. Начало работы
001 - Добро пожаловать на курс
002 - Что такое Vue.js
003 - Различные способы использования Vue
004 - Обзор альтернатив Vue
005 - Создание первого приложения только на JavaScript
006 - Пересборка приложения с использованием Vue
007 - Vue vs Обычный JavaScript
008 - Настройка среды разработки для курса
009 - Структура курса и что в него входит
010 - Как получить максимум от этого курса
02. Основы
011 - Введение
012 - Создание и подключение экземпляров приложения Vue
013 - Интерполяция и привязка данных
014 - Привязка атрибутов с помощью директивы v-bind
015 - Методы в приложениях Vue
016 - Работа с данными внутри приложения Vue
017 - Вывод сырого HTML с помощью v-html
018 - Первое подведение итогов
019 - Привязка событий
020 - Практика - Привязка данных - Часть 1
021 - Практика - Привязка данных - Часть 2
022 - События и методы
023 - Работа с аргументами событий
024 - Использование нативного объекта события
025 - Изучение модификаторов событий
026 - Фиксация контента с помощью v-once
027 - Привязка данных, привязка событий - Двусторонняя привязка
028 - Практика - Привязка событий - Часть 1
029 - Практика - Привязка событий - Часть 2
030 - Методы, используемые для привязки данных
031 - Введение в вычисляемые свойства
032 - Работа с наблюдателями (watchers)
033 - Методы vs Вычисляемые свойства vs Наблюдатели
034 - Сокращённая запись v-bind и v-on
035 - Динамическое оформление с помощью встроенных стилей
036 - Практика - Реактивность - Часть 1
037 - Практика - Реактивность - Часть 2
038 - Динамическое добавление CSS-классов
039 - Классы и вычисляемые свойства
040 - Динамические классы - Синтаксис массива
041 - Итоги модуля
042 - Практика - Динамическое оформление - Часть 1
043 - Практика - Динамическое оформление - Часть 2
03. Условный рендеринг и списки
044 - Введение в модуль
045 - Проблема
046 - Условный вывод контента
047 - v-if, v-else и v-else-if
048 - Использование v-show вместо v-if
049 - Рендеринг списков данных
050 - Более глубокое изучение v-for
051 - Удаление элементов списка
052 - Списки и ключи
053 - Итоги модуля
054 - Практика - Часть 1
055 - Практика - Часть 2
04. Игра Убийца монстров
056 - Введение в модуль
057 - Настройка проекта и первые методы
058 - Обновление полос здоровья
059 - Добавление специальной атаки
060 - Добавление функции лечения
061 - Добавление экрана окончания игры
062 - Завершение основной функциональности
063 - Добавление журнала боя
05. Vue изнутри
064 - Введение в модуль
065 - Введение в реактивность Vue
066 - Реактивность Vue - Подробный разбор
067 - Одно приложение vs Несколько приложений
068 - Шаблоны
069 - Работа с refs
070 - Как Vue обновляет DOM
071 - Жизненный цикл приложения Vue - Теория
072 - Жизненный цикл приложения Vue - Практика
06. Введение в компоненты
073 - Введение в модуль
074 - Проблема
075 - Введение в компоненты
076 - Создание сложных пользовательских интерфейсов
07. Настройка и рабочий процесс с Vue CLI
077 - Введение в модуль
078 - Зачем нужен сервер разработки
079 - Почему нам нужен лучший опыт разработки
080 - Установка и использование Vue CLI
081 - Обзор созданного проекта
082 - Обзор кода Vue и файлов .vue
083 - Добавление расширения Vetur в VS Code
084 - Подробнее о файлах .vue
085 - Новый проект Vue
086 - Создание базового приложения Vue
087 - Добавление компонента
088 - Добавление стилей
08. Взаимодействие компонентов
089 - Введение в модуль
090 - Введение в Props (родитель - дочерний компонент)
091 - Поведение Props и их изменение
092 - Валидация Props
093 - Работа с динамическими значениями Props
094 - Генерация пользовательских событий
095 - Определение и валидация пользовательских событий
096 - Демо - Добавление компонентов и их связывание
097 - Демо - Дополнительное взаимодействие компонентов
098 - Потенциальная проблема
099 - Практика - Props и пользовательские события - Часть 1
100 - Практика - Props и пользовательские события - Часть 2
101 - Provide + Inject спешат на помощь
102 - Provide + Inject для функций и методов
103 - Provide + Inject vs Props и пользовательские события
104 - Итоги модуля
09. Углублённое изучение компонентов
105 - Введение в модуль
106 - Настройка проекта
107 - Глобальные и локальные компоненты
108 - Scoped-стили
109 - Введение в слоты
110 - Именованные слоты
111 - Стили слотов и компиляция
112 - Дополнительно о слотах
113 - Scoped-слоты
114 - Динамические компоненты
115 - Сохранение состояния динамических компонентов
116 - Применяем на практике и возникающая проблема
117 - Телепортация элементов
118 - Работа с фрагментами
119 - Руководство по стилю Vue
120 - Переход к другой структуре папок
121 - Итоги модуля
10. Приложение Learning Resources
122 - Введение в модуль
123 - Настройка и первые шаги
124 - Первые компоненты и Props
125 - Стилизация и дополнительные компоненты
126 - Компоненты Header и BaseCard
127 - Добавление базовой кнопки
128 - Динамические компоненты и наследование атрибутов
129 - Добавление и стилизация вкладок
130 - Добавление формы
131 - Получение пользовательского ввода
132 - Добавление модального окна
133 - Удаление элементов
134 - Добавление Teleport
11. Формы
135 - Введение в модуль
136 - v-model и поля ввода
137 - Работа с модификаторами v-model и числами
138 - v-model и выпадающие списки
139 - Использование v-model с чекбоксами и радиокнопками
140 - Добавление базовой валидации формы
141 - Создание пользовательского компонента управления
142 - Использование v-model в пользовательских компонентах
143 - Итоги модуля
12. Отправка HTTP-запросов
144 - Введение в модуль
145 - Запуск приложения и зачем нам нужен бэкенд
146 - Добавление бэкенда
147 - Как (не) отправлять HTTP-запросы
148 - Отправка POST-запроса для сохранения данных
149 - Получение данных (GET-запрос) и преобразование данных ответа
150 - Загрузка данных при монтировании компонента
151 - Отображение сообщения Загрузка
152 - Обработка состояния отсутствия данных
153 - Обработка технических ошибок на стороне браузера
154 - Обработка ответов с ошибками
155 - Итоги модуля
13. Маршрутизация, SPA
156 - Введение в модуль
157 - Что и зачем
158 - Настройка маршрутизации
159 - Регистрация и отображение маршрутов
160 - Навигация с помощью router-link
161 - Стилизация активных ссылок
162 - Программная навигация
163 - Передача данных через параметры маршрута
164 - Навигация и динамические пути
165 - Обновление данных параметров с помощью watchers
166 - Передача параметров как Props
167 - Перенаправление и маршруты на все случаи
168 - Использование вложенных маршрутов
169 - Дополнительные возможности именованных маршрутов
170 - Использование query-параметров
171 - Отображение нескольких маршрутов - router-view
172 - Управление поведением прокрутки
173 - Введение в навигационные guards
174 - Подробное изучение навигационных guards
175 - Глобальный guard afterEach
176 - Guards при покидании маршрута
177 - Использование метаданных маршрутов
178 - Организация файлов маршрутов
179 - Итоги
14. Анимации и переходы
180 - Введение в модуль
181 - Основы анимации и CSS-переходы
182 - CSS-анимация
183 - Почему одного CSS недостаточно
184 - Запуск CSS-анимаций с помощью Vue
185 - Использование компонента Transition
186 - CSS-анимации с компонентом Transition
187 - Использование пользовательских имён CSS-классов
188 - Пример - Анимация модального окна
189 - Переходы между несколькими элементами
190 - Использование событий перехода
191 - Создание JavaScript-переходов (вместо CSS)
192 - Отключение CSS-переходов
193 - Начало работы с анимированными списками
194 - Анимация списков с помощью transition-group
195 - Анимация перемещения элементов списка
196 - Анимация смены маршрутов
15. Vuex
197 - Введение в модуль
198 - Что и зачем
199 - Создание и использование хранилища (store)
200 - Подключение компонентов к состоянию
201 - Введение в мутации - Лучший способ изменения данных
202 - Передача данных в мутации через payload
203 - Введение в геттеры - Лучший способ получения данных
204 - Выполнение асинхронного кода с помощью actions
205 - Контекст action
206 - Использование вспомогательных mapper-функций
207 - Пример - Добавление дополнительного состояния
208 - Организация хранилища с помощью модулей
209 - Локальное состояние модуля
210 - Пространства имён для модулей
211 - Структурирование кода и файлов Vuex
212 - Задание
213 - Решение задания - Часть 1
214 - Решение задания - Часть 2
215 - Решение задания - Часть 3
216 - Итоги
16. Проект Найди коуча
217 - Введение в модуль
218 - Планирование проекта - Веб-приложение
219 - Планирование требований к данным
220 - Планирование структуры - Компоненты
221 - Регистрация маршрутов
222 - Добавление компонентов страниц маршрутов
223 - Работа над основным макетом и стилизацией
224 - Связывание страниц
225 - Добавление Vuex и данных о коучах
226 - Работа над списком коучей и элементами списка
227 - Добавление базовых компонентов (Card, Button, Badge)
228 - Создание компонента с деталями коуча
229 - Фильтрация коучей
230 - Регистрация в качестве коуча - Форма
231 - Добавление коучей в Vuex
232 - Добавление валидации формы
233 - Работа над формой обратной связи
234 - Сохранение запросов (сообщений) в Vuex
235 - Вывод входящих запросов (сообщений)
236 - Фильтрация запросов для активного коуча
237 - Отправка PUT HTTP-запроса для сохранения данных коуча
238 - Получение данных коуча (GET HTTP-запрос)
239 - Отображение индикатора загрузки
240 - Добавление обработки HTTP-ошибок
241 - Отправка HTTP-запросов с запросами на коучинг
242 - Кэширование данных HTTP-ответов
243 - Добавление переходов между маршрутами
244 - Страница Не найдено и итоги
17. Аутентификация
245 - Введение в модуль
246 - Как работает аутентификация
247 - Ограничение доступа - Защита ресурсов бэкенда
248 - Добавление страницы аутентификации (вход и регистрация)
249 - Подготовка Vuex
250 - Добавление действия регистрации и логики процесса
251 - Улучшение UX - Индикатор загрузки и обработка ошибок
252 - Добавление действия входа и логики процесса
253 - Добавление токена к исходящим запросам
254 - Обновление интерфейса в зависимости от состояния аутентификации
255 - Добавление действия выхода и логики процесса
256 - Аутентификация и маршрутизация (включая навигационные guards)
257 - Добавление автоматического входа
258 - Добавление автоматического выхода
259 - Итоги
18. Оптимизация и деплой
260 - Введение в модуль
261 - Что именно разворачивать
262 - Оптимизация - Использование асинхронных компонентов
263 - Сборка проекта для продакшена
264 - Деплой Vue-приложения
19. Composition API
265 - Введение в модуль
266 - Какую проблему решает Composition API
267 - Замена data на refs
268 - Создание реактивных объектов
269 - Реактивность - Подробный разбор
270 - Замена методов обычными функциями
271 - Замена вычисляемых свойств функцией computed
272 - Данные и функции - Часть 1
273 - Данные и функции - Часть 2
274 - Двусторонняя привязка и Composition API
275 - Работа с watchers
276 - Первое подведение итогов
277 - Основные строительные блоки Composition API - Часть 1
278 - Основные строительные блоки Composition API - Часть 2
279 - Использование template refs
280 - Компоненты, Props и Composition API
281 - Генерация пользовательских событий
282 - Работа с Provide - Inject
283 - Хуки жизненного цикла в Composition API
284 - Миграция с Options API на Composition API
285 - Миграция первого компонента
286 - Миграция большого компонента
287 - Миграция остальных компонентов
288 - Маршрутизация, параметры и Composition API
289 - Объекты Route и Router в Composition API
290 - Использование Vuex с Composition API
291 - Итоги
20. Миксины
292 - Введение в модуль
293 - Концепции повторного использования
294 - Использование миксинов
295 - Объединение миксинов
296 - Глобальные миксины
297 - Недостатки миксинов
298 - Composables и Composition API
299 - Дополнительные пользовательские функции композиции
300 - Почему хуки (composables) лучше миксинов
301 - Создание search-хука
302 - Подводные камни пользовательских хуков
303 - Дополнительные мысли о пользовательских хуках
304 - Пользовательский sort-хук
21. Итоги
305 - Итоги и дальнейшие шаги
22. Миграция с Vue 2 на Vue 3