Teach and Study Vue JS - Полный курс c нуля
Всё для обучения
Как устроено обучение
О курсе
Подробнее
«Полный курс по Vue 3» — это практическое руководство по изучению популярного JavaScript-фреймворка. Курс состоит из 20 уроков, которые помогут вам освоить все необходимые навыки для создания современных веб-приложений. В курсе рассматриваются следующие темы:Основы Vue 3: создание компонентов, использование директив и фильтров, работа с жизненным циклом компонента. Работа с данными: синхронизация данных между компонентами, управление состоянием приложения с помощью реактивной системы.Компоненты: создание кастомных компонентов, наследование, роутинг и перехватчики.Взаимодействие с сервером: отправка и получение данных, работа с API. Расширение фреймворка: создание собственных директив и плагинов.Оптимизация производительности: оптимизация времени рендеринга, уменьшение размера приложения. Развертывание: публикация приложения на сервере.Курс предназначен для разработчиков, которые уже имеют опыт работы с JavaScript и хотят углубить свои знания в области фронтенд-разработки. По окончании курса вы сможете создавать сложные веб-приложения с использованием Vue 3. Преподаватель: Владелен Минин * Курс является бесплатным и в нем не предусмотрены ответы преподавателя на Ваши вопросы. Интересующие Вас вопросы рекомендуем публиковать в разделе "Комментарии", чтобы ответ на них могли дать другие пользователи.
Содержание
14 занятийПрограмма курса
№ТемаЧто внутри
01Введение
Общая информация о курсе и Vue JS
02Основы Vue JS
Начало работы
Пишем первый функционал
Как работает интерполяция
Добавляем пользовательские события
Пример. Начинаем писать приложение
Работа с атрибутами
Пример. Создаем двустороннее связывание
Выводим список с v-for
Добавляем реактивности
Модификаторы событий
Передача параметров в методы
Условный рендеринг с v-if
Методы в шаблоне
Сокращаем код используя ярлыки
Оптимизация с computed
Следим за свойствами с watch
Работа с v-model
Задаем инлайн стили
Работа с css классами
Result University 1
03Что еще есть во Vue
Альтернативный синтаксис data
Как пользоваться документацией
Директивы
Циклы с v-for
v-if и v-show
Зачем нужен key
Пример. Фильтрация списков
Про разные модификаторы
Вызов нескольких функций
Result University 2
04Как работает Vue
Свойство template
Virtual DOM и render
Реактивность и Proxy
Жизненный цикл компонента
Создание нескольких приложений
Result University 3
05Работа с Vue CLI
Начало работы с CLI
Создаем проект
Обзор проекта
Работа с Vue UI
Работа с VSCode
Result University 4
06Создание своего элемента формы
Все о компонентах
Как работают компоненты
Зачем использовать компоненты
Создаем отдельный компонент
Передаем параметры в компонент
Валидируем параметры
Как эмитить события
Валидируем исходящее событие
Пример. Добавляем логику
Пример. Создаем компонент кнопки
Передаем данные с provide и inject
Стили в компонентах
Как работают slots
Передача параметров в slot
Пример. Динамические компоненты
Как применить keep-alive
Расширенный синтаксис computed свойств
Получаем доступ до компонента с ref
Асинхронные компоненты
Result University 5
07Работа с элементами формы
Обзор проекта с формами
Обработка формы
Получаем данные из input
Обрабатываем select
Радио кнопки и чекбоксы
Валидация полей
Создание своего элемента формы
Result University 6
08Vue и работа с HTTP
Готовим приложение с формой
Подключаем базу данных
Делаем POST запрос с fetch
Готовим компонент для вывода данных
Делаем GET запрос с axios
Дорабатываем UI логику
Удаление записи
Обработка ошибок
Показываем пользовательское сообщение
Добавляем индикатор загрузки
Курсовая работа
09Миксины, директивы и плагины
Пример. Создаем компонент Alert
Как работают Mixins
Пример. Создаем свою директиву
Жизненные циклы директивы
Передача параметров в директиву
Работа с модификаторами
Создание своего плагина
Пример. Создание плагина мультиязычности
Модальное окно с Teleport
10Vue Router
Обзор проекта Мини клон Gmail
Настройка Router
Добавляем разные страницы
Динамическая навигация
Пример. Как работать за авторизацией
Как отобразить активную ссылку
Пример. Запоминаем страницу с параметрами в URL
Динамические параметры в URL
Вложенные роуты
Вручную управляем состоянием ссылки
Страница 404 и редирект
Способы защиты страниц
Остановка перехода на страницу
Оптимизация с Lazy Loading
11Vuex - работа с данными
Зачем нужен Vuex
Начинаем работу со Store
Что такое mutations
Зачем нужны getters
Как работают actions
Объект context
Как нам помогают mappers
Разделяем логику с модулями
Именованные модули с namespaced
Как организовать структуру файлов
Как добавлять плагины
12Работа с Composition API
Зачем нужен Composition API
Как работает setup и ref
Работа с функциями
Ref и Reactive. Подробно про реактивность
Как работает Computed
Используем Watch
Получаем доступ до DOM элементов
Работа с v-model
Взаимодействие компонентов
Передаем родителю событие
Объект контекста
Provide и Inject
Методы жизненного цикла
Работа с Vue Router
Пример. Переиспользование
Преимущество хуков
Работа с Vuex
13Vue на TypeScript
Введение
Как перевести существующий проект на TypeScript
Создаем новый проект
Начало работы с TypeScript
Пример. Типизированные переиспользуемые хуки
Загружаем данные с сервера
Работа с Suspense
Типизируем хуки
Работа с Vuex
14Практика
Разработка приложения
01Введение
Общая информация о курсе и Vue JS
02Основы Vue JS
Начало работы
Пишем первый функционал
Как работает интерполяция
Добавляем пользовательские события
Пример. Начинаем писать приложение
Работа с атрибутами
Пример. Создаем двустороннее связывание
Выводим список с v-for
Добавляем реактивности
Модификаторы событий
Передача параметров в методы
Условный рендеринг с v-if
Методы в шаблоне
Сокращаем код используя ярлыки
Оптимизация с computed
Следим за свойствами с watch
Работа с v-model
Задаем инлайн стили
Работа с css классами
Result University 1
03Что еще есть во Vue
Альтернативный синтаксис data
Как пользоваться документацией
Директивы
Циклы с v-for
v-if и v-show
Зачем нужен key
Пример. Фильтрация списков
Про разные модификаторы
Вызов нескольких функций
Result University 2
04Как работает Vue
Свойство template
Virtual DOM и render
Реактивность и Proxy
Жизненный цикл компонента
Создание нескольких приложений
Result University 3
05Работа с Vue CLI
Начало работы с CLI
Создаем проект
Обзор проекта
Работа с Vue UI
Работа с VSCode
Result University 4
06Создание своего элемента формы
Все о компонентах
Как работают компоненты
Зачем использовать компоненты
Создаем отдельный компонент
Передаем параметры в компонент
Валидируем параметры
Как эмитить события
Валидируем исходящее событие
Пример. Добавляем логику
Пример. Создаем компонент кнопки
Передаем данные с provide и inject
Стили в компонентах
Как работают slots
Передача параметров в slot
Пример. Динамические компоненты
Как применить keep-alive
Расширенный синтаксис computed свойств
Получаем доступ до компонента с ref
Асинхронные компоненты
Result University 5
07Работа с элементами формы
Обзор проекта с формами
Обработка формы
Получаем данные из input
Обрабатываем select
Радио кнопки и чекбоксы
Валидация полей
Создание своего элемента формы
Result University 6
08Vue и работа с HTTP
Готовим приложение с формой
Подключаем базу данных
Делаем POST запрос с fetch
Готовим компонент для вывода данных
Делаем GET запрос с axios
Дорабатываем UI логику
Удаление записи
Обработка ошибок
Показываем пользовательское сообщение
Добавляем индикатор загрузки
Курсовая работа
09Миксины, директивы и плагины
Пример. Создаем компонент Alert
Как работают Mixins
Пример. Создаем свою директиву
Жизненные циклы директивы
Передача параметров в директиву
Работа с модификаторами
Создание своего плагина
Пример. Создание плагина мультиязычности
Модальное окно с Teleport
10Vue Router
Обзор проекта Мини клон Gmail
Настройка Router
Добавляем разные страницы
Динамическая навигация
Пример. Как работать за авторизацией
Как отобразить активную ссылку
Пример. Запоминаем страницу с параметрами в URL
Динамические параметры в URL
Вложенные роуты
Вручную управляем состоянием ссылки
Страница 404 и редирект
Способы защиты страниц
Остановка перехода на страницу
Оптимизация с Lazy Loading
11Vuex - работа с данными
Зачем нужен Vuex
Начинаем работу со Store
Что такое mutations
Зачем нужны getters
Как работают actions
Объект context
Как нам помогают mappers
Разделяем логику с модулями
Именованные модули с namespaced
Как организовать структуру файлов
Как добавлять плагины
12Работа с Composition API
Зачем нужен Composition API
Как работает setup и ref
Работа с функциями
Ref и Reactive. Подробно про реактивность
Как работает Computed
Используем Watch
Получаем доступ до DOM элементов
Работа с v-model
Взаимодействие компонентов
Передаем родителю событие
Объект контекста
Provide и Inject
Методы жизненного цикла
Работа с Vue Router
Пример. Переиспользование
Преимущество хуков
Работа с Vuex
13Vue на TypeScript
Введение
Как перевести существующий проект на TypeScript
Создаем новый проект
Начало работы с TypeScript
Пример. Типизированные переиспользуемые хуки
Загружаем данные с сервера
Работа с Suspense
Типизируем хуки
Работа с Vuex
14Практика
Разработка приложения
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Vue JS - Полный курс c нуля» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 28 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
