Vue js уроки

Курс по Vue.js

Курс по профессиональной разработке веб-приложений с помощью Vue.js.

Набор на этот курс приостановлен в связи с большим обновлением программы.

Вы можете запросить уведомление.

О курсе

Vue отлично подходит для итерационной разработки или постепенного рефакторинга существующих приложений. С чем вы самостоятельно убедитесь, создавая небольшое приложение на курсе — начнём с самой простой HTML-страницы и закончим небольшим SPA-приложением с серверным рендерингом и тестами.

Внимание! Этот курс сейчас на переработке.

Программа будет сильно обновлена, улучшена, добавлен проект и больше практики в разработке современных Vue-приложений.

Программа ниже устарела и относится к предыдущей версии курса. Новая программа появится здесь при открытии набора.

Как организовано обучение?

На курсе у нас будет семь насыщенных занятий, на которых мы будем изучать Vue, постепенно создавая на нем приложение.

После каждого занятия будет небольшое домашнее задание. Если при его выполнении возникнут проблемы – доступен чат группы, где также присутствует преподаватель.

Сначала мы познакомимся с Vue, узнаем как он работает. Начнем его использовать, посмотрим как удобно подключить его к существующему проекту, какие при этом возникают нюансы. Разберём все основы и подступимся к компонентам и компонентному подходу в реализации приложения.

Затем мы изучим официальную библиотеку роутинга — какие возможности она предоставляет, обсудим каким образом можно реализовать проверку авторизации пользователя. Добавим сборку Vue приложения с помощью Webpack и увидим какие ещё приятные возможности привносит эта связка и использование однофайловых компонентов. Разберёмся как можно использовать другие шаблонизаторы, препроцессоры, и каким образом использовать локальные стили или CSS-модули.

Следующим шагом мы научимся использовать сторонние плагины в приложении, без головной боли и возможных сайд-эффектов. Вы увидите, что часто нет необходимости искать «vue-версии» плагинов, когда можете самостоятельно реализовать компонент-обёртку, а затем переиспользовать в других местах вашего приложения. Обсудим возможные способы валидации данных.

В конце мы познакомимся с официальной библиотекой для реализации единого хранилища состояний Vuex: когда он нужен, какие принципы заложены и как с ними отличается подход к работе приложения. Разберём возможности по реализации Server-side rendering + Vue. Изучим какие есть инструменты и каким образом тестировать компоненты. Задеплоим наше приложение на онлайн-сервис.

Основные темы программы

Блок 1

Vue, основы и использование в существующих приложениях

Знакомимся с Vue, разбираемся как его подключать и начинать использовать в существующих приложениях.

Разбираемся каким образом работает реактивность данных, что за возможности есть у Vue для отслеживания изменений в них. Изучаем как работать с условиями, циклами, стилями, событиями и формами.

Изучаем работу с компонентами: как их создавать, как использовать, как передавать в них данные и отслеживать возникающие события. Рассматриваем динамическое переключение компонентов.

• Vue, принцип работы реактивности.
• Варианты подключения и сборок, Vue-devtools.
• Синтаксис шаблонов, работа с атрибутами.
• Экземпляр Vue, свойства, методы и хуки жизненного цикла.
• Вычисляемые свойства компонента, отслеживание данных.
• Работа с условиями, циклами.
• Работа с классами и стилями.
• Обработка событий.
• Работа с формами.
• Компоненты: как создавать, как использовать, как передавать в них данные и отслеживать возникающие события.
• Динамическое переключение компонентов.

Блок 2

Vue-router, однофайловые компоненты и реализация SPA с шагом сборки Webpack

Изучаем Vue-router — библиотеку для роутинга Vue: как работать с маршрутами, хуки и где они пригодятся.

Начинаем использовать Vue CLI и сборку с помощью Webpack и однофайловых компонентов: как использовать шаблонизаторы, препроцессоры, локальные стили.

Разбираемся как использовать сторонние плагины, как создавать собственные компоненты-обёртки для них.

• Vue CLI, какие возможности предоставляет модульная архитектура новой версии.
• Vue-router, работа с маршрутами, как передавать параметры, хуки маршрутизации.
• Однофайловые компоненты и их возможности.
• Асинхронная загрузка компонентов.
• Использование слотов в компонентах.
• Использование сторонних плагинов и создание компонентов-обёрток для них.
• Как получить доступ к DOM-элементу.

Блок 3

Пути дальнейшего развития приложения

Изучаем каким образом можно реализовать единое хранилище состояния с помощью Vuex.

Рассмотрим какие есть способы реализации серверного рендеринга для Vue и другие продвинутые темы.

• Vuex, когда необходим, как мутировать состояние и как его получать, работа с формами.
• Способы реализации SSR в Vue.
• Тестирование компонентов.
• Деплой.
• Практические рекомендации по написанию хорошего кода на Vue.

Результат обучения

1. Вы будете знать как интегрировать Vue в уже существующие приложения и представлять чёткий путь как итерационно переписывать проект, постепенно избавляясь от старого кода.
2. Вы сможете создавать собственные компоненты для переиспользования в разных частях вашего приложения.
3. Вы будете понимать что не нужно всегда искать «vue-версии» плагинов и сможете самостоятельно реализовывать всё необходимое для использования сторонних плагинов в проекте.
4. Вы сможете с удобством работать с формами и событиями и знать как валидировать данные.
5. Вы будете знать каким образом реализовывать SPA-приложения на Vue.
6. Вы будете представлять как реализовать централизованное хранилище для Vue
7. Вы будете знать какие есть способы по реализации серверного рендеринга с Vue.
8. Вы будете представлять каким образом тестировать компоненты и на что следует обращать внимание.

Предварительные требования

• Знание JavaScript, включая ООП, классы.
• Интернет 256kb/s или быстрее для видео.

Преподаватель

Занимаюсь frontend-разработкой с 2013 года. В 2016, после знакомства с Vue.js успешно использовал его для рефакторинга большого портала, итерационно, без остановки разработки или одновременной поддержки двух систем. Со временем выросло в отдельное самостоятельное SPA-приложение с рендерингом на стороне сервера. Занимался обучением коллег frontend-разработчиков и backend-разработчиков, кому был интересен этот фреймворк.

В конце 2016 присоединился и теперь один из администраторов группы переводов, чьими силами переведена и поддерживается в актуальном состоянии вся русская документация по Vue и смежным проектам (Vue-router, Vuex, Vue-cli, Vue-loader, Vue-test-utils, SSR Guide).

Community partner команды разработчиков Vue.js (по разработке экосистемы Vue).

Гарантия

• Если объяснения будут вам непонятны
• Если курсы не дадут вам новых знаний и умений
• Если вы не сможете подключиться к системе онлайн-обучения

…то вы сможете получить деньги назад.

Для этого достаточно не позже окончания первой недели курса написать, указав причину из этого списка и что именно вас не устраивает, и тогда ваше участие будет прекращено, а вы получите деньги обратно.

Для компаний

У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами (Яндекс, Мейл.ру и другие).

• При записи нужно выбрать способ оплаты «счёт на компанию», и документы будут автоматически сгенерированы: договор, акт и счёт.
• Для зарубежных компаний выдаём инвойс на английском языке.
• Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов.
• Сведения о нас (для бухгалтерии): скачать архив с документами.

• У нас есть лицензия
• Можно сделать налоговый вычет: детали для России

Подписаться на уведомления по курсу

Комментарии

• Если вам кажется, что в статье что-то не так — вместо комментария напишите на GitHub.
• Для одной строки кода используйте тег , для нескольких строк кода — тег

, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)

Фреймворк Vue.js

Курс для практикующих веб- и frontend-разработчиков. Расширьте свои компетенции, изучив трендовый фреймворк Vue.js

Записаться на курс

• Длительность 3 месяца
• 1 марта начало обучения
• Обучение на практике
• Доступ к курсу навсегда

Кому подойдёт этот курс

Практикующие JavaScript-разработчики

Вы освоите работу с фреймворком Vue.js, увеличите круг своих компетенций и задач, которые можете выполнять на проекте — станете более конкурентоспособным сотрудником.

Frontend-разработчики

Vue.js — один из самых популярных фреймворков в мире. Вы научитесь создавать сайты и приложения на Vue, работать с библиотекой Vuex и интегрироваться с API — и станете более востребованным специалистом.

Чему вы научитесь

1. Работать с объектами, массивами, циклами реактивности и компонентами.
2. Использовать Webpack.
3. Использовать Vuex для управления данными.
4. Работать с системой управления версиями Git.
5. Создавать сайты и одностраничные приложения на Vue.js.
6. Интегрировать проект с API, чтобы в динамике получать и отправлять данные на сервер.
7. Делать развертку проекта из NPM.
8. Готовить проект для продакшна и публикации.

Программа

Курс длится 3 месяца и состоит из 9 модулей.

1. Основы Vue

1. Введение. Что такое Vue.
2. Онлайн-сервисы для работы с кодом. Настройки окружения в codepen.io для Vue.
3. Обзор возможностей Vue.
4. Классы и стили. Анимации.

1. Установка проекта через Vue CLI.
2. Структура проекта на Vue.
3. Работа с системами контроля версий: решения на рынке. Удалённые репозитории.
4. Работа с системами контроля версий. Установка и работа с Git.
5. Подготовка среды для работы над проектом.
6. Разбираем проект-пример.

1. Компонент в одном файле.
2. Состояние. Работа с циклами.
3. Выводим список товаров.
4. Основы компонентов. Входные параметры.
5. Делаем компонент для товара.

1. Инструмент разработчика Vue.
2. Вычисляемые свойства, события, методы и наблюдатели.
3. Организуем пагинацию.
4. Модели (V-Model) и наследование компонентов.
5. Организуем фильтрацию.

1. Роутинг. Страница ошибок.
2. Делаем страницу товара.
3. Вывод цены с использованием фильтра.

1. Паттерн управления состоянием Vuex.
2. Слоты.
3. Организуем добавление товаров в корзину.
4. Организуем список товаров в корзине.

1. Обзор REST API (HTTP).
2. Обзор технологии XHR. Инструменты для работы с асинхронностью. Обработка ошибок и исключений.
3. Выводим список товаров и пагинацию из API.
4. Прелоадеры и обработка ошибок.
5. Фильтр из API. Состояние «Товары не найдены».
6. Выводим страницу товара через API.
7. Выводим корзину и добавляем товары из API.

1. Работа с формами.
2. Делаем страницу оформления заказа.

1. Сборка для продакшна.
2. Публикация на GitHub.

Получить презентацию программы и консультацию специалиста

Похоже произошла ошибка. Попробуйте отправить снова или перезагрузите страницу.

КУРС ПО VUE.JS
С НУЛЯ ДО ПРО

Овладей трендовым фреймворком в курсе vue.js — с нуля до про. Полное руководство по современной веб-разработке!

Что вас ждёт в процессе обучения?

Курс нацелен на успешное прохождение интервью и дальнейшее трудоустройство

Более 150 Видео. 0% воды и 100% практических примеров, которые действительно пригодятся в работе.

Чат со всеми участниками курса, служит для обмена знаниями и помогает с решением различных вопросов

Проверка домашних заданий, а так же общие рекомендации и консультации на всех этапах.

7 современных приложений для вашего портфолио и GitHub

Именной сертификат об окончании курса с общими рекомендациями и оценкой

Чему Вы научитесь:

Правильно разделять код и UI на компоненты

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

Разрабатывать полноценные приложения на стеке vue.js

Vue.js является лишь представлением данных. Мы также изучим как хранить данные, а также взаимодействововать с ними по технологии REST API. Как общаться с сервером — принимать и отдавать запросы.

На API строится весь современный веб. Понимание того как работют такие технологии как REST API или GraphQL делают вас намного востребованнее и профессиональнее.

Состоянию приложения с VUEX

Actions, Mutations, State, Getters — все для правильного храненения данных и их дальнейшего взаимодействия.

Роуты и авторизация

Авторизация на клиенте, защита данных, проверка авторизации на сервере. Скрытие роутов для не зарегистрированных пользователей. Разграничение ролей.

Выбирать правильные инструменты и технологии

Помимо стека vue-приложений мы пройдемся по основным библиотекам и технологиям, которые помогут в создании больших приложений.

Оптимизировать Vue.js приложения

Правильный подход к оптимизации изначально может значительно скоратить время в дальнейшем. Научимся понимать, когда нужна оптимизация и как применять ее наиболее корректно.

Почему нужно учить vue?

Vue – мировой лидер фреймворков! Этот фреймворк используется среди компний крупного и среднего бизнеса по всему миру. Самую большую популярность vue.js получил на китайском и европейском рынке. Его используют большинство китайских компаний: Alibaba (мировой лидер торговли в сети), Baidu (IT-гигант, лидер отрасли), Xiaomi, Sina Weibo и другие крупные компании.

Vue.js входит в ядро Laravel, а так же PageKit. Система управления репозиториями GitLab так же перешла на Vue.js.

По статистике Google Trends — Vue является самым популярным фреймворком в мире:

В России и СНГ Vue становится все более и более популярным:

Профи c GitHub так же выбирают Vue:

Vue создан значительно позже аналогичных фреймворков от Google (Angular) и Facebook (React), поэтому логичным образом учел все преимущества и недостатки двух последних. Сегодня профи веб-разработки все чаще предпочитают простой, легкий, мощный и расширяемый Vue другим популярным фреймворкам.

На текущий момент Vue почти в три раза популярнее Angular. И уже обогнал своего ближайшего конкурента – React от Facebook.

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

Изучаем Vue.js в 2018 году

Дата публикации: 2018-11-06

От автора: Vue.js — одна из самых горячих тем в веб-разработке. Vue появился довольно недавно, но уже стал самой популярной JavaScript платформой на Github. Это также фреймворк, который, по заявлению большинства JavaScript-разработчиков, они хотят изучить в 2018 году. Итак, изучаем Vue js. Основной вопрос: как это сделать?

Какие наилучшие ресурсы для этого? Какие источники вы должны прочитать, какие курсы пройти, и многое другое?

Подход к обучению

Прежде чем перейти к рассмотрению ресурсов, давайте кратко поговорим о том, как мы учимся. Если вы действительно хотите изучить Vue.js, я настоятельно рекомендую вам выбрать проект, к которому вы собираетесь его применить.

Не просто экспериментируйте или следуйте руководствам — найдите что-то реальное, что вы хотите выполнить, и постарайтесь сделать это с помощью Vue.

Это заставит вас решать проблемы и исследовать вопросы за пределами узких границ того, что думают авторы руководств и преподаватели курсов.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Это также поможет вам определить актуальность некоторых тем. Много продвинутых концепций Vue (таких как многокорневые компоненты) не имели для меня смысла, пока я не столкнулся в проекте с проблемой, для решения которой они были нужны.

Начинаем

Самое очевидное место для начала работы с Vue — это официальное руководство. На самом деле, если вы прогуглите «learn vue», то это одна из первых вещей, которые вы найдете.

Однако, когда я начинаю изучать новую технологию, такую как Vue, я обычно начинаю с бесплатного или недорогого видеокурса с обзором. Это также подходит, как и официальное руководство, но для меня почему-то курсы легче понимать.

Хорошие курсы для начинающих

К счастью, для начинающих есть множество отличных курсов.

Vue JS 2 — The Complete Guide (incl. Vue Router & Vuex). Это курс, с которого я начинал — это платный курс, но часто со скидками его стоимость составляет всего 10 долларов. Я очень его рекомендую.

Learn Vue 2 Step By Step (Laracasts). Еще один отличный вводный курс. Я не думаю, что он так же хорошо, как указанный выше, но, с другой стороны, он бесплатный.

Intro to Vue.JS (VueMastery). Это более короткий курс, чем два предыдущих, и я думаю, что видео не столь же хорошо, но VueMastery делает все, чтобы дать вам больше, чем просто видео. Вы также получаете текстовые руководства, можете загрузить любой из используемых ресурсов и использовать любой из примеров на основе CodePen. О, и это бесплатно!

The Ultimate Vue JS 2 Developers Course. Возможно, «ultimate» — это небольшое преувеличение, но это отличный курс, чтобы «учиться на практике», в нем рассматриваются три проекта, чтобы изучить концепции Vue. Если у вас возникнут проблемы с созданием собственного проекта, это может вам помочь, поскольку вы можете следить за проектами преподавателя.

Это мой проект, в котором я только что начал уделять внимание более реальным возможностям обучения. Возможности задавать вопросы и получать ответы от инструкторов не хватало большинству вариантов изучения Vue, поэтому я запустил его. Первый релиз — бесплатные вебинары по основным принципам работы Vue.js, в ближайшее время будут другие обновления.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Продвинутые курсы

Также доступны более продвинутые видеокурсы. Несколько хороших вариантов:

Advanced Components (VueMastery). Углубленное изучение того, как работает Vue, в комплекте с несколькими уроками Эвана Ю, создателя Vue. Как только вы почувствуете себя более уверенно и захотите идти дальше, это то, куда я рекомендую вам отправиться.

The VueJS Master Class (VueSchool.io). Курс, ориентированный на проект, в котором с нуля создается полное приложение и в процессе освещаются все практически аспекты Vue.js. Преподает Алекс Кириакидис, член основной команды Vue и автор книги «Величие Vue.js»

Последующее обучение

По мере того как вы выходите за рамки «как вообще это работает», вы хотите расширить спектр ресурсов, которые используете для обучения. Существует ряд ресурсов, на которых вы можете получить более продвинутые статьи, учебные пособия и инструменты.

Vue News, подкаст и еженедельная рассылка, в которых освещены последние новости. Официальный источник новостей, получивший одобрение основной команды Vue.

Vuejsdevelopers.com, блог и еженедельные рассылки, посвященные продвинутым темам.

Vue Feed, веб-сайт, информационные рассылки и твиттер, с руководствами, плагинами и многим другим.

CSS Tricks, возможно, начинали с CSS, но сейчас вы можете найти у них внушительное количество качественных статей по Vue.

Views on Vue — это еженедельный подкаст в сети devchat.tv, ориентированный на Vue, с участием нескольких членов основной команды.

Vue Land Discord — это чат, ориентированный на Vue, в котором вы можете задавать вопросы, устанавливать связи и учиться.

Заключение

Как вы можете видеть, доступно много ресурсов для изучения Vue.js. Вопрос только в том, какой стиль обучения подойдет для вас, и сколько времени и сил вы потратите на изучение?

Если вы отлично учитесь самостоятельно, начните с официального руководства.

Если вам нравятся видеокурсы, доступно множество вариантов, просмотрите курсы для начинающих и выберите, какой из них вам больше нравится.

Или, если вам нравится более интерактивное обучение и возможность задавать вопросы специалисту, ознакомьтесь с LearnVueJS.com.

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!