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

[jacoblumpen]

Автор: Владилен Минин
Название: Фреймворк VUE от теории до собственной CMS интернет-магазина

Для кого этот курс:
1. Начинающие Frontend-разработчики: Вы нуждаетесь в пошаговом фундаментальном обучении с полного нуля и поддержке опытного наставника. Хотите сразу изучить и начать использовать современные технологии
2. Действующие Frontend-разработчики: Для вас важно быть в тренде и пользоваться только актуальными и востребованными технологиями веб-разработки для достижения максимальных заработков
3. Фрилансеры-практики: Вы очень ограничены во времени и остро нуждаетесь в быстром овладении новой перспективной технологией для того, чтобы брать более дорогие заказы

Если вы относитесь к одной из этих трех групп, овладение фреймворком Vue.js является для вас, пожалуй, самым быстрым, простым и легким способ подняться по карьерной лестнице профессионального веб-разработчика и существенно повысить ваши заработки.​

Программа курса:

Спойлер: Блок 1. Знакомство с Vue

Длительность: 0:16:42
Данный блок является вводным. Из него вы узнаете, что такое технология Vue.js, где она применяется, чем лучше или хуже других технологий, и почему стоит учить именно Vue. В рамках блока мы напишем совсем небольшое приложение, в котором вы увидите динамику, которую можно создавать, используя Vue.

• Что такое Vue.js
• Создание простого Vue-приложения

Спойлер: Блок 2. Основы Vue

Длительность: 2:37:48
Данный блок посвящен всем важным вводным темам, которые есть во фреймворке. Мы разберем самые основные принципы Vue на практических примерах, и подробным образом разберем синтаксис и принципы работы фреймворка.

• Интерполяция
• Динамические атрибуты
• Вывод HTML-кода
• Добавление событий
• Передача параметров в метод
• Модификаторы событий
• Модификаторы событий клавиатуры
• Ярлыки для директив
• Модель для работы с формами
• Работа с CSS-классами
• Динамические стили
• Управление отображением элементов
• Директива v-show vs v-if
• Работа со списками
• Оптимизация приложения с computed
• Отслеживание изменений с watch
• Связывание разных приложений. Инстанс Vue
• Доступ к DOM-элементам
• Свойство template
• Жизненный цикл

Спойлер: Блок 3. Vue CLI&Webpack

Длительность: 0:44:55
В данном блоке мы разберем что такое за инструмент Vue CLI. Мы установим его на компьютер и с помощью него сгенерируем новый проект на Vue на основе сборщика webpack.У нас сразу будет доступно к работе приложение с быстрой перезагрузкой страницы в браузере, технологией Hot Module Replacement и препроцессорами. Так мы разберем файлы с расширением Vue, которые были сделаны специально для данного фреймворка.

• Зачем нужен CLI
• Установка CLI и создание проекта
• Обзор структуры проекта
• Как запускается приложение

Спойлер: Блок 4. Компоненты

Длительность: 1:39:47
В данном блоке мы очень подробно разберем понятие компонентов в библиотеке Vue. Мы разберем зачем нужны компоненты, как их регистрировать локально и глобально. Причем мы разберем как это делается в HTML-файле и уже в целом проекте, который использует файлы с расширением .vue. Далее вы узнаете обо всех особенностях взаимодействия между компонентами, а также о том, как во Vue создаются локальные стили, и многое другое.

• Зачем нужны компоненты
• Метод data
• Локальная и глобальная регистрация
• Названия компонентов
• Регистрация компонентов в .vue
• Передача параметров компоненту
• Валидация входящих параметров
• Передача параметров от дочернего компонента
• Передача функции как параметр
• Связь дочерних компонентов
• Использование event emitter
• Изолированные стили
• Передача HTML компоненту

Спойлер: Блок 5. Директивы

Длительность: 0:59:10
В данном блоке мы подробно разберем что такое директивы во Vue. Мы научимся создавать свои собственные директивы, узнаем все функции, которыми можно воспользоваться при разработке собственных директив и разберемся, как и когда их нужно использовать. После прохождения блока вы намного лучше поймете, как работают стандартные директивы и разберетесь в основном функционале библиотеки.

• Создание своей директивы
• Взаимодействие с элементом
• Жизненный цикл директивы
• Параметры в директивах
• Аргументы в директивах
• Модификаторы
• Локальная регистрация

Спойлер: Блок 6. Фильтры и Миксины

Длительность: 0:31:46
В данном блоке мы изучим фильтры и миксины. Мы научимся преобразовывать данные внутри шаблона любым образом, каким мы пожелаем. Далее, вы научитесь правильно фильтровать в реальном времени списки и узнаете, какую технологию для этого нужно применять. После мы познакомимся с таким понятием как миксины и научимся использовать код в разных компонентах.

• Создание простых фильтров
• Фильтрация списков
• Использование миксинов

Спойлер: Блок 7. Работа с формами

Длительность: 1:00:26
Вы научитесь работать с формами и создавать свои собственные элементы формы. Мы поэтапно подробно разберем каждый из элементов форм, которые есть в HTML и научимся обрабатывать каждый из них. После мы создадим свой собственный компонент, который будет являться частью формы, но мы запрограммируем его самостоятельно.

• Текстовый инпут
• Текстарея
• Чекбоксы
• Радио кнопки
• Селекты
• Числовой модификатор
• Создание своего контрола

Спойлер: Блок 8. Валидация форм с Vuelidate

Длительность: 0:51:22
Данный блок посвящен сторонней библиотеки Vuelidate. Мы научимся использовать и регистрировать сторонние плагины во Vue, тем самым расширяя функционал фреймворка. Далее мы научимся создавать динамические и красивые валидации для любых элементов формы, практически с любыми условиями и выводить сообщения об ошибках, в зависимости от условия. Научимся создавать свои собственные валидаторы, которые асинхронно или синхронно смогут проверять те значения, которые мы запрограммируем.

• Установка и настройка проекта
• Настройка валидаторов
• Визуальное отображение ошибок
• Валидация пароля
• Создание своего валидатора
• Отправка формы

Спойлер: Блок 9. Роутинг с Vue-router

Длительность: 1:35:35
Вы узнаете про дополнительный плагин, который расширит функционал Vue возможностью создавать множество страниц и делать навигацию между ними без перезагрузки страницы. Мы познакомимся с основными возможностями данный библиотеки, где наглядно разберем весь ее функционал на практических примерах. Научимся оптимизировать наше приложение таким образом, чтобы страницы загружали свой код только в случае запроса, тем самым сильно увеличив скорость загрузки приложения.

• Установка Vue-router
• Настройка роутера
• Создание навигации
• Обозначение активной ссылки
• Динамические роуты
• Программная навигация
• Вложенные роуты
• Передача параметров
• Хэш и скролл
• Редирект
• Защита роутов
• Ленивая загрузка

Спойлер: Блок 10. Работа с сервером с Vue-resource

Длительность: 0:49:48
В этом блоке мы разберем еще один дополнительный плагин, который упрощает работу с AJAX запросами.Изучим основной функционал данного плагина, научимся создавать новые записи в базе данных, загружать данные из базы, и многое другое. Вы узнаете, как работать с ресурсами и интерсепторами.

• Настройка приложения
• Создание объектов POST
• Получение объектов GET
• Использование resource
• Глобальная настройка
• Интерсепторы

Спойлер: Блок 11. Работа с данными с Vuex

Длительность: 0:44:33
В данном блоке вы познакомитесь с плагином, который позволяет очень гибко и удобно управлять данными, работая с Vue. Вы узнаете концепцию Vuex, как его регистрировать, как взаимодействовать с данными внутри него: забирать, получать, изменять, и многое другое.

• Установка Vuex
• Использование state
• Использование getters
• Использование mutations
• Использование actions
• Оптимизация с помощью модулей

Спойлер: Блок 12. Создание SPA приложения на material design и firebase

Длительность: 6:02:45
Данный модуль посвящен практической части курса, где мы все знания, полученные в теории, будем применять на практике. Мы создадим SPA приложение, которое является Serverless – приложением, которое работает без серверной части. При этом у нас будет полностью рабочая база данных в облаке, на сервисе Firebase от Google. У нас там будет реализован хостинг, база данных, хранение картинок и регистрация с авторизацией пользователей.

В качестве дизайна нами будет выбран Material Design от Google. Наше приложение будет полностью адаптивным, то есть оно будет одинаково хорошо отображаться на любом экране. По смыслу это будет приложение, в котором будет возможность просматривать и создавать объявления о продаже чего-либо и прием заявок. Будет реализован личный кабинет, возможность загружать картинки, редактировать объявления и просматривать заявки.

• Создание проекта
• Обзор приложения
• Создание тулбара
• Добавление ссылок и адаптация
• Регистрация роутов
• Создание страницы логина
• Создание страницы регистрации
• Создание главной страницы
• Создание страницы заказов
• Создание страницы формы
• Создание страницы списка
• Создание страницы объявления
• Подключение Vuex
• Добавление объявлений
• Настройка firebase
• Регистрация пользователей
• Логин пользователей
• Вывод ошибок
• Поддержание сессии пользователя
• Защита роутов
• Создание объявления в firebase
• Загрузка объявлений по умолчанию
• Загрузка изображений в firebase
• Создание модального окна редактирования
• Редактирование объявления
• Создание окна покупки
• Создание и обработка заказов
• Управление цветами
• Подключение препроцессоров
• Заключение

Подробнее:

Скачать:

 

[Deezy]

кайфовый гайд, но не для новичков, им посоветовал бы найти что-то попроще

 

[Maximus_rus]

Здравствуйте, проверил, все ОК.
Может с vpn попробуйте..

Спасибо за ответ.) Да помог vpn.)

 

[folkine]

Спасибо за ответ.) Да помог vpn.)

Смотрел курс?как тебе?