Мы в сети

VK
FB

Оформите подписку!

 Введите Ваш E-m@il и
получайте свежие новости

Страница автора - Владилен Минин - Webformyself
Страница автора

Автор: Владилен Минин

Курс состоит из 2-х больших блоков: теория и практика. Изучив теоретический блок, вы получите актуальную исчерпывающую теоретическую базу по состоянию на апрель 2018 года (к которой сможете возвращаться при необходимости в будущем – в качестве удобного систематизированного справочника). В теоретическом блоке собрано практически ВСЕ, что только может вам понадобится при разработке с VUE. В практической части мы с вами с полного нуля шаг за шагом создадим SPA приложение объявлений на material design и firebase. При желании вы сможете его дополнить, дописать актуальные функции, выводить на рынок как полноценный коммерческий продукт, развивать как стартап и т.д.

Смотреть видео:

Фреймворк VUE.JS. Полное руководство для современной веб-разработки. (Владилен Минин)

Содержание:

  • Блок 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 к проекту и начать использовать его возможности глобально и внутри каждого компонента.

  • Заключение

В данном заключительном уроке мы подведем итог того приложения, которое сделали.