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

После импорта CDN Vue.js через тег script (аналогично тому, как вы, скажем, импортируете jQuery) и настройки базового HTML-документа я был готов начать экспериментировать с компонентами.

Что такое компонент Vue.js?

Компоненты — мощный инструмент. Они помогают расширять базовые элементы HTML и разбивать код на повторно используемые фрагменты. Представьте, что вы строите монстра, и все, что у вас есть, это его тело. Вы можете прикрепить рога, крылья, хвост и т. д. Если вы построили другого монстра, вы также можете использовать рога, но вместо крыльев и хвоста вы можете дать ему огненное дыхание. Компоненты в Vue.js ничем не отличаются — вы можете присоединить их к своему основному коду, чтобы реализовать их функциональность, без необходимости прописывать эту функциональность непосредственно в основной код.

Важно отметить одну важную вещь: все компоненты Vue также являются экземплярами Vue, и поэтому принимают один и тот же объект параметров, который дает вам доступ к данным, методам, вычислениям и т.п. (подробнее об этом позже).

Как создать компонент Vue.js?

Это довольно просто на самом деле. В верхней части связанного файла .js просто используйте синтаксис Vue.component('component-name', {})

В приведенном ниже примере вы можете видеть, что мой компонент называется «пользователь приложения». Обычно хорошо добавлять префикс к компонентам, чтобы они не конфликтовали ни с какими уже существующими HTML-тегами. Я поставил перед своим префиксом слово «приложение».

Следующее, что вы заметите, это то, что второй аргумент в компоненте — это объект, который принимает другой объект, данные. В этот момент вы можете подумать: «Данные знакомы! Я видел это раньше в своих обычных сценариях Vue.js. Здесь я отслеживаю данные, которые используются в моем приложении!»

Но при дальнейшем осмотре можно заметить нечто странное. Вместо того, чтобы быть простым объектом, теперь это объект, значением которого является функция, которая, в свою очередь, возвращает значения.

Почему объект данных компонента возвращает значение?

Поскольку каждый экземпляр Vue должен иметь свои собственные $data и $el (и, да, компоненты считаются их собственными экземплярами Vue), мы, очевидно, не хотим, чтобы значение, которое мы передали в наш app-user, было общим для всех экземпляров, созданных из этого конструктора. Поэтому, когда вы хотите определить, как компонент должен инициализировать свои данные или элемент по умолчанию, вы должны вместо этого передать функцию.

Создание шаблона

Это наш последний шаг перед тем, как мы сможем использовать наш компонент в нашем основном приложении. Как и другие экземпляры Vue, наш компонент должен иметь шаблон. В моем примере я решил использовать встроенный шаблон, но есть и другие, более чистые и масштабируемые способы сделать это (см.: https://medium.com/js-dojo/7-ways-to-define-a -шаблон-компонента-в-vuejs-c04e0c72900d ). Если вы добавите его, как я сделал в примере, вы захотите использовать базовый HTML.

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

Подведение итогов

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

Теперь, когда я загружаю свое приложение в браузер, я вижу там свой компонент.

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

Дополнительную информацию о компонентах Vue.js можно найти здесь: https://vuejs.org/v2/guide/components.html