Данный блок является вводным. Из него вы узнаете, что такое технология Vue.js, где она применяется, чем лучше или хуже других технологий, и почему стоит учить именно Vue. В рамках блока мы напишем совсем небольшое приложение, в котором вы увидите динамику, которую можно создавать, используя Vue.
Вы узнаете, что собой представляет фреймворк Vue.js, в чем его отличие от других популярных фреймворков и почему стоит учить именно его.
- Создание простого Vue-приложения
Вы увидите, как можно быстро начать разработку с помощью Vue. В результате урока мы напишем простое приложение, на примере которого вы увидите самые базовые понятия фреймворка.
Данный блок посвящен всем важным вводным темам, которые есть во фреймворке. Мы разберем самые основные принципы Vue на практических примерах, и подробным образом разберем синтаксис и принципы работы фреймворка.
Начиная с данного урока, вы будете знакомиться с основами Vue. В этом уроке вы узнаете самую основу – способ динамически связывать шаблон и данные Vue.
Вы узнаете каким образом работает фреймворк с HTML-атрибутами, в чем особенность данного взаимодействия. Вы впервые познакомитесь с таким понятием как директивы и научитесь использовать одну из них – v-bind.
Иногда встречаются ситуации, когда необходимо вывести HTML-код прямо из Javascript в шаблон. Но стандартные методы здесь не сработают, в целях защиты. Вы узнаете, как обойти данные методы используя уже другую директиву.
Вы познакомитесь с одной из самых главных директив, которая позволяют динамически взаимодействовать с пользователем вашего приложения.
- Передача параметров в метод
Вы узнаете, как передавать любое количество параметров разного типа в методы, которыми вы обрабатываете события вашего приложения.
Вы узнаете специальную очень удобную особенность фреймворка Vue – модификаторы. Речь пойдет конкретно про модификаторы, которые упрощают обработку шаблонных решений в Javascript.
- Модификаторы событий клавиатуры
Вы познакомитесь более подробно с модификаторами, которые изначально есть во фреймворке, которые помогают очень удобно обрабатывать нажатия на кнопки клавиатуры.
Вы узнаете про то, как можно упростить синтаксис в шаблоне используя ярлыки для более быстрой разработки.
- Модель для работы с формами
В этом уроке мы в общих чертах познакомимся с понятием модели, которая позволяет двусторонне связывать шаблон и функциональный код приложения.
Фреймворк Vue предоставляет нам 3 очень удобных инструмента для динамической работы с классами, которые как раз мы и разберем в этом уроке.
Аналогично классам, в этом уроке мы разберем все способы динамического добавления стилей к HTML-элементам.
- Управление отображением элементов
Вы узнаете про способы отображения или сокрытия HTML-элементов в шаблоне по условию, которое можно динамически изменять.
Вы узнаете про новую директиву, с помощью которой можно управлять отображением элементов, а также поймете разницу между двумя подходами.
Вы узнаете про очень важную директиву, которая позволяет работать с однотипными элементами – вывод списка элементов, отображение объектов в шаблоне и многое другое.
- Оптимизация приложения с computed
Вы узнаете про новый объект конфигурации приложения, с помощью которого вы сможете оптимизировать скорость работы приложения, используя стандартные методы.
- Отслеживание изменений с watch
Иногда возникают ситуации, когда необходимо вручную отследить изменение определенного элемента и выполнить какое-либо действие. Вы узнаете, как это можно реализовать, используя этот фреймворк.
- Связывание разных приложений. Инстанс Vue
Вы узнаете, как связать несколько объектов или приложений между собой. Мы также поговорим про новые методы и возможности, которые возникают, если мы проинициализировали несколько приложений.
Вы узнаете про референции, с помощью которых вы можете получать доступ с нативным HTML-элементам в любом месте Vue приложения.
Этот урок будет полезен тем, кто не любит разделять Javascript и HTML, а предпочитает писать все в одном месте. Вы узнаете, как можно задать шаблон прямо в приложении и какие особенности есть у данного подхода.
Как и в любом другом фреймворке у Vue есть очень удобная возможность отслеживать в любой важный момент времени ваш компонент и выполнять над ним какие-либо манипуляции. Для этого реализован так называемый жизненный цикл компонента, и вы узнаете, как и когда этапами можно воспользоваться.
- Блок 3. Vue CLI&Webpack
В данном блоке мы разберем что такое за инструмент Vue CLI. Мы установим его на компьютер и с помощью него сгенерируем новый проект на Vue на основе сборщика webpack.У нас сразу будет доступно к работе приложение с быстрой перезагрузкой страницы в браузере, технологией Hot Module Replacement и препроцессорами. Так мы разберем файлы с расширением Vue, которые были сделаны специально для данного фреймворка.
Начиная с данного урока, мы перестанем разрабатывать все в HTML-файле и перейдем на новый уровень: будем использовать целый набор удобных инструментов для быстрого разворачивания Vue приложения.
- Установка CLI и создание проекта
В этом уроке вы узнаете, как установить cli и создать определенный из списка шаблон приложения.
В этом уроке вы подробно познакомитесь со всеми сущностями и файлами, которые есть в созданном проекте.
- Как запускается приложение
В этом уроке вы узнаете, как запустить приложение, которое мы сгенерировали.
В данном блоке мы очень подробно разберем понятие компонентов в библиотеке Vue. Мы разберем зачем нужны компоненты, как их регистрировать локально и глобально. Причем мы разберем как это делается в HTML-файле и уже в целом проекте, который использует файлы с расширением .vue. Далее вы узнаете обо всех особенностях взаимодействия между компонентами, а также о том, как во Vue создаются локальные стили, и многое другое.
В данном уроке вы узнаете, что такое компоненты во фреймворке Vue и зачем они нужны.
Вы узнаете, почему теперь нельзя использовать объект data, а вместо него нужно использовать метод с аналогичным названием. Вы наглядно увидите какие ошибки могут из-за этого возникнуть и как метод их решает.
- Локальная и глобальная регистрация
Вы узнаете, как и зачем нужно регистрировать компоненты, как это сделать локально – внутри компонента, и глобально – используя глобальный объект. Вы увидите, в чем отличие данных подходов.
В этом уроке мы поговорим про селекторы компонентов, как их нужно выбирать и в дальнейшем использовать.
- Регистрация компонентов в .vue
В этом уроке мы повторим подход регистрации компонентов, только уже не в HTML-файле, а в файле с расширением .vue.
- Передача параметров компоненту
В этом уроке мы начнем учиться связывать компоненты в приложении. Вы узнаете, как передавать параметры от родительского компонента дочернему.
- Валидация входящих параметров
Для того, чтобы избежать ошибок, мы можем настроить валидацию входящих параметров в компонент очень гибким способом. Каким именно – вы узнаете в данном уроке.
- Передача параметров от дочернего компонента
В этом уроке мы рассмотрим противоположное взаимодействие компонентов, от дочернего к родительскому.
- Передача функции как параметр
В этом уроке вы узнаете, как можно передавать функцию как параметр в дочерний компонент, и как это отразится на взаимодействии компонентов.
- Связь дочерних компонентов
В этом уроке, вы узнаете, как связать 2 дочерних компонента. Мы разберем первый подход – связь компонентов через родительский компонент.
- Использование event emitter
В этом уроке вы узнаете, как связать 2 одноуровневых компонента используя шину событий, которую можно получить, используя Vue.
Изолированные стили
В данном уроке вы узнаете, как можно передавать HTML-код компоненту как параметр. Узнаете про механизм слотов и вывод кода в определенном месте.
В данном блоке мы подробно разберем что такое директивы во Vue. Мы научимся создавать свои собственные директивы, узнаем все функции, которыми можно воспользоваться при разработке собственных директив и разберемся, как и когда их нужно использовать. После прохождения блока вы намного лучше поймете, как работают стандартные директивы и разберетесь в основном функционале библиотеки.
В данном уроке вы узнаете, как мы можем создать свою собственную директиву.
- Взаимодействие с элементом
В данном уроке вы увидите, как директива взаимодействует с элементом к которому она была применена.
Как и в случае с компонентом, в директиве также присутствуют различные важные этапы ее жизни, и мы разберем каждый из них.
В данном уроке вы узнаете, как передавать и обрабатывать параметры, которые были переданы внутрь директивы.
В этом уроке вы узнаете про другой вид параметров, которые можно передать в директиву – аргументы.
Как и у встроенных директив, у наших директив также может быть любое количество модификаторов. Вы узнаете, как их можно использовать и обработать.
Как и у компонентов, директивы можно изолировать и регистрировать локально, или же наоборот – глобально. Вы узнаете, как это сделать.
- Блок 6. Фильтры и Миксины
В данном блоке мы изучим фильтры и миксины. Мы научимся преобразовывать данные внутри шаблона любым образом, каким мы пожелаем. Далее, вы научитесь правильно фильтровать в реальном времени списки и узнаете, какую технологию для этого нужно применять. После мы познакомимся с таким понятием как миксины и научимся использовать код в разных компонентах.
- Создание простых фильтров
В этом уроке вы познакомитесь с понятие фильтров во фреймворке Vue. Вы узнаете, как их создавать и использовать.
Этот урок покажет вам механизм, с помощью которого вы сможете динамически фильтровать списки элементов внутри шаблона.
В этом уроке вы узнаете, что такое миксины, как их использовать и зачем они нужны.
Вы научитесь работать с формами и создавать свои собственные элементы формы. Мы поэтапно подробно разберем каждый из элементов форм, которые есть в HTML и научимся обрабатывать каждый из них. После мы создадим свой собственный компонент, который будет являться частью формы, но мы запрограммируем его самостоятельно.
В этом уроке мы более подробно поговорим, как модель работает с текстовыми полями.
Данный урок покажет вам как с помощью модели можно работать с текстареей.
Из этого урока вы узнаете об особенностях работы с чекбоксами внутри фреймворка.
В этом уроке вы узнаете, как модель работает с радиокнопками.
В этом уроке мы разберем еще один элемент – выбор из списка селекта. И вы узнаете как модель работает с подобным элементом.
В этом уроке вы познакомитесь с полезным модификатором, который позволит автоматически приводить нужные элементы к числу.
Часто стандартных элементов не хватает, и нужно создавать свои собственные элементы формы. В этом уроке вы узнаете, как это сделать.
- Блок 8. Валидация форм с Vuelidate
Данный блок посвящен сторонней библиотеки Vuelidate. Мы научимся использовать и регистрировать сторонние плагины во Vue, тем самым расширяя функционал фреймворка. Далее мы научимся создавать динамические и красивые валидации для любых элементов формы, практически с любыми условиями и выводить сообщения об ошибках, в зависимости от условия. Научимся создавать свои собственные валидаторы, которые асинхронно или синхронно смогут проверять те значения, которые мы запрограммируем.
- Установка и настройка проекта
Мы создадим проект, в котором будут необходимые элементы формы для дальнейшей валидации. Также мы установим библиотеку, и вы увидите, как во Vue можно подключать различные плагины.
В этом уроке вы увидите и научитесь первым шагам инициализации валидатора и первой проверке правильности введенного значения.
- Визуальное отображение ошибок
В этом уроке вы узнаете, как, используя библиотеку, корректно вывести сообщение об ошибке, чтобы пользователь понимал, что конкретно он сделал не так.
В этом уроке мы рассмотрим следующие способы валидации на поле ввода пароля.
- Создание своего валидатора
Вы узнаете, как создаются свои собственные валидаторы, если их нет в списке уже готовых в библиотеке. Мы создадим валидатор, который будет проверять в асинхронном режиме, используется уже введенный почтовый адрес в базе или нет.
В этом уроке мы разберем способ валидации и отправки всей формы.
- Блок 9. Роутинг с Vue-router
Вы узнаете про дополнительный плагин, который расширит функционал Vue возможностью создавать множество страниц и делать навигацию между ними без перезагрузки страницы. Мы познакомимся с основными возможностями данный библиотеки, где наглядно разберем весь ее функционал на практических примерах. Научимся оптимизировать наше приложение таким образом, чтобы страницы загружали свой код только в случае запроса, тем самым сильно увеличив скорость загрузки приложения.
В данном уроке вы узнаете, как установить новый плагин для Vue, который будет отвечать за роутинг и навигацию между страницами.
В данном уроке вы узнаете, как правильно оформить инициализацию роутера, узнаете какой формат поддерживает библиотека и что нужно использовать.
Мы создадим верхнюю панель навигации, где рассмотрим способы создания ссылок, которые будут перенаправлять на другие страницы без перезагрузки окна браузера.
- Обозначение активной ссылки
В этом уроке вы узнаете способы и тонкости определения текущего состояния роутинга и стилистического обозначения активной ссылки.
В этом уроке вы узнаете, как сделать роуты динамическими – у них будет изменяемая часть. Также вы узнаете, как обрабатывать параметры в компоненте.
В этом уроке вы узнаете, как совершать навигацию уже не в шаблоне, а в самом компоненте.
В данном уроке вы познакомитесь со способом создания роутов любого уровня вложенности.
В данном уроке вы узнаете про другой вид параметров, которые можно передавать по URL-адресу и обрабатывать в компонентах – гет параметры.
В этом уроке вы узнаете, как передавать хэш в адресной строке и делать скролл в нужное место страницы.
В этом уроке мы разберем способ редиректа с различных страниц на другие, и обработку ошибки ненайденного роута.
Вы узнаете про способ защиты роутов с помощью такой сущности как guard. Мы рассмотрим несколько мест и способов, где мы можем реализовать подобный функционал.
В данном уроке вы узнаете, что такое ленивая загрузка и как с помощью данной технологии увеличить производительность вашего приложения.
- Блок 10. Работа с сервером с Vue-resource
В этом блоке мы разберем еще один дополнительный плагин, который упрощает работу с AJAX запросами.Изучим основной функционал данного плагина, научимся создавать новые записи в базе данных, загружать данные из базы, и многое другое. Вы узнаете, как работать с ресурсами и интерсепторами.
В этом уроке мы создадим каркас приложения, в котором будем рассматривать функционал работы библиотеки. Настроим сервер и установим плагин.
В данном уроке вы узнаете, как использовать библиотеку и отправлять POST запросы для создания записей в базе данных.
В этом уроке вы узнаете, как отправлять GET запросы для того, чтобы получить данные с сервера.
В данном уроке вы узнаете, что такое resource и как данная технология может облегчить работу с AJAX-запросами.
Мы разберем способ глобальной настройки приложения для того, чтобы конфигурировать ваш проект было намного проще и быстрее.
В этом уроке вы узнаете про такой концепт как интерсепторы, зачем они нужны и как с помощью них вы можете управлять http-запросами.
- Блок 11. Работа с данными с Vuex
В данном блоке вы познакомитесь с плагином, который позволяет очень гибко и удобно управлять данными, работая с Vue. Вы узнаете концепцию Vuex, как его регистрировать, как взаимодействовать с данными внутри него: забирать, получать, изменять, и многое другое.
В этом уроке вы увидите, как можно установить плагин Vuex и начать его использовать.
Вы узнаете, как пользоваться стейтом в библиотеки, зачем он нужен, каким принципам отвечает и почему стоит использовать именно стейт для связи разных элементов.
В данном уроке вы узнаете, что такое геттеры и почему данная сущность оптимизирует работу со стейтом.
В данном уроке вы узнаете, что такое мутации в рамках библиотеки Vuex.
В этом уроке вы узнаете почему для изменения стэйта нужно использовать именно экшены, каким принципам они должны отвечать и как их использовать.
- Оптимизация с помощью модулей
В этом уроке вы узнаете про то, как можно оптимизировать структуру стора путем модульной декомпозиции структуры стейта.
- Блок 12. Создание SPA приложения на material design и firebase
Данный модуль посвящен практической части курса, где мы все знания, полученные в теории, будем применять на практике. Мы создадим SPA приложение, которое является Serverless – приложением, которое работает без серверной части. При этом у нас будет полностью рабочая база данных в облаке, на сервисе Firebase от Google. У нас там будет реализован хостинг, база данных, хранение картинок и регистрация с авторизацией пользователей. В качестве дизайна нами будет выбран Material Design от Google. Наше приложение будет полностью адаптивным, то есть оно будет одинаково хорошо отображаться на любом экране. По смыслу это будет приложение, в котором будет возможность просматривать и создавать объявления о продаже чего-либо и прием заявок. Будет реализован личный кабинет, возможность загружать картинки, редактировать объявления и просматривать заявки.
В данном уроке мы начнем создавать наш проект и установим с помощью Vue CLI и Vuetify приложение на Material Design на webpack-сборке.
В данном уроке мы рассмотрим все файлы и папки в новом приложении.
Начиная с данного урока, мы начнем создавать каркас нашего приложения. Создадим верхнее навигационное меню и параллельно будем изучать, как работать с библиотекой Vuetify.
- Добавление ссылок и адаптация
В данном уроке мы создадим левое меню, которое будет заменять верхний тулбар, если не будет места, и выведем в два компонента ссылки всего приложения.
В данном уроке мы зарегистрируем все страницы нашего компонента, а также создадим их шаблоны.
Реализуем полностью функционал страницы логина с валидацией полей и отправкой формы. Мы будем выводить разные сообщения об ошибках в случае неправильно введенных данных, так что пользователь всегда сможет знать, что он делает не так.
- Создание страницы регистрации
В этом уроке мы сделаем всю функциональную часть для страницы регистрации с валидацией, сообщениях об ошибках и проверкой идентичности паролей.
- Создание главной страницы
Мы создадим главную домашнюю страницу нашего приложения. В нее будет входить адаптивный слайдер изображений и карточки разных объявлений, которые также будут выстраиваться в зависимости от ширины экрана.
- Создание страницы заказов
Мы создадим пока только визуальную часть страницы заказов, где в дальнейшем сможем отслеживать заказы, которые пришли от разных людей на ваши объявления.
Мы создадим визуальную часть страницы, в которой будем создавать новые объявления. Мы сделаем валидацию каждого из полей, но пока без загрузки изображений.
В этом уроке мы создадим макет страницы списка всех созданных вами объявлений.
- Создание страницы объявления
Мы создадим страницу отдельного объявления. Мы будем получать параметры из адресной строки и в зависимости от него выводить нужные данные об объявлении.
В этом уроке мы подключим библиотеку Vuex для работы с данными и начнем перемещать все взаимодействия уже непосредственно в среду общего стора.
Мы реализуем возможность добавлять новые объявления уже через общую шину Vuex, где добавление будет работать в динамическом режиме. Также мы полностью перепишем все взаимодействие объявлений на Vuex.
В данном уроке мы настроим firebase в наш проект и рассмотрим какие функции у нее есть.
- Регистрация пользователей
В этом уроке мы напишем функционал регистрации пользователей через сервер и базу данных, где уже будут сохраняться наши значения.
В данном уроке мы реализуем возможность зарегистрированным пользователям выполнять вход в систему под своими данными.
Если у нас будут приходить какие-то ошибки с сервера, например, пароль неправильный, то у нас будет компонент, который будет отвечать за вывод этих данных в красивом формате.
- Поддержание сессии пользователя
Вы узнаете, как, используя firebase, можно узнать, что пользователь уже вошел в систему, и сделать ему авто авторизацию, чтобы он каждый раз не вписывал свои данные.
Мы защитим приватные страницы нашего приложения таким образом, что пользователи, которые не залогинились в систему, не смогут просматривать некоторые из них, например, создавать новые объявления или видеть список своих объявлений.
- Создание объявления в firebase
В этом уроке мы с помощью данных, введенных в форме на сайте, будем заносить новую запись в базу данных firebase и хранить уже ее на сервере.
- Загрузка объявлений по умолчанию
В этом уроке мы будет подгружать все объявления, что у нас есть в базе данных, и сразу показывать их пользователю.s
- Загрузка изображений в firebase
Мы реализуем возможность загрузки изображений. Будем обрабатывать входящий файл с помощью Vue и далее показывать его превью, а потом загружать изображение на удаленный сервер firebase storage и привязывать новую картинку к нужному объявлению.
- Создание модального окна редактирования
В этом уроке мы создадим адаптивное модальное окно, с помощью которого сможем редактировать наши объявления.
- Редактирование объявления
В этом уроке мы напишем функционал для редактирования объявления, где будем редактировать его на лету и сразу же в базе данных.
В этом уроке мы создадим адаптивное модальное окно, в котором будем делать заказ через интересующее нас объявление.
- Создание и обработка заказов
В этом уроке мы создадим новую таблицу в базе данных для записи заявок по покупке определенных объявлений.
В этом уроке вы узнаете, как с помощью простой конфигурации приложения полностью изменить его цветовую гамму за несколько кликов.
- Подключение препроцессоров
Вы увидите, как можно подключить препроцессор stylus к проекту и начать использовать его возможности глобально и внутри каждого компонента.
В данном заключительном уроке мы подведем итог того приложения, которое сделали.
3D - моделирование (319)
Бизнес и заработок (416)
Графика и видео (449)
Графический дизайн (93)
Дети и их родители (84)
Духовные практики (20)
Женщина и мужчина (37)
Здоровье и спорт (192)
Инвестиции и финансы (290)
Иностранные языки (28)
Компьютер и программы (103)
Личностный рост (110)
Маркетинг и реклама (143)
Музыка и звука (21)
Программирование (92)
Работа и карьера (19)
Создание сайтов и блогов (296)
Строительство и ремонт (116)
Хобби и увлечения (158)
Разные курсы (1)
