Видеокурс "Фреймворк VUE JS. Полное руководство для современной веб-разработки"
-
Издательство
Автор
- Цена:
- 7870 ₽
ПОДРОБНОЕ ОПИСАНИЕ
Автор: Владилен Минин
Курс состоит из 2-х больших блоков: теория и практика. Изучив теоретический блок, вы получите актуальную исчерпывающую теоретическую базу по состоянию на апрель 2018 года (к которой сможете возвращаться при необходимости в будущем – в качестве удобного систематизированного справочника). В теоретическом блоке собрано практически ВСЕ, что только может вам понадобится при разработке с VUE. В практической части мы с вами с полного нуля шаг за шагом создадим SPA приложение объявлений на material design и firebase. При желании вы сможете его дополнить, дописать актуальные функции, выводить на рынок как полноценный коммерческий продукт, развивать как стартап и т.д.
MAYA Моделирование. (РафаэльКусаматов) -
- Блок 1. Знакомство с Vue
Данный блок является вводным. Из него вы узнаете, что такое технология Vue.js, где она применяется, чем лучше или хуже других технологий, и почему стоит учить именно Vue. В рамках блока мы напишем совсем небольшое приложение, в котором вы увидите динамику, которую можно создавать, используя Vue.
- Что такое Vue.js
Вы узнаете, что собой представляет фреймворк Vue.js, в чем его отличие от других популярных фреймворков и почему стоит учить именно его.
- Создание простого Vue-приложения
Вы увидите, как можно быстро начать разработку с помощью Vue. В результате урока мы напишем простое приложение, на примере которого вы увидите самые базовые понятия фреймворка.
- Блок 2. Основы Vue
Данный блок посвящен всем важным вводным темам, которые есть во фреймворке. Мы разберем самые основные принципы Vue на практических примерах, и подробным образом разберем синтаксис и принципы работы фреймворка.
- Интерполяция
Начиная с данного урока, вы будете знакомиться с основами Vue. В этом уроке вы узнаете самую основу – способ динамически связывать шаблон и данные Vue.
- Динамические атрибуты
Вы узнаете каким образом работает фреймворк с HTML-атрибутами, в чем особенность данного взаимодействия. Вы впервые познакомитесь с таким понятием как директивы и научитесь использовать одну из них – v-bind.
- Вывод HTML-кода
Иногда встречаются ситуации, когда необходимо вывести HTML-код прямо из Javascript в шаблон. Но стандартные методы здесь не сработают, в целях защиты. Вы узнаете, как обойти данные методы используя уже другую директиву.
- Добавление событий
Вы познакомитесь с одной из самых главных директив, которая позволяют динамически взаимодействовать с пользователем вашего приложения.
- Передача параметров в метод
Вы узнаете, как передавать любое количество параметров разного типа в методы, которыми вы обрабатываете события вашего приложения.
- Модификаторы событий
Вы узнаете специальную очень удобную особенность фреймворка Vue – модификаторы. Речь пойдет конкретно про модификаторы, которые упрощают обработку шаблонных решений в Javascript.
- Модификаторы событий клавиатуры
Вы познакомитесь более подробно с модификаторами, которые изначально есть во фреймворке, которые помогают очень удобно обрабатывать нажатия на кнопки клавиатуры.
- Ярлыки для директив
Вы узнаете про то, как можно упростить синтаксис в шаблоне используя ярлыки для более быстрой разработки.
- Модель для работы с формами
В этом уроке мы в общих чертах познакомимся с понятием модели, которая позволяет двусторонне связывать шаблон и функциональный код приложения.
- Работа с CSS-классами
Фреймворк Vue предоставляет нам 3 очень удобных инструмента для динамической работы с классами, которые как раз мы и разберем в этом уроке.
- Динамические стили
Аналогично классам, в этом уроке мы разберем все способы динамического добавления стилей к HTML-элементам.
- Управление отображением элементов
Вы узнаете про способы отображения или сокрытия HTML-элементов в шаблоне по условию, которое можно динамически изменять.
- Директива v-show vs v-if
Вы узнаете про новую директиву, с помощью которой можно управлять отображением элементов, а также поймете разницу между двумя подходами.
- Работа со списками
Вы узнаете про очень важную директиву, которая позволяет работать с однотипными элементами – вывод списка элементов, отображение объектов в шаблоне и многое другое.
- Оптимизация приложения с computed
Вы узнаете про новый объект конфигурации приложения, с помощью которого вы сможете оптимизировать скорость работы приложения, используя стандартные методы.
- Отслеживание изменений с watch
Иногда возникают ситуации, когда необходимо вручную отследить изменение определенного элемента и выполнить какое-либо действие. Вы узнаете, как это можно реализовать, используя этот фреймворк.
- Связывание разных приложений. Инстанс Vue
Вы узнаете, как связать несколько объектов или приложений между собой. Мы также поговорим про новые методы и возможности, которые возникают, если мы проинициализировали несколько приложений.
- Доступ к DOM-элементам
Вы узнаете про референции, с помощью которых вы можете получать доступ с нативным HTML-элементам в любом месте Vue приложения.
- Свойство template
Этот урок будет полезен тем, кто не любит разделять Javascript и HTML, а предпочитает писать все в одном месте. Вы узнаете, как можно задать шаблон прямо в приложении и какие особенности есть у данного подхода.
- Жизненный цикл
Как и в любом другом фреймворке у Vue есть очень удобная возможность отслеживать в любой важный момент времени ваш компонент и выполнять над ним какие-либо манипуляции. Для этого реализован так называемый жизненный цикл компонента, и вы узнаете, как и когда этапами можно воспользоваться.
- Блок 3. Vue CLI&Webpack
В данном блоке мы разберем что такое за инструмент Vue CLI. Мы установим его на компьютер и с помощью него сгенерируем новый проект на Vue на основе сборщика webpack.У нас сразу будет доступно к работе приложение с быстрой перезагрузкой страницы в браузере, технологией Hot Module Replacement и препроцессорами. Так мы разберем файлы с расширением Vue, которые были сделаны специально для данного фреймворка.
- Зачем нужен CLI
Начиная с данного урока, мы перестанем разрабатывать все в HTML-файле и перейдем на новый уровень: будем использовать целый набор удобных инструментов для быстрого разворачивания Vue приложения.
- Установка CLI и создание проекта
В этом уроке вы узнаете, как установить cli и создать определенный из списка шаблон приложения.
- Обзор структуры проекта
В этом уроке вы подробно познакомитесь со всеми сущностями и файлами, которые есть в созданном проекте.
- Как запускается приложение
В этом уроке вы узнаете, как запустить приложение, которое мы сгенерировали.
- Блок 4. Компоненты
В данном блоке мы очень подробно разберем понятие компонентов в библиотеке Vue. Мы разберем зачем нужны компоненты, как их регистрировать локально и глобально. Причем мы разберем как это делается в HTML-файле и уже в целом проекте, который использует файлы с расширением .vue. Далее вы узнаете обо всех особенностях взаимодействия между компонентами, а также о том, как во Vue создаются локальные стили, и многое другое.
- Зачем нужны компоненты
В данном уроке вы узнаете, что такое компоненты во фреймворке Vue и зачем они нужны.
- Метод data
Вы узнаете, почему теперь нельзя использовать объект data, а вместо него нужно использовать метод с аналогичным названием. Вы наглядно увидите какие ошибки могут из-за этого возникнуть и как метод их решает.
- Локальная и глобальная регистрация
Вы узнаете, как и зачем нужно регистрировать компоненты, как это сделать локально – внутри компонента, и глобально – используя глобальный объект. Вы увидите, в чем отличие данных подходов.
- Названия компонентов
В этом уроке мы поговорим про селекторы компонентов, как их нужно выбирать и в дальнейшем использовать.
- Регистрация компонентов в .vue
В этом уроке мы повторим подход регистрации компонентов, только уже не в HTML-файле, а в файле с расширением .vue.
- Передача параметров компоненту
В этом уроке мы начнем учиться связывать компоненты в приложении. Вы узнаете, как передавать параметры от родительского компонента дочернему.
- Валидация входящих параметров
Для того, чтобы избежать ошибок, мы можем настроить валидацию входящих параметров в компонент очень гибким способом. Каким именно – вы узнаете в данном уроке.
- Передача параметров от дочернего компонента
В этом уроке мы рассмотрим противоположное взаимодействие компонентов, от дочернего к родительскому.
- Передача функции как параметр
В этом уроке вы узнаете, как можно передавать функцию как параметр в дочерний компонент, и как это отразится на взаимодействии компонентов.
- Связь дочерних компонентов
В этом уроке, вы узнаете, как связать 2 дочерних компонента. Мы разберем первый подход – связь компонентов через родительский компонент.
- Использование event emitter
В этом уроке вы узнаете, как связать 2 одноуровневых компонента используя шину событий, которую можно получить, используя Vue.
- Изолированные стили
Изолированные стили
- Передача HTML компоненту
В данном уроке вы узнаете, как можно передавать HTML-код компоненту как параметр. Узнаете про механизм слотов и вывод кода в определенном месте.
- Блок 5. Директивы
В данном блоке мы подробно разберем что такое директивы во Vue. Мы научимся создавать свои собственные директивы, узнаем все функции, которыми можно воспользоваться при разработке собственных директив и разберемся, как и когда их нужно использовать. После прохождения блока вы намного лучше поймете, как работают стандартные директивы и разберетесь в основном функционале библиотеки.
- Создание своей директивы
В данном уроке вы узнаете, как мы можем создать свою собственную директиву.
- Взаимодействие с элементом
В данном уроке вы увидите, как директива взаимодействует с элементом к которому она была применена.
- Жизненный цикл директивы
Как и в случае с компонентом, в директиве также присутствуют различные важные этапы ее жизни, и мы разберем каждый из них.
- Параметры в директивах
В данном уроке вы узнаете, как передавать и обрабатывать параметры, которые были переданы внутрь директивы.
- Аргументы в директивах
В этом уроке вы узнаете про другой вид параметров, которые можно передать в директиву – аргументы.
- Модификаторы
Как и у встроенных директив, у наших директив также может быть любое количество модификаторов. Вы узнаете, как их можно использовать и обработать.
- Локальная регистрация
Как и у компонентов, директивы можно изолировать и регистрировать локально, или же наоборот – глобально. Вы узнаете, как это сделать.
- Блок 6. Фильтры и Миксины
В данном блоке мы изучим фильтры и миксины. Мы научимся преобразовывать данные внутри шаблона любым образом, каким мы пожелаем. Далее, вы научитесь правильно фильтровать в реальном времени списки и узнаете, какую технологию для этого нужно применять. После мы познакомимся с таким понятием как миксины и научимся использовать код в разных компонентах.
- Создание простых фильтров
В этом уроке вы познакомитесь с понятие фильтров во фреймворке Vue. Вы узнаете, как их создавать и использовать.
- Фильтрация списков
Этот урок покажет вам механизм, с помощью которого вы сможете динамически фильтровать списки элементов внутри шаблона.
- Использование миксинов
В этом уроке вы узнаете, что такое миксины, как их использовать и зачем они нужны.
- Блок 7. Работа с формами
Вы научитесь работать с формами и создавать свои собственные элементы формы. Мы поэтапно подробно разберем каждый из элементов форм, которые есть в HTML и научимся обрабатывать каждый из них. После мы создадим свой собственный компонент, который будет являться частью формы, но мы запрограммируем его самостоятельно.
- Текстовый инпут
В этом уроке мы более подробно поговорим, как модель работает с текстовыми полями.
- Текстарея
Данный урок покажет вам как с помощью модели можно работать с текстареей.
- Чекбоксы
Из этого урока вы узнаете об особенностях работы с чекбоксами внутри фреймворка.
- Радио кнопки
В этом уроке вы узнаете, как модель работает с радиокнопками.
- Селекты
В этом уроке мы разберем еще один элемент – выбор из списка селекта. И вы узнаете как модель работает с подобным элементом.
- Числовой модификатор
В этом уроке вы познакомитесь с полезным модификатором, который позволит автоматически приводить нужные элементы к числу.
- Создание своего контрола
Часто стандартных элементов не хватает, и нужно создавать свои собственные элементы формы. В этом уроке вы узнаете, как это сделать.
- Блок 8. Валидация форм с Vuelidate
Данный блок посвящен сторонней библиотеки Vuelidate. Мы научимся использовать и регистрировать сторонние плагины во Vue, тем самым расширяя функционал фреймворка. Далее мы научимся создавать динамические и красивые валидации для любых элементов формы, практически с любыми условиями и выводить сообщения об ошибках, в зависимости от условия. Научимся создавать свои собственные валидаторы, которые асинхронно или синхронно смогут проверять те значения, которые мы запрограммируем.
- Установка и настройка проекта
Мы создадим проект, в котором будут необходимые элементы формы для дальнейшей валидации. Также мы установим библиотеку, и вы увидите, как во Vue можно подключать различные плагины.
- Настройка валидаторов
В этом уроке вы увидите и научитесь первым шагам инициализации валидатора и первой проверке правильности введенного значения.
- Визуальное отображение ошибок
В этом уроке вы узнаете, как, используя библиотеку, корректно вывести сообщение об ошибке, чтобы пользователь понимал, что конкретно он сделал не так.
- Валидация пароля
В этом уроке мы рассмотрим следующие способы валидации на поле ввода пароля.
- Создание своего валидатора
Вы узнаете, как создаются свои собственные валидаторы, если их нет в списке уже готовых в библиотеке. Мы создадим валидатор, который будет проверять в асинхронном режиме, используется уже введенный почтовый адрес в базе или нет.
- Отправка формы
В этом уроке мы разберем способ валидации и отправки всей формы.
- Блок 9. Роутинг с Vue-router
Вы узнаете про дополнительный плагин, который расширит функционал Vue возможностью создавать множество страниц и делать навигацию между ними без перезагрузки страницы. Мы познакомимся с основными возможностями данный библиотеки, где наглядно разберем весь ее функционал на практических примерах. Научимся оптимизировать наше приложение таким образом, чтобы страницы загружали свой код только в случае запроса, тем самым сильно увеличив скорость загрузки приложения.
- Установка Vue-router
В данном уроке вы узнаете, как установить новый плагин для Vue, который будет отвечать за роутинг и навигацию между страницами.
- Настройка роутера
В данном уроке вы узнаете, как правильно оформить инициализацию роутера, узнаете какой формат поддерживает библиотека и что нужно использовать.
- Создание навигации
Мы создадим верхнюю панель навигации, где рассмотрим способы создания ссылок, которые будут перенаправлять на другие страницы без перезагрузки окна браузера.
- Обозначение активной ссылки
В этом уроке вы узнаете способы и тонкости определения текущего состояния роутинга и стилистического обозначения активной ссылки.
- Динамические роуты
В этом уроке вы узнаете, как сделать роуты динамическими – у них будет изменяемая часть. Также вы узнаете, как обрабатывать параметры в компоненте.
- Программная навигация
В этом уроке вы узнаете, как совершать навигацию уже не в шаблоне, а в самом компоненте.
- Вложенные роуты
В данном уроке вы познакомитесь со способом создания роутов любого уровня вложенности.
- Передача параметров
В данном уроке вы узнаете про другой вид параметров, которые можно передавать по URL-адресу и обрабатывать в компонентах – гет параметры.
- Хэш и скролл
В этом уроке вы узнаете, как передавать хэш в адресной строке и делать скролл в нужное место страницы.
- Редирект
В этом уроке мы разберем способ редиректа с различных страниц на другие, и обработку ошибки ненайденного роута.
- Защита роутов
Вы узнаете про способ защиты роутов с помощью такой сущности как guard. Мы рассмотрим несколько мест и способов, где мы можем реализовать подобный функционал.
- Ленивая загрузка
В данном уроке вы узнаете, что такое ленивая загрузка и как с помощью данной технологии увеличить производительность вашего приложения.
- Блок 10. Работа с сервером с Vue-resource
В этом блоке мы разберем еще один дополнительный плагин, который упрощает работу с AJAX запросами.Изучим основной функционал данного плагина, научимся создавать новые записи в базе данных, загружать данные из базы, и многое другое. Вы узнаете, как работать с ресурсами и интерсепторами.
- Настройка приложения
В этом уроке мы создадим каркас приложения, в котором будем рассматривать функционал работы библиотеки. Настроим сервер и установим плагин.
- Создание объектов POST
В данном уроке вы узнаете, как использовать библиотеку и отправлять POST запросы для создания записей в базе данных.
- Получение объектов GET
В этом уроке вы узнаете, как отправлять GET запросы для того, чтобы получить данные с сервера.
- Использование resource
В данном уроке вы узнаете, что такое resource и как данная технология может облегчить работу с AJAX-запросами.
- Глобальная настройка
Мы разберем способ глобальной настройки приложения для того, чтобы конфигурировать ваш проект было намного проще и быстрее.
- Интерсепторы
В этом уроке вы узнаете про такой концепт как интерсепторы, зачем они нужны и как с помощью них вы можете управлять http-запросами.
- Блок 11. Работа с данными с Vuex
В данном блоке вы познакомитесь с плагином, который позволяет очень гибко и удобно управлять данными, работая с Vue. Вы узнаете концепцию Vuex, как его регистрировать, как взаимодействовать с данными внутри него: забирать, получать, изменять, и многое другое.
- Установка Vuex
В этом уроке вы увидите, как можно установить плагин Vuex и начать его использовать.
- Использование state
Вы узнаете, как пользоваться стейтом в библиотеки, зачем он нужен, каким принципам отвечает и почему стоит использовать именно стейт для связи разных элементов.
- Использование getters
В данном уроке вы узнаете, что такое геттеры и почему данная сущность оптимизирует работу со стейтом.
- Использование mutations
В данном уроке вы узнаете, что такое мутации в рамках библиотеки Vuex.
- Использование actions
В этом уроке вы узнаете почему для изменения стэйта нужно использовать именно экшены, каким принципам они должны отвечать и как их использовать.
- Оптимизация с помощью модулей
В этом уроке вы узнаете про то, как можно оптимизировать структуру стора путем модульной декомпозиции структуры стейта.
- Блок 12. Создание SPA приложения на material design и firebase
Данный модуль посвящен практической части курса, где мы все знания, полученные в теории, будем применять на практике. Мы создадим SPA приложение, которое является Serverless – приложением, которое работает без серверной части. При этом у нас будет полностью рабочая база данных в облаке, на сервисе Firebase от Google. У нас там будет реализован хостинг, база данных, хранение картинок и регистрация с авторизацией пользователей. В качестве дизайна нами будет выбран Material Design от Google. Наше приложение будет полностью адаптивным, то есть оно будет одинаково хорошо отображаться на любом экране. По смыслу это будет приложение, в котором будет возможность просматривать и создавать объявления о продаже чего-либо и прием заявок. Будет реализован личный кабинет, возможность загружать картинки, редактировать объявления и просматривать заявки.
- Создание проекта
В данном уроке мы начнем создавать наш проект и установим с помощью Vue CLI и Vuetify приложение на Material Design на webpack-сборке.
- Обзор приложения
В данном уроке мы рассмотрим все файлы и папки в новом приложении.
- Создание тулбара
Начиная с данного урока, мы начнем создавать каркас нашего приложения. Создадим верхнее навигационное меню и параллельно будем изучать, как работать с библиотекой Vuetify.
- Добавление ссылок и адаптация
В данном уроке мы создадим левое меню, которое будет заменять верхний тулбар, если не будет места, и выведем в два компонента ссылки всего приложения.
- Регистрация роутов
В данном уроке мы зарегистрируем все страницы нашего компонента, а также создадим их шаблоны.
- Создание страницы логина
Реализуем полностью функционал страницы логина с валидацией полей и отправкой формы. Мы будем выводить разные сообщения об ошибках в случае неправильно введенных данных, так что пользователь всегда сможет знать, что он делает не так.
- Создание страницы регистрации
В этом уроке мы сделаем всю функциональную часть для страницы регистрации с валидацией, сообщениях об ошибках и проверкой идентичности паролей.
- Создание главной страницы
Мы создадим главную домашнюю страницу нашего приложения. В нее будет входить адаптивный слайдер изображений и карточки разных объявлений, которые также будут выстраиваться в зависимости от ширины экрана.
- Создание страницы заказов
Мы создадим пока только визуальную часть страницы заказов, где в дальнейшем сможем отслеживать заказы, которые пришли от разных людей на ваши объявления.
- Создание страницы формы
Мы создадим визуальную часть страницы, в которой будем создавать новые объявления. Мы сделаем валидацию каждого из полей, но пока без загрузки изображений.
- Создание страницы списка
В этом уроке мы создадим макет страницы списка всех созданных вами объявлений.
- Создание страницы объявления
Мы создадим страницу отдельного объявления. Мы будем получать параметры из адресной строки и в зависимости от него выводить нужные данные об объявлении.
- Подключение Vuex
В этом уроке мы подключим библиотеку Vuex для работы с данными и начнем перемещать все взаимодействия уже непосредственно в среду общего стора.
- Добавление объявлений
Мы реализуем возможность добавлять новые объявления уже через общую шину Vuex, где добавление будет работать в динамическом режиме. Также мы полностью перепишем все взаимодействие объявлений на Vuex.
- Настройка firebase
В данном уроке мы настроим firebase в наш проект и рассмотрим какие функции у нее есть.
- Регистрация пользователей
В этом уроке мы напишем функционал регистрации пользователей через сервер и базу данных, где уже будут сохраняться наши значения.
- Логин пользователей
В данном уроке мы реализуем возможность зарегистрированным пользователям выполнять вход в систему под своими данными.
- Вывод ошибок
Если у нас будут приходить какие-то ошибки с сервера, например, пароль неправильный, то у нас будет компонент, который будет отвечать за вывод этих данных в красивом формате.
- Поддержание сессии пользователя
Вы узнаете, как, используя firebase, можно узнать, что пользователь уже вошел в систему, и сделать ему авто авторизацию, чтобы он каждый раз не вписывал свои данные.
- Защита роутов
Мы защитим приватные страницы нашего приложения таким образом, что пользователи, которые не залогинились в систему, не смогут просматривать некоторые из них, например, создавать новые объявления или видеть список своих объявлений.
- Создание объявления в firebase
В этом уроке мы с помощью данных, введенных в форме на сайте, будем заносить новую запись в базу данных firebase и хранить уже ее на сервере.
- Загрузка объявлений по умолчанию
В этом уроке мы будет подгружать все объявления, что у нас есть в базе данных, и сразу показывать их пользователю.s
- Загрузка изображений в firebase
Мы реализуем возможность загрузки изображений. Будем обрабатывать входящий файл с помощью Vue и далее показывать его превью, а потом загружать изображение на удаленный сервер firebase storage и привязывать новую картинку к нужному объявлению.
- Создание модального окна редактирования
В этом уроке мы создадим адаптивное модальное окно, с помощью которого сможем редактировать наши объявления.
- Редактирование объявления
В этом уроке мы напишем функционал для редактирования объявления, где будем редактировать его на лету и сразу же в базе данных.
- Создание окна покупки
В этом уроке мы создадим адаптивное модальное окно, в котором будем делать заказ через интересующее нас объявление.
- Создание и обработка заказов
В этом уроке мы создадим новую таблицу в базе данных для записи заявок по покупке определенных объявлений.
- Управление цветами
В этом уроке вы узнаете, как с помощью простой конфигурации приложения полностью изменить его цветовую гамму за несколько кликов.
- Подключение препроцессоров
Вы увидите, как можно подключить препроцессор stylus к проекту и начать использовать его возможности глобально и внутри каждого компонента.
- Заключение
В данном заключительном уроке мы подведем итог того приложения, которое сделали.
-
MAYA Моделирование. (РафаэльКусаматов)
