Что такое vue js и зачем он нужен
Что такое VueJS — Обзор
Дата публикации: 2018-02-26
От автора: что такое VueJS? Это прогрессивный JavaScript фреймворк с открытым исходным кодом, предназначенный для разработки пользовательского интерфейса. Он является одним из самых популярных фреймворков для упрощения веб-разработки. VueJS работает в основном с уровнем представления. Его с лёгкостью можно интегрировать в большие проекты для фронт-енд разработки.
Устанавливается VueJS очень просто. Для разработчика разобраться в нем и начать создавать пользовательские веб-интерфейсы – это всего лишь вопрос небольшого времени. Создателем VueJS является Эван Ю (Evan You), бывший сотрудник Google. Релиз первой версии VueJS состоялся в феврале 2014. Недавно количество его звёзд на GitHub достигло 64828, что говорит о чрезвычайной популярности VueJS.
Функции
Ниже представлены функции VueJS.
Virtual DOM
VueJS использует Virtual DOM, как и такие известные фреймворки, как React, Ember и т.д. Изменения не вносятся в DOM, а создаётся копия DOM, выступающая в форме JavaScript структуры данных. Если нужно внести изменения, то они вносятся в JavaScript структуры данных, и последние сравниваются с исходной структурой данных. Потом окончательные изменения вносятся в реальный DOM, и их пользователь уже сможет наблюдать. Такой подход хорош в плане оптимизации, он не требует задействования большого количества ресурсов и изменения будут происходить гораздо быстрее.
Привязка данных
Функция привязки данных помогает управлять значениями или присваивать их HTML-атрибутам, изменять стили, присваивать классы с помощью привязывающей директивы VueJS v-bind.
Фреймворк VUE JS: быстрый старт
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Компоненты
Компоненты – это очень важная функция VueJS, помогающая создать пользовательскме элементы, которые можно повторно использовать в HTML.
Управление событиями
v-on – это атрибут, который добавляется к элементам DOM, чтобы прослушивать события в VueJS.
Анимация/Переходы
VueJS обеспечивает множество способов применять переходы к HTML-элементам, когда их добавляют /обновляют или убирают из DOM. VueJS имеет встроенный компонент переходов, который нужно обернуть вокруг элемента для создания эффекта перехода. Можно также легко добавить сторонние библиотеки анимации.
Вычисляемые свойства
Это следующая важная функция VueJS. Она помогает прослушивать изменения, внесённые в элементы UI, и выполняет необходимые вычисления. Для этого нам не нужно писать дополнительный код.
Шаблоны
VueJS представляет шаблоны, основанные на HTML, которые связывают DOM с данными экземпляра Vue. Vue компилирует шаблоны в функции Render виртуального DOM. Вы можете использовать шаблон функций Render, для этого нужно заменить шаблон render-функцией.
Директивы
VueJS имеет такие встроенные директивы как v-if, v-else, v-show, v-on, v-bind и v-model, которые используются для выполнения различных действий во фронт-енд.
Наблюдатели
Наблюдатели применяются к изменяемым данным. Например, для вводимых элементов. В данном случае нам не нужно добавлять дополнительные события. Наблюдатель следит за изменениями данных, этим самым делая код проще и быстрее.
Маршрутизация
Навигация между страницами выполняется с помощью vue-router.
Компактность
VueJS скрипт очень компактный, что обеспечивает высокую производительность.
Vue-CLI
VueJS может быть установлен из командной строки с помощью интерфейса командной строки vue-cli. Он помогает быстро создавать и компилировать проект с помощью vue-cli.
Сравнение с другими фреймворками
Давайте теперь сравним VueJS с такими фрейморками как React, Angular, Ember, Knockout и Polymer.
VueJS и React
Virtual DOM
Virtual DOM – это виртуальное представление дерева DOM. Благодаря виртуальному DOM создаётся тот же самый объект JavaScript, что и в настоящем DOM. Каждый раз, когда нам нужно внести изменения в DOM, создаётся новый JavaScript объект и выполняются изменения. Позже оба JavaScript объекта сравниваются и финальные изменения вносятся в реальный DOM.
И VueJS, и React используют виртуальный DOM, что ускоряет их работу.
Шаблон и JSX
VueJS использует html, js и css по отдельности. Начинающему разработчику не составит труда разобраться и освоить стиль VueJS. Подход VueJS, основанный на шаблонах – это очень просто. React использует jsx-подход. Для ReactJS абсолютно всё – это JavaScript. HTML и CSS являются частью JavaScript.
Программы установки
React использует create react app, а VueJS – vue-cli /CDN/npm. Оба фреймворка просты в использовании, а проект отвечает всем базовым требованиям. В отличие от VueJS, React для создания нуждается в webpack. В случае VueJS мы можем начать кодировать в jsfiddle или codepen, используя библиотеку cdn.
Фреймворк VUE JS: быстрый старт, первые результаты
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Популярность
React более популярен, чем VueJS. Освоив React, вы будете иметь больше возможностей трудоустройства, чем в случае с VueJS. Причина большей популярности React заключается в имени, стоящем за ним — то есть Facebook. Так как React использует основные понятия JavaScript, он применяет также его наилучшие практики. Разработчик, работающий с React точно будет хорошо разбираться в JavaScript.
VueJS – это развивающийся фреймворк. На данный момент возможность трудоустройства со знанием VueJS ниже, чем с React. Согласно данным опросов, много людей уже постепенно адаптируются к VueJS, то есть в будущем он действительно может стать более широко используемым, чем React и Angular. Над различными функциями VueJS работают члены очень активного сообщества. Это сообщество поддерживает vue-router и регулярно выпускает обновления к нему.
VueJS перенял различные преимущества Angular и React и построил эффективную библиотеку. VueJS намного быстрее по сравнению с React/Angular благодаря его легкой библиотеке.
VueJS и Angular
Схожие черты
VueJS во многом схож с Angular. Такие директивы как v-if, v-for почти идентичны ngIf, ngFor в Angular. Они оба имеют интерфейс командной строки для установки и создания проекта. VueJS использует Vue-cli, а Angular – angular-cli. Оба предлагают двухстороннюю привязку данных, рендеринг на стороне сервера и т.д.
Сложности в работе
Начать работу с Vuejs очень просто. Как было сказано раннее, начинающий разработчик может взять CDN библиотеку в VueJS и начать работать в codepen и jsfiddle.
Что касается Angular, то нам придётся пройти несколько этапов установки; начать работу с Angular новичкам будет немного сложнее. Для написания кода он использует TypeScript, что сложно для людей, которые имеют только опыт работы с JavaScript. А вот пользователям с опытом работы с Java и C# будет однозначно проще.
Производительность
Именно пользователи принимают решения по поводу производительности. Размер файла VueJS гораздо легче, чем размер файла Angular. Со сравнением производительности фреймворков можно ознакомиться по следующей ссылке //stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
Популярность
На сегодняшний день Angular более популярен, чем VueJS. Многие организации используют Angular, и возможностей трудоустройства с Angular гораздо больше. Однако, VueJS продолжает занимать стойкую позицию на рынке и может считаться хорошим конкурентом Angular и React.
Зависимости
Angular предоставляет много встроенных функций. Чтобы начать, нам нужно импортировать необходимые модули, например, @angular/animations, @angular/form. VueJS не имеет всех встроенных функций Angular и для работы с ним понадобятся сторонние библиотеки.
Гибкость
VueJS можно спокойно объединять с любым другим большим проектом. В отличие от Angular, который не так просто интегрировать с другим существующим проектом.
Совместимость с предыдущими версиями
Раньше были выпущены AngularJS, Angular2, а теперь мы имеем Angular4. AngularJS и Angular2 очень сильно отличаются друг от друга. Приложение проекта, разработанное в AngularJS не может быть конвертировано в Angular2 из-за базовых отличий.
Крайняя версия VueJS – это 2.0, она совместима с предыдущей версией. Также предоставляется доступная для понимания документация.
Typescript
Angular использует TypeScript для написания кода. Для начала работы с Angular пользователи должны хорошо знать Typescript. Между тем, с VueJS мы можем прописывать код в jsfiddle или codepen, используя библиотеку cdn. Здесь мы можем работать со стандартным JavaScript, что обеспечивает нам неплохой старт.
VueJS и Ember
Схожие черты
Ember предоставляет инструмент командной строки Ember, то есть ember-cli, для простой установки и компиляции проектов Ember. VueJS также имеет инструмент командной строки vue-cli для запуска и создания проектов. Оба они содержат такие функции как роутер, шаблон и компоненты, которые делают их очень эффективными UI фреймворками.
Производительность
По сравнению с Ember, VueJS может похвастаться лучшей производительностью. Ember добавил механизм визуализации мерцания с целью улучшить производительность повторной визуализации, что напоминает virtual DOM, используемый VueJS и React. Однако, VueJS имеет лучшую производительность, чем Ember.
VueJS и Knockout
Knockout имеет хорошую поддержку браузерами. Он поддерживается минимальной версией IE, в то время как VueJS не поддерживается в IE8 и ниже. Поддержка Knockout в последнее время немного сбавила темпы, поэтому с недавних пор он уже не так популярен. VueJS, в свою очередь, набрал популярность благодаря команде Vue, которая регулярно выпускает обновления.
VueJS и Polymer
Библиотека Polymer была разработана в Google. Она используется во многих проектах Google, например, Google I/O, Google Earth, Google Play Music и других. Как и VueJS, она представляет привязку данных и вычисляемые свойства.
Определение пользовательского элемента в Polymer включает в себя простой JavaScript/CSS, свойства элемента, жизненные циклы и методы JavaScript. А VueJS позволяет легко и просто использовать JavaScript/html и CSS.
Polymer использует функции веб-компонентов и для него требуются полифиллы для обеспечения поддержки браузерами этих функций. VueJS не имеет таких зависимостей и прекрасно работает со всеми браузерами от IE9 и выше.
Редакция: Команда webformyself.
Фреймворк VUE JS: быстрый старт, первые результаты
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Всё, что нужно для начала работы с Vue.js
Скорее всего, вы, читая эти строки, уже слышали о JavaScript-фреймворке, который называется Vue. Если вы собирались его опробовать, но не очень хорошо представляли себе то, с чего вам стоит начать, значит — этот материал написан специально для вас. Его автор говорит, что хочет рассказать о том, почему ему очень нравится Vue. Кроме того, он собирается представить всем желающим 4 способа написания первого приложения на Vue.
В конце этого материала, вы найдете ссылки на целый курс по Vue.js.
Обзор материала
Обычно я стараюсь не рассказывать о слишком многих способах решения одних и тех же задач тем, кто только начинает осваивать некий фреймворк. Но в данном случае я полагаю, что показать несколько способов разработки первого приложения на Vue — это очень важно. Возможно, вам нравится работать с командной строкой, а возможно — с инструментами, оснащёнными графическим интерфейсом. Для Vue-разработки подходит и то и другое. Кроме того, Vue-приложения можно писать и не прибегая к командной строке. Для этого достаточно добавить на HTML-страницу тег для загрузки соответствующего скрипта. И, наконец, возможно, вам не хочется заботиться о настройке окружения разработки. Вместо этого вы стремитесь к тому, чтобы как можно скорее, без лишних движений, попробовать Vue. На самом деле, какой бы стратегии вы ни придерживались бы, здесь вы найдёте то, что поможет вам приступить к освоению Vue.
В процессе чтения этого материала вы будете встречать ссылки на полезные ресурсы. А когда вы прочтёте всю эту статью — я расскажу вам о том, на что вам стоит обратить внимание для дальнейшего изучения Vue. Надо отметить, что здесь мы не будем погружаться в тонкости Vue, не будем рассматривать все возможные механизмы этого фреймворка. Мы собираемся разобраться с основами и выйти на первое работающее приложение.
Для начала поговорим о некоторых интересных особенностях Vue.
Сильные стороны Vue
Сила Vue, на мой взгляд, заключается в том, насколько дружелюбно этот фреймворк относится к новичкам. Команда разработчиков Vue проделала замечательную работу, стремясь к тому, чтобы разработчики различной квалификации могли бы быстро приступить к продуктивной работе с фреймворком. Если вы знаете HTML, CSS и JavaScript — это означает, что вы буквально в шаге от того, чтобы разрабатывать довольно мощные приложения на Vue.
Я так же полагаю, что Vue, среди трёх ведущих инструментов для фронтенд-разработки (это — Angular, React и Vue), обладает самыми низкими входными барьерами. Это так по нескольким причинам, но для меня всё сводится к трём основным особенностям Vue:
▍Документация
Если поговорить с разработчиками, которым нравится Vue, то я думаю, что многие из них в первую очередь скажут о качестве документации этого фреймворка. Если посетить сайт Vue.js, то можно обнаружить, что документация разбита на несколько разделов:
▍Сообщество
Я, работая программистом, чувствую себя причастным к нескольким замечательным сообществам. Одно из них — это сообщество Vue. Его члены доброжелательны, дружелюбны, они более чем готовы оказать помощь тому, кто в ней нуждается. Рекомендую подписаться на Twitter-аккаунты следующих членов сообщества Vue. Так вам легче всего будет понять то, чем они занимаются, и узнать о том, чем они живут. Вот ссылки:
▍Vue — это прогрессивный фреймворк
Если посетить домашнюю страницу сайта Vue.js, то можно увидеть, что там его называют так: «Прогрессивный JavaScript-фреймворк». На первый взгляд это может показаться обычным маркетинговым ходом, но, немного вникнув в суть Vue, можно понять, что это не так. Для начала давайте определимся со значением слова «прогрессивное». Это — нечто, происходящее или развивающееся постепенно или поэтапно; это что-то такое, что выполняется пошагово.
Совсем скоро вы увидите, что при разработке Vue-приложений можно работать, поэтапно внедряя в них возможности этого фреймворка. Например, если у вас уже есть некий проект, то вы без проблем можете оснастить его поддержкой Vue. Начать можно с загрузки скрипта Vue и с написания нескольких строк кода.
Если вы хотите воспользоваться Vue CLI, средством командной строки Vue, для того, чтобы развернуть новый проект, обладающий необходимыми вам возможностями, то это — тоже не проблема. По мере того, как ваше приложение будет расти, и вам понадобятся достаточно продвинутые возможности вроде маршрутизации или управления состоянием, приложение несложно будет этими возможностями оснастить.
Как уже было сказано, Vue — это доступный фреймворк. Если вы уже знаете HTML, CSS и JavaScript, это значит, что вы готовы к тому, чтобы начать работу с Vue. Собственно говоря, если вы и правда стремитесь приступить к написанию Vue-приложений, тогда предлагаю этим и заняться.
Вариант №1: скрипт Vue, подключённый к странице
Обратите внимание на комментарий. Он указывает на одну важную вещь. А именно, сейчас мы подключили к странице версию Vue, предназначенную для разработки. Если некая страница предназначена для реального использования, то к ней нужно подключать продакшн-версию скрипта. Подробности об этом можно почитать здесь.
Теперь, после подключения скрипта, нам, в первую очередь, нужно добавить на страницу корневой элемент, к которому будет подключён экземпляр Vue:
После этого создадим новый экземпляр Vue и сообщим ему о том, к какому корневому элементу ему нужно подключиться:
Теперь создадим пару переменных. Они будут хранить значения, которые мы используем для вывода информации на страницу. Делается это путём объявления свойств объекта data :
Сейчас, когда данные готовы, мы готовы прибегнуть к возможностям Vue по выводу их на страницу. Делается это с использованием простых, удобных для восприятия конструкций:
Сейчас вы можете поздравить себя с тем, что вы только что создали своё первое Vue.js-приложение. Если открыть index.html в браузере, то в нём должна вывестись страница, на которой крупными буквами написано «Hello, Vue!». Ниже этой надписи должна находиться строка, выводящая текущие дату и время. В ходе разработки и исследования моего варианта примера я пользовался Visual Studio Code и расширением Live Server.
Если открыть эту страницу в браузере, то её внешний вид не изменится, но выводимое на ней время будет каждую секунду обновляться. При этом нам нет нужды в том, чтобы обновлять DOM вручную. Vue связал данные с DOM. При изменении данных меняется и то, что показано на странице.
Вариант №2: Vue CLI
Хотя мы и создали приложение, просто подключив скрипт Vue к странице, такой подход не отличается хорошей масштабируемостью. Если нужно разработать полноценное одностраничное приложение (Single Page Application, SPA) и при этом хочется воспользоваться вспомогательными инструментами Vue, тогда лучше всего будет прибегнуть к Vue CLI.
Если вы из тех, кто не очень любит работать в командной строке, тогда вы вполне можете воспользоваться инструментом с аналогичными возможностями, имеющим графический интерфейс (Vue UI).
▍Установка Vue CLI
Для начала нам нужно установить Vue CLI. Прежде чем это сделать — нужно обзавестись Node.js и npm. Если вы раньше не работали с Node.js и npm — уделите некоторое время на то, чтобы с ними познакомиться и немного в них разобраться. Вот команда, с помощью которой можно установить Vue CLI:
Список команд, поддерживаемых утилитой vue
Команда create принимает имя приложения. Создадим новое Vue-приложение, выполнив следующую команду:
Сейчас же нам достаточно согласиться с предлагаемыми по умолчанию параметрами. Это приведёт к созданию нового приложения.
Создание нового приложения с помощью Vue CLI
Теперь, в командной строке или во встроенном в ваш редактор терминале, выполните следующую команду:
Она запустит сервер, после чего выдаст сведения о том, как открыть начальную страницу приложения. А именно, это http://localhost:8080/.
Vue-приложение в браузере
Тут мы рассмотрели использование Vue CLI лишь весьма поверхностно. Однако я надеюсь, что этот пример показал вам то, как легко с помощью Vue CLI создавать новые приложения, которые обеспечены надёжной инфраструктурой и могут масштабироваться сообразно росту нужд развивающегося проекта.
Вариант №3: Vue UI
Вместе с Vue CLI, с инструментом командной строки, устанавливается и инструмент Vue UI. Для того чтобы его запустить — воспользуйтесь следующей командой:
В ходе её выполнения будет открыта страница нового приложения, находящаяся по адресу http://localhost:8000/dashboard.
С помощью Vue UI можно создать новый проект, который будет обладать теми же возможностями, что и проект, созданный средствами командной строки.
Создание нового проекта в Vue UI
После того как настройка проекта будет завершена, запустить его можно прямо из Vue UI, перейдя в раздел Project tasks и нажав на соответствующую кнопку.
Запуск приложения в Vue UI
Вариант №4: CodeSandbox
Хотя вышерассмотренные варианты создания первого Vue-приложения и позволили нам достичь поставленной цели, они требуют некоторой настройки окружения разработки. Возможно, вам это не подходит и вы до сих пор не создали своё первое Vue-приложение. Если так — тогда сейчас мы рассмотрим ещё один способ работы с Vue. Он заключается в использовании онлайновых сред разработки, одной из которых является CodeSandbox.
Прежде чем создавать проекты на CodeSandbox, вам понадобится зарегистрироваться на сайте или войти в систему с использованием GitHub-аккаунта. После этого нужно создать новую «песочницу» (в рамках проекта это называется «sandbox») и найти Vue среди доступных шаблонов (на закладке Popular templates или Client templates ).
Создание нового проекта, основанного на Vue, в CodeSandbox
После этого в вашем распоряжении окажется новое Vue-приложение. На следующем рисунке можно видеть, что в левой панели можно работать с файлами проекта, в центре находится окно редактора, а справа — область предварительного просмотра, в которой выводится работающее приложение.
Работа над приложением в CodeSandbox
Откройте в редакторе файл src/components/HelloWorld.vue и замените его содержимое на следующий код:
После этого вы увидите то же приложение, которым мы уже занимались. В ходе работы над проектом может возникнуть необходимость в том, чтобы кому-то его показать. Например — для того, чтобы о чём-то посоветоваться. CodeSandbox позволяет сделать это с помощью специальной ссылки.
Работа над приложением в CodeSandbox
Полезные ресурсы
Вот ссылки на некоторые из моих любимых ресурсов по Vue. Они помогут вам продвигаться в деле освоения этого фреймворка. Например — вот страница Awesome Vue, посетив которую можно получить представление о масштабах экосистемы Vue. Здесь можно найти репозитории Vue. Вот официальный блог проекта. Вот сайт сообщества Vue-разработчиков. Вот и вот — подкасты по Vue. Вот — страницы нескольких проектов, основанных на Vue: VuePress, Nuxt, Gridsome.
Что дальше?
Независимо от того, каким фреймворком вы пользуетесь для разработки фронтенда — вам нужно поддерживать в хорошем состоянии свои знания по JavaScript. Чем больше времени вы сможете уделить совершенствованию своих знаний по JS — тем лучше. Если вы хорошо знаете JavaScript — это значит, что вы сможете справиться с любым фреймворком или с любой библиотекой, с которыми вам может понадобиться работать.
Я уже говорил о руководстве по Vue из официальной документации. Но о нём стоит упомянуть снова. Я бы, если был бы начинающим разработчиком, постарался бы как можно тщательнее разобраться с этим руководством, читал бы его и перечитывал. Но при этом я не забывал бы испытывать на практике те примеры кода, которые там встречаются. Не зря говорят, что повторенье — мать ученья. Повторение играет важную роль в процессе изучения новых технологий, и без него вам не обойтись.
В процессе работы с документацией стоит обратить особое внимание на следующие базовые концепции Vue:
Итоги
Если вы следите за моими публикациями в Twitter, то вы знаете, что я — большой фанат Vue. Мне нравится создавать приложения, основанные на компонентах. Я полагаю, что использование Vue не только упрощает работу, но и делает процесс написания кода приятным и увлекательным занятием.
Уважаемые читатели! Если вам приходилось недавно изучать свой первый клиентский фреймворк — просим рассказать о том, как это было.
Vue.js для сомневающихся. Все, что нужно знать
В данной статье речь пойдет о замечательном фронтенд фреймворке Vue.js. Как вы видите, статья называется «Vue.js для сомневающихся», и, если вы до сих пор не могли решиться попробовать Vue.js на практике, то надеюсь, что после прочтения вы все-таки на это решитесь.
Фреймворки разрабатываются для того, чтобы упростить нам жизнь и освободить от написания однотипного кода. Но, по мере того как кодовая база некоторых фреймворков сильно разрастается, они начинают привносить свою долю сложности в проект. Из-за этого при планировании разработки мы должны учитывать два фактора:
Из вышесказанного, у нас получается два варианта выбора инструмента:
О Vue.js и авторе
Итак, разберемся с Vue и каким образом он может облегчить нам разработку приложения.
Создателем Vue.js является Evan You, бывший сотрудник Google и Meteor Dev Group. Начал он разрабатывать фреймворк в 2013-м, а в феврале 2014-го состоялся первый публичный релиз. Vue широко используется среди китайских компаний, например: Alibaba, Baidu, Xiaomi, Sina Weibo и др. Он входит в ядро Laravel и PageKit. Недавно свободная система управления репозиториями GitLab тоже перешла на Vue.js.
В конце сентября 2016-го вышел в релиз Vue.js 2.0, еще круче и с упором на производительность — теперь используется виртуальный DOM, поддерживается серверный рендеринг, возможность использовать JSX и т.д. Хотя сейчас он поддерживается только сообществом, он держится достойно даже на уровне продуктов таких гигантов, как Google и Facebook (Angular2 и React 15), и постепенно догоняет их по популярности.
Рассмотрим самый простой пример:
Концепции Vue.js
Конструктор
Работа с Vue.js начинается с создания нового инстанса new Vue. В el у нас элемент, за которым следит Vue. В template выбран (либо прописан инлайново) элемент, куда Vue будет рендерить. В data хранится текущее состояние инстанса, а метод computed предоставляет нам вычисляемые свойства.
В примере вычисляемое свойство full_name отслеживает first_name и last_name как зависимости и автоматически синхронизируется.
В methods можно выделить следующие кастомные методы и методы жизненного цикла Vue:
Директивы
Директивы — специальные атрибуты для добавления элементам html дополнительной функциональности.
Рассмотрим некоторые встроенные директивы (кто работал с Angular, тому они покажутся очень знакомыми):
Все Vue-директивы имеют префикс “v-”. В директиву передается какое-то значение состояния, а в качестве аргументов могут быть атрибуты html или события.
Компоненты
Компоненты помогают расширить основные html элементы и внедрить переиспользуемый код. По сути, компоненты — повторно используемые части UI. На этапе проектирования мы разбиваем наше приложение на независимые части и получаем древовидную структуру компонентов.
В Vue.js нет особых требований к именам компонентов, но хорошая практика — придерживаться правил W3C насчет кастомных компонентов, то есть буквы нижнего регистра и разделения через дефис.
Новый компонент объявляется с помощью Vue.component, и в первый аргумент мы передаем имя нового тега (в нашем случае simple-counter)
Коммуникация между vue-компонентами осуществляется по принципу “Props in, Events out”. То есть от родительского элемента к дочернему информация передается через пропсы, а обратно — вызываются события.
Переходы
Vue предоставляет различные способы применения анимационных эффектов, когда элементы отрисованы, обновлены или удалены из DOM. Они включают в себя инструменты для:
Экосистема фреймворка
Роутинг
Во Vue.js за маршрутизацию отвечает отдельный пакет vue-router. Он поддерживает вложенные маршруты к вложенным компонентам, предлагает упрощенное API для навигационных хуков, управляемое поведение скрола и продвинутый контроль переходов.
Вот небольшой пример:
Ajax-запросы
Для работы с Ajax-запросами существует плагин vue-resource. Он предоставляет возможности для создания веб-запросов и обработки ответов с помощью XMLHttpRequest или JSONP. Также особенностью плагина является поддержка Promise API и URI шаблонов.
Управление состоянием
Vuex — паттерн и библиотека управления состоянием для приложений на Vue.js. Он предоставляет централизованное общее состояние для всех компонентов в приложении и правила, обеспечивающие предсказуемое изменение состояния.
На изображении ниже представлено приложение на Vue+Vuex со следующими частями:
Система сборки и инструменты разработчика
Для отладки в браузере существует Vue-devtools (к сожалению, пока только для Chrome), который позволяет видеть, какие компоненты есть в нашем приложении и их текущее состояние.
Также он прекрасно работает с Vuex и позволяет выполнять так называемый time-travel debugging: в браузере мы можем увидеть историю состояний и переключаться между ними.
Почему я должен его использовать
Vue удивителен! Я считаю, это здорово, что я могу просто подключить его на странице и начать работать без необходимости шаманить с системой сборки или CLI. С ним очень просто начать работать, даже если вы никогда не работали с JavaScript фреймворками. Это идеальное сочетание удобства и мощности. Рассмотрим еще несколько аргументов в его пользу:
Спасибо за внимание!
Статью подготовили: greebn9k (Сергей Грибняк), Dmitry-Ivanov (Дмитрий Иванов), silmarilion (Андрей Хахарев)