Привет всем в первой статье посвященной javascript. Знаю, что не всем он по душе(как и пхп), но да ладно(учитывая, что это единственный прод. язык фронтэнда). Я не буду разглагольствовать о том как он работает или его синтаксисе, начну сразу с фреймворка.
Vue что это и почему он?
Сперва, я познакомился с чистым js(разумеется), потом с jQuery и React, и в конце с Vue(ну как “в конце” – на данный момент). jQuery это первая попытка использования языка в ООП виде(в js вообще своеобразный ООП), эта библиотека долгое время была ультимативной на рынке. Потом начали появлятся полноценные фронтэнд фреймворки. React это первый с коим я познакомился(тк он использовался в WP), но именно Vue есть вершиной(на сейчас), имхо. Я не хочу обидеть React, однако , именно Vue содержит то, о чем говорит “реакт” – реактивность. Немного подробнее: первый при получении изменений перерисовывает ввесь компонент, второй – именно изменившуюся часть компонента.
И, главная, как по мне особенность, шаблонизатор этих фреймворков – JSX для React и HTML Vue. Дело в иом, что я часто верстаю компоненты, а потом переношу в фреймворк, при этом JSX требует замены гипертекстовых атрибутов на специальные(да, некоторые редакторы умеют делать это автоматом). Также, в JSX мне не удалось добиться работы эммета и аводополнения доступными классами; но шаблонизатор вью это делает без проблем.
Настройка среды разработки
Хвати мерять фреймворки достоинствами(ибо я не знаю, кто из них обьективно круче), подойдем к разработке; нет, писать код в этой статье я не буду – расскажу о подготовке к началу разработки.
Первое, что нужно сделать, так это(как и с любым другим js-фреймворком) установить NodeJS. Затем специальное расширение для браузера Vue Devtools, которое в панель разраба браузера добавит вкладку Vue
Она будет отображена только если расширение найдет вью в режиме разработке. Вкладка содержит информацию об отрисованных, в данный момент, компонентах, состоянии всех переменных, времени рендеринга…
Примечание
Я работал не в большом количестве редакторов кода, поэтому не сочтите это за объективное мнение.Из всего, где я писал код, наиболее удобным(экспорт модулей, умное автодополнение, работа с отступами …), качественно проработанным показался PhpStorm(полагаю, как и другие их продукты для фулл-стек разработки). Это бесплатная реклама продукта jetbrain-ов, но их среды этого достойны,имхо.