Русскоязычный видеокурс «Vue.js для начинающих»

Vue.js — это open source веб-фреймворк для создания пользовательских интерфейсов на JavaScript. С его помощью можно создавать динамические сайты и сложные одностраничные веб-приложения. Ядро фреймворка ориентировано на решение задач уровня представления, благодаря чему фреймворк несложно интегрировать в проекты совместно с дополнительными библиотеками и различными инструментами. В подтверждение растущей популярности фреймворка говорит и то, что, согласно данным сайта State of JavaScript, в 2018 году о Vue.js не знали всего 1,3 % опрошенных против 27 % двумя годами ранее, а степень удовлетворённости JS-разработчиков фреймворком составляет 91 %.

В отличие от React.js, jQuery, AngularJS и других фреймворков, Vue.js достаточно прост для изучения. Но, как и с другими JS-фреймворками, потребуются знания основ CSS, HTML и JavaScript, поэтому советуем сначала изучить их. В данной подборке мы расскажем о серии видеоуроков по Vue.js, которые помогут разобраться с основными элементами фреймворка.

Содержание

1. Что такое Vue.js?
   В первом уроке рассказывается о самом фреймворке, его установке и объявлении элемента в HTML-файле. Также вы узнаете об идентификаторе элемента и выводе информации из него на страницу.
2. События, атрибуты и методы
   Вы познакомитесь с событиями, позволяющими задействовать фреймворк при возникновении события, например клика, наведения курсора или начала ввода, и научитесь их объявлять. Также вы узнаете о методах и HTML-атрибутах. В результате с их помощью будет реализовано небольшое веб-приложение, меняющее цвет блока в зависимости от введённого в поле текста.
3. Вычисляемые свойства
   В этом уроке вводится понятие вычисляемых свойств, выделяющихся в коде элемента ключевым словом computed. Они очень полезны, когда усложняется логика работы с данными, и встраиваемые в шаблоны выражения уже не помогут. Кстати, автор видео ошибся, назвав вычисляемые свойства обработанными, так что будьте внимательны. Также он не объяснил разницу между методами и свойствами: вычисляемые свойства кэшируются, основываясь на своих зависимостях, а методы запускаются заново при каждом обращении к ним. Подробнее об этом можно почитать в документации.
4. Условия, списки и циклы
   Сначала вы познакомитесь с созданием условия с помощью атрибутов v-if и v-else, а также с логической операцией НЕ — !. Затем в видео объясняется, как создавать списки и перебирать их элементы в цикле с помощью атрибута v-for. В результате будет создана небольшая программа, выводящая нумерованный список марок автомобилей и их скорость.
5. Работа с фильтрами (filters)
   Фильтры — это инструменты, позволяющие преобразовать текст. В видеоуроке рассказывается о нескольких способах создания фильтров: как вычисляемое свойство, с помощью ключевого слова filters и глобальный фильтр через Vue.filter.  С их помощью автор приведёт все буквы текста к одному регистру, а затем каждое слово будет начинаться с прописной буквы.
6. Создание компонентов
   С помощью компонентов можно вынести определённую часть кода в отдельный блок, например вывод на экран списка. Из видео вы узнаете, как создать глобальный компонент через Vue.component, как перенести в него шаблон из HTML-файла, а также как в классе Vue создать локальный компонент с помощью ключевого слова components.
7. Vue CLI и файлы .vue
   Vue CLI представляет собой инструмент для полноценной разработки проектов на Vue.js. С его помощью можно автоматически выстроить структуру проекта, его конфигурацию и создать несколько базовых файлов. В видеоуроке Vue CLI используется совместно с шаблоном webpack-simple. Вы узнаете, как установить Vue CLI, Webpack, а также Node.js для корректной работы, изучите структуру сформированного проекта и ознакомитесь с файлами формата .vue, объединяющими код шаблонов, скриптов и стилей в единственный экземпляр.
8. Компоненты и файлы .vue
   В этом уроке рассматривается использование компонентов как файлов .vue. Благодаря этому повышается удобство чтения кода и становится более понятной логика веб-приложения. Также вы узнаете, как показывать компоненты в других объектах. Кстати, если будете работать с файлами .vue, то подсветка синтаксиса в этих файлах в редакторах по умолчанию может не работать. Однако её можно добавить с помощью специальных плагинов: для Atom и Sublime Text.
9. Связь компонентов
   В уроке рассказывается о связях между различными компонентами из файлов .vue и передаче данных из основного компонента в дочерние через входные параметры, и наоборот. Однако тема достаточно трудоёмкая, и далеко не всё ясно с первого раза, поэтому советуем почитать по этой теме в документации.

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

Смотрите также:
Подборка инструментов для быстрой разработки приложений на Vue.js
Создание простого веб-приложения с Vue и Firebase