Согласно исследованию Состояние JavaScript в 2017 году Vue.js - это интерфейсная библиотека, которую разработчики хотели бы изучить больше всего. Я здесь, чтобы объяснить, почему я так думаю, и провести вас через создание простого приложения с помощью Vue.

Недавно я работал с Эваном Ю, Крисом Фрицем, Сарой Драснер и Адамом Яром над созданием вводного видео, которое теперь вы можете найти на первой странице http://vuejs.org. Далее следует текстовая версия этого видео.

Великий переход на JavaScript

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

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

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

Кроме того, вы можете с самого начала встроить больше бизнес-логики в свой интерфейс. Vue имеет основные библиотеки и экосистему, которые вам нужно масштабировать.

Как и другие интерфейсные фреймворки, Vue позволяет вам взять веб-страницу и разделить логику на повторно используемые компоненты. У каждого из них могут быть собственные HTML, CSS и JavaScript, необходимые для отображения каждой части страницы.

Погружаемся в наш первый проект

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

Как и во многих приложениях JavaScript, мы начинаем с необходимости отображать наши данные на странице.

Начать сборку с Vue довольно просто.

Как вы можете видеть на изображении выше, мы включаем библиотеку Vue, создаем экземпляр Vue и подключаемся к нашему корневому элементу с идентификатором app. EL означает элемент. Мы также переместим наши данные внутрь объекта и превратим X в выражение с двойными фигурными скобками.

Как видите, работает:

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

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

Это работает с любыми типами данных - не только со строками. Итак, вместо одного продукта давайте воспользуемся массивом продуктов и обновим наш h2 до неупорядоченного списка. Чтобы создать новый элемент ‹li› для каждого продукта, мы будем использовать специальный атрибут (директива AKA) из Vue, называемый v-for. Таким образом, каждый продукт получает отдельный элемент списка.

Если мы перейдем в браузер, то увидим следующее:

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

Если мы посмотрим, что печатается на нашей странице, то увидим:

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

И наш результат:

Мы могли бы привлечь внимание к товарам с количеством 0, поэтому давайте добавим ‹span› с текстом «НЕТ НА СКЛАДЕ». Мы хотим, чтобы он отображался только в том случае, если наш item.quantity === 0, поэтому мы будем использовать директиву Vue v-if.

Конечно, нашей куртки нет в наличии:

Что, если бы мы хотели распечатать общее количество товаров в нашем списке? Нам нужно создать вычисляемое свойство с именем totalProducts, которое возвращает общее количество наших продуктов. Если вы не знакомы с JavaScript, reduce, он складывает все количества каждого продукта.

Как вы можете видеть ниже, теперь у нас распечатана вся наша инвентаризация.

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

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

Затем я хочу показать вам, как мы можем добавить интерактивности этой странице с помощью кнопки. Мы создадим кнопку «Добавить» для каждого продукта, и при нажатии на эту кнопку мы увеличим количество на единицу.

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

Но что, если мы хотим просто написать количество курток или походных носков? Мы просто создаем новое поле ввода и связываем его с нашим полем количества продукта с помощью директивы v-model и указываем, что это всегда число.

Вы заметите, что теперь я могу ввести общее количество каждого элемента, и оно немедленно обновляется. Я даже могу установить количество обратно на ноль, и я получаю сообщение OUT of Stock, а мои кнопки добавления все еще работают.

Вы можете поиграть с готовой версией этого проекта и запустить ее, перейдя в этот JSFiddle.

Еще несколько функций Vue

Если бы мы встраивали это в более крупное приложение, на этом этапе хотелось бы начать разбивать вещи на несколько компонентов и файлов, чтобы все было организовано.

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

Мы также могли бы использовать компоненты .vue из одного файла, которые содержат HTML, JavaScript и CSS с областью видимости или даже SCSS.

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

Пройдите бесплатный курс Введение в Vue.js от Vue Mastery. Vue Mastery также имеет бесплатную шпаргалку по Vue, которую вы получите, если создадите бесплатную учетную запись, в которой есть весь синтаксис, который вам нужно знать, когда вы только начинаете. Также есть Введение в официальную документацию.

Наконец, я должен поблагодарить Эвана Ю, Криса Фрица, Сару Драснер и Адама Яра за помощь в создании этого контента и видео.