Vue.js
Avaz SamarkandiyВведение
Что такое Vue.js?
Vue (произносится /vjuː/, примерно как view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его совместно с современными инструментами и дополнительными библиотеками.
Если вы — опытный фронтенд-разработчик, и хотите узнать, чем Vue отличается от остальных библиотек или фреймворков, обратите внимание на сравнение с другими фреймворками.
Начало работы
В этом официальном руководстве мы предполагаем, что вы уже знакомы с HTML, CSS и JavaScript на базовом уровне. Если же вы во фронтенд-разработке совсем новичок, начинать сразу с изучения фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.
Проще всего попробовать Vue.js, начав с примера Hello World на JSFiddle. Просто откройте его в другой вкладке, и изменяйте по ходу чтения руководства. А можно и просто создать index.html
файл на диске и подключить Vue:
Документация по установке описывает другие варианты установки Vue. Обратите внимание, что мы не рекомендуем новичкам начинать с vue-cli
, особенно если у них нет опыта работы с инструментами сборки Node.js.
Декларативный рендеринг
В ядре Vue.js находится система, которая позволяет декларативно отображать данные в DOM, используя простые шаблоны:
Hello Vue!
Вот мы и создали наше первое Vue-приложение! Выглядит похоже на простой рендеринг шаблона, но “под капотом” Vue выполнил немало работы. Данные и DOM теперь реактивно связаны. Как это проверить? Просто откройте консоль JavaScript в своём браузере (прямо здесь, на этой странице), и задайте полю app.message
другое значение. Вы тут же увидите соответствующее изменение в окне браузера.
В дополнение к интерполяции текста, мы можем также связывать атрибуты элементов:
Подержи курсор надо мной пару секунд, чтобы увидеть динамически связанное значение title!
Здесь мы встречаемся с кое-чем новым. Атрибут v-bind
, который вы видите, называется директивой. Директивы имеют префикс v-
, указывающий на их особую природу. Как вы уже могли догадаться, они применяют к отображаемому DOM особое реактивное поведение, управляемое Vue. В данном примере директива говорит “сохраняй значение title этого элемента актуальным при изменении свойства message
у экземпляра Vue”.
Если вы снова откроете консоль JavaScript и введёте app2.message = 'какое-то новое сообщение'
, вы опять-таки увидите, что связанный код HTML — в данном случае, атрибут title
— обновился.
Условия и циклы
Управлять присутствием элемента в DOM тоже довольно просто:
Сейчас меня видно
Попробуйте ввести в консоли app3.seen = false
. Сообщение должно пропасть.
Этот пример демонстрирует возможность связывать данные не только с текстом и атрибутами, но также и со структурой DOM. Более того, Vue также имеет мощную систему анимации, которая автоматически применяет transition-эффекты, когда элементы добавляются/обновляются/удаляются.
Есть несколько других директив, каждая из которых имеет свой особый функционал. Например, директива v-for
может быть использована для отображения списков, используя данные из массива:
- Посадить дерево
- Построить дом
- Вырастить сына
В консоли, введите app4.todos.push({ text: 'Новый элемент' })
. Вы увидите, что к списку добавился новый элемент.
Работа с пользовательским вводом
Чтобы пользователи могли взаимодействовать с вашим приложением, используйте директиву v-on
для наблюдения за событиями, указав метод-обработчик:
Hello Vue.js!
Обратить порядок букв в сообщении
Обратите внимание, что в методе мы просто обновляем состояние нашего приложения, не трогая DOM — всю работу с DOM производит Vue, а код, который вы пишете, занимается только логикой приложения.
Vue также содержит директиву v-model
, позволяющую легко связывать элементы форм и состояние приложения:
Hello Vue!
Разбиение приложения на компоненты
Другой важной концепцией Vue являются компоненты. Эта абстракция позволяет собирать большие приложения из меньших кусочков. Компоненты представляют собой пригодные к повторному использованию объекты. Если подумать, почти любой интерфейс может быть представлен как дерево компонентов:
Во Vue, компонент — это, по сути, экземпляр Vue с предустановленными опциями. Создать новый компонент во Vue просто:
Теперь его можно использовать в шаблоне другого компонента:
Пока что у нас получилось так, что во всех todo будет содержаться один и тот же текст — это не очень-то интересно. Хотелось бы иметь возможность передать данные от родителя в дочерние компоненты. Давайте изменим определение компонента, чтобы он мог принимать входной параметр:
Теперь можно передать текст задачи в каждый компонент с помощью v-bind
:
- Овощи
- Сыр
- Что там ещё люди едят?
Конечно же, этот пример слегка надуман, но посмотрите сами — нам удалось разделить наше приложение на два меньших объекта, и дочерний оказался в разумной мере отвязан от родительского с помощью интерфейса входных параметров. Теперь мы можем и далее улучшать наш компонент <todo-item>
, усложняя шаблон и логику, но не влияя на родительское приложение.
В крупных приложениях разделение на компоненты становится обязательным условием для сохранения управляемости процесса разработки. Разговор о компонентах ещё далеко не закончен и будет продолжен далее в этом руководстве, но уже сейчас можно взглянуть на (вымышленный) пример того, как мог бы выглядеть шаблон приложения, использующего компоненты:
Отношение к пользовательским элементам Web Components
Вы могли заметить, что компоненты Vue довольно похожи на пользовательские элементы, являющиеся частью спецификации W3C Web Components. Дело в том, что синтаксис компонентов Vue и правда намеренно следует этой спецификации. В частности, компоненты Vue реализуют API слотов и специальный атрибут is
. Вместе с тем, есть и несколько ключевых различий:
- Спецификация Web Components всё ещё находится в статусе черновика и не реализована ни в одном из браузеров. Компоненты Vue, напротив, не требуют никаких полифиллов и устойчиво работают во всех поддерживаемых браузерах (IE9 и выше). При необходимости компоненты Vue могут быть обёрнуты в нативные пользовательские элементы.
- Компоненты Vue предоставляют важные возможности, недоступные в простых пользовательских элементах. Самые важные из них: кросс-компонентная передача данных, коммуникация с использованием пользовательских событий и интеграция с инструментами создания сборок.
Готовы к большему?
Мы всего лишь кратко представили самые основные возможности ядра Vue.js — остаток этого руководства посвящён значительно более детальному рассмотрению этих и других возможностей, так что советуем прочитать его целиком!