Всё, что нужно для начала работы с vue.js

Компоненты и реквизит

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

• Заголовок
• Навигация
• ContentCard
• Нижний колонтитул

И многое другое. Кроме того, в компонент могут быть вложены другие компоненты. Мы можем думать о них как о «родителях» и «детях». Другими словами, компоненты – это столпы приложения.

Чтобы создать компонент Vue, перейдите в корневую папку проекта и выполните следующие команды:

Эти две команды создают папку и компонент. В качестве альтернативы вы можете сделать то же самое за пределами терминала.

Создайте компонент

Следующим шагом является создание компонента, что вы можете сделать, вызвав метод в экземпляре Vue:

Первый аргумент – это имя компонента, которым в данном случае является . Второй аргумент – это объект с подробностями конфигурации.

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

Теперь детали курса инкапсулированы в компонент, а не хранятся в основном файле приложения. Однако, чтобы приложение снова заработало, вам необходимо внести некоторые другие изменения. Перейдите в файл и измените его следующим образом:

Кроме того, перейдите и измените следующее:

Что здесь происходит?

Прежде всего, вы импортировали компонент в этой строке:

Во-вторых, вы использовали его в этой строке:

В-третьих, теперь вы монтируете приложение в HTML-файл, а не в main.js:

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

Двигаемся вперед, молодцы! Вы создали и использовали свой первый компонент Vue. Резюмируем:

• Вы создали компонент Vue – «components / CourseCard»
• Импортировал его в файл HTML
• Использовал это

Реквизит

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

Давайте изменим существующее приложение, чтобы оно принимало свойство с именем . Цель этой опоры – указать, платный или бесплатный курс. Сделать это можно следующим образом:

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

Обычно такие фреймворки, как Vue, имеют встроенную проверку. То есть он проверяет, что переданная опора имеет правильный тип.

Вы можете увидеть полный код компонента на GitHub – CourseCard.

Прежде чем идти дальше, нужно зайти в файл и вернуть свойство. См. Код ниже:

По умолчанию все курсы платные. Однако вы можете сделать их все «бесплатными» по умолчанию и сделать «платными» только премиум-курсы.

Двигаясь дальше, добавьте в свойство компонента следующий метод :

Вы можете увидеть полный код компонента на GitHub – CourseCard. Этот метод – – позволяет вам проверить, оплачен ли курс или нет, и соответствующим образом отобразить данные в шаблоне.

Теперь вам нужно войти в файл и добавить указанную выше строку кода. Это похоже на то, что было у вас раньше, за одним исключением. В этой строке вы передаете опору, чтобы использовать ее в своем компоненте.

Смотрите полный код из index.html на GitHub.

Последний шаг – использовать опору и визуализировать данные на ее основе. Приведенный ниже фрагмент кода взят из шаблона компонента «Курс».

Если для свойства задано значение true (если курс платный), он отображает дополнительную информацию, которая позволяет пользователям покупать курс. С другой стороны, если курс бесплатный, информация «скрыта».

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

# Composing with Components

The component system is another important concept in Vue, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:

In Vue, a component is essentially an instance with pre-defined options. Registering a component in Vue is straightforward: we create a component object as we did with objects and we define it in parent’s option:

12345678910

Now you can compose it in another component’s template:

1234

But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let’s modify the component definition to make it accept a :

1234

Now we can pass the todo into each repeated component using :

123456789101112131415

1234567891011121314151617181920

See the Pen Intro-Components-1
by Vue (@Vue)
on CodePen.

This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our component with more complex template and logic without affecting the parent app.

In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components later in the guide, but here’s an (imaginary) example of what an app’s template might look like with components:

1234567

Relation to Custom Elements

You may have noticed that Vue components are very similar to Custom Elements, which are part of the Web Components Spec(opens new window). That’s because Vue’s component syntax is loosely modeled after the spec. For example, Vue components implement the Slot API(opens new window) and the special attribute. However, there are a few key differences:

1. The Web Components Spec has been finalized but is not natively implemented in every browser. Safari 10.1+, Chrome 54+ and Firefox 63+ natively support web components. In comparison, Vue components work consistently in all supported browsers (except Internet Explorer 11 — please check details here(opens new window)). When needed, Vue components can also be wrapped inside a native custom element.

1. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations.

Although Vue doesn’t use custom elements internally, it has when it comes to consuming or distributing as custom elements. Vue CLI also supports building Vue components that register themselves as native custom elements.

DOM Template Parsing Caveats

Some HTML elements, such as , , and have restrictions on what elements can appear inside them, and some elements such as , , and can only appear inside certain other elements.

This will lead to issues when using components with elements that have such restrictions. For example:

The custom component will be hoisted out as invalid content, causing errors in the eventual rendered output. Fortunately, the special attribute offers a workaround:

It should be noted that this limitation does not apply if you are using string templates from one of the following sources:

• String templates (e.g. )
• Single-file () components

That’s all you need to know about DOM template parsing caveats for now – and actually, the end of Vue’s Essentials. Congratulations! There’s still more to learn, but first, we recommend taking a break to play with Vue yourself and build something fun.

Once you feel comfortable with the knowledge you’ve just digested, we recommend coming back to read the full guide on Dynamic & Async Components, as well as the other pages in the Components In-Depth section of the sidebar.

##company## — ##description##

Edit this on GitHub!

Netlify

4.1 Почему я не могу использовать класс, основанный на декораторе @Component для функциональных компонентов?

Снова возвращаясь к классам, следует отметить, что классы представляют собой структуры данных для хранения локального состояния. Если функциональные компоненты не имеют состояния, то нет никакого смысла в использовании декоратора @Component.

Соответствующее обсуждение имеется по адресу:

4.2 Внешние классы не применяются к функциональным компонентам

Функциональные компоненты не имеют привязки к классу и стилю, как обычные компоненты. Нужно вручную применять эти привязки внутри функции отрисовки.

4.3 Функциональные компоненты всегда повторно отрисовываются?

Функциональные компоненты — нетерпеливы, что означает, что функция отрисовки вызывается напрямую. Это также означает, что вы должны:

Избегать использования компонента с состоянием непосредственно внутри в функции отрисовки, потому что это создаст различное определение компонента при каждом вызове функции отрисовки.

Функциональный компонент лучше использовать, если они являются листовыми компонентами (leaf components).

4.4 Как сгенерировать событие из функционального компонента?

Генерация события из функционального компонента не очевидна. К сожалению, об этом не написано в документации. Метод недоступен в функциональном компоненте. Следующий вопрос на Stack Overflow может помочь.

Сравнение с другими фреймворками

О сравнении Vue.js с другими фреймворками можно прочитать на официальном сайте проекта.

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

Что касается AngularJS, то он также значительно повлиял на Vue, однако, в отличие от него, Vue значительно более прост в изучении, а также является более гибким и модульным решением, чем Angular, который придерживается жесткой структуры приложения. Если сравнивать производительность этих двух фреймворков, то Vue производительнее и более прост в оптимизации (хотя если сравнивать Vue.js с Angular 2, то оба фреймворка показывают примерно одинаковую производительность, Vue лишь слегка обгоняет Angular 2).

По словам Эвана Ю, React в основном используют те, кто любит функциональный стиль программирования, Angular — те, кто ранее программировал на Java или С#. А Vue нравится тем, кто предпочитает более классическую модель разработки.

# Supporting Libraries

All of our official libraries and tools now support Vue 3, but some of them are still in beta or release candidate status. You’ll find details for the individual libraries below. Most are currently distributed using the dist tag on npm. We intend to switch to once all the official libraries have compatible, stable versions.

Vue CLI

As of v4.5.0, now provides the built-in option to choose Vue 3 when creating a new project. You can upgrade and run to create a Vue 3 project today.

• Documentation(opens new window)
• GitHub(opens new window)

Vue Router

Vue Router 4.0 provides Vue 3 support and has a number of breaking changes of its own. Check out its migration guide(opens new window) for full details.

• Documentation(opens new window)
• GitHub(opens new window)
• RFCs(opens new window)

Vuex

Vuex 4.0 provides Vue 3 support with largely the same API as 3.x. The only breaking change is .

• Documentation(opens new window)
• GitHub(opens new window)

Devtools Extension

We are working on a new version of the Devtools with a new UI and refactored internals to support multiple Vue versions. The new version is currently in beta and only supports Vue 3 (for now). Vuex and Router integration is also work in progress.

• For Chrome: Install from Chrome web store(opens new window)

  Note: the beta channel may conflict with the stable version of devtools so you may need to temporarily disable the stable version for the beta channel to work properly.

• For Firefox: Download the signed extension(opens new window) ( file under Assets)

IDE Support

It is recommended to use VSCode(opens new window) with our official extension Vetur(opens new window), which provides comprehensive IDE support for Vue 3.

Other Projects

Project	npm	Repo
@vue/babel-plugin-jsx	(opens new window)
eslint-plugin-vue	(opens new window)
@vue/test-utils	(opens new window)
vue-class-component	(opens new window)
vue-loader	(opens new window)
rollup-plugin-vue	(opens new window)

INFO

For additional information on Vue 3 compatibility with libraries and plugins, be sure to check out this issue in awesome-vue(opens new window).

Модуль Vuex Auth

Мы реализуем аутентификацию с использованием vuex. Сначала настроим файл для vuex.

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    status: '',
    token: localStorage.getItem('token') || '',
    user : {}
  },
  mutations: {

  },
  actions: {

  },
  getters : {

  }
})

Если вы заметили, мы импортировали vue, vuex и axios, а затем указали vue использовать vuex. Это потому, что здесь будут выполняться сложные действия.

Мы определили атрибуты состояния. Теперь состояние vuex будет содержать статус аутентификации, токен и информацию о пользователе.

Создание  Vuex-действия

Мы создадим действие , которое аутентифицирует пользователя на сервере и передает его учетные данные в хранилище vuex.

Откройте файл и добавьте к объекту действия приведенный ниже код:

login({commit}, user){
    return new Promise((resolve, reject) => {
      commit('auth_request')
      axios({url: 'http://localhost:3000/login', data: user, method: 'POST' })
      .then(resp => {
        const token = resp.data.token
        const user = resp.data.user
        localStorage.setItem('token', token)
        axios.defaults.headers.common = token
        commit('auth_success', token, user)
        resolve(resp)
      })
      .catch(err => {
        commit('auth_error')
        localStorage.removeItem('token')
        reject(err)
      })
    })
},

Действие передает vuex хелпер , который мы будем использовать для запуска мутаций. Мутации вносят изменения в Vuex Store.

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

Токен можно было разместить в хранилище vuex. Но если пользователь покидает приложение, все данные в хранилище vuex стираются.

Чтобы пользователь мог вернуться в приложение в течение срока действия токена, нужно хранить токен в localStorage. Мы возвращаем promise, чтобы вернуть ответ пользователю после завершения авторизации.

Создание  Vuex- действия  

Действие будет работать почти так же, как действие . В том же файле добавьте приведенный ниже код в объект действия:

register({commit}, user){
  return new Promise((resolve, reject) => {
    commit('auth_request')
    axios({url: 'http://localhost:3000/register', data: user, method: 'POST' })
    .then(resp => {
      const token = resp.data.token
      const user = resp.data.user
      localStorage.setItem('token', token)
      axios.defaults.headers.common = token
      commit('auth_success', token, user)
      resolve(resp)
    })
    .catch(err => {
      commit('auth_error', err)
      localStorage.removeItem('token')
      reject(err)
    })
  })
},

Это работает аналогично действию . Действие также предназначено для обработки авторизации.

Создание  Vuex-действия

Пользователь должен иметь возможность выйти из системы. Для этого нужно удалить все данные, созданные во время последней аутентифицированной сессии. В этот же объект добавьте приведенный ниже код:

logout({commit}){
  return new Promise((resolve, reject) => {
    commit('logout')
    localStorage.removeItem('token')
    delete axios.defaults.headers.common
    resolve()
  })
}

Создание мутации

Мутаторы используются для изменения состояния хранилища Vuex. Определим мутаторы, которые мы использовали в приложении. В объект мутаторов добавьте следующее:

mutations: {
  auth_request(state){
    state.status = 'loading'
  },
  auth_success(state, token, user){
    state.status = 'success'
    state.token = token
    state.user = user
  },
  auth_error(state){
    state.status = 'error'
  },
  logout(state){
    state.status = ''
    state.token = ''
  },
},

Создание геттеров

Мы используем геттеры, чтобы получить значение атрибутов состояния vuex. Геттеры должны отделить данные приложения от его логики.

Добавьте приведенный ниже код к объекту :

getters : {
  isLoggedIn: state => !!state.token,
  authStatus: state => state.status,
}

Это более удобный способ доступа к данным в хранилище.

Getting Started

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step — grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

The easiest way to try out Vue.js is using the Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an file and include Vue with:

or:

The Installation page provides more options of installing Vue. Note: We do not recommend that beginners start with , especially if you are not yet familiar with Node.js-based build tools.

If you prefer something more interactive, you can also check out this tutorial series on Scrimba, which gives you a mix of screencast and code playground that you can pause and play around with anytime.

Element UI

По функционалу библиотека  схожа с предыдущей Vue UI. Дизайн система насчитывает порядка 60 компонентов со всевозможными кастомизациями, так как стили библиотеки легко переопределяются. Библиотека использует препроцесcор SCSS с возможностью заменить глобальные переменные цветов, тем самым можно легко создать свою цветовую тему. Кстати говоря, все классы в библиотеке названы по БЭМу. Присутствует поддержка 24 колоночной структуры и локализации на русском, украинском и казахском языках. Есть достаточно скудный набор иконок, который скорее всего придется заменить на тот, который придется вам по душе. Как и в любой уважающей себя UI библиотеке имеется полноценная валидация форм, так что сторонние плагины типа VeeValidate не потребуются. Документация на английском языке с понятными примерами.

Заключение

Таким образом, мы с вами кратко разобрали пожалуй самые популярныe vue библиотеки готовых компонентов. Выбирайте дизайн систему, которая вам больше всего понравилась и вперед кодить!

Условный рендеринг

Иногда вы хотите отображать элементы на странице в зависимости от условия. То есть используйте операторы if, чтобы решить, отображать ли элемент или нет. Или отрендерить его в зависимости от условия.

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

Обратите внимание на новое поле под названием «доступно». В поле «доступно» установлено значение «истина»

Однако вы можете продолжать менять его между «истиной» и «ложью», чтобы увидеть, как работает условный рендеринг.

В приведенном выше коде отображается Вы можете купить курс! если есть . В противном случае отображается сообщение Курс недоступен для покупки! .

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

Когда вы запускаете приложение, вы видите следующее (при условии, что для параметра «доступно» установлено значение «истина»):

Passing Data to Child Components with Props

Earlier, we mentioned creating a component for blog posts. The problem is, that component won’t be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That’s where props come in.

Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. To pass a title to our blog post component, we can include it in the list of props this component accepts, using a option:

A component can have as many props as you’d like and by default, any value can be passed to any prop. In the template above, you’ll see that we can access this value on the component instance, just like with .

Once a prop is registered, you can pass data to it as a custom attribute, like this:

In a typical app, however, you’ll likely have an array of posts in :

Then want to render a component for each one:

Above, you’ll see that we can use to dynamically pass props. This is especially useful when you don’t know the exact content you’re going to render ahead of time, like when fetching posts from an API.

That’s all you need to know about props for now, but once you’ve finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on Props.

Прозрачные компоненты-обёртки

Прозрачный компонент-обёртка оборачивает некоторую структуру DOM и всё ещё использует события внутри этой структуры вместо корневого элемента DOM. Например,

<!-- Обёртка компонента для поля ввода --><template>    <div class="wrapper-comp">        <label>Моя метка</label>        <input @focus="$emit('focus')" type="text"/>    </div></template>

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

<!-- Обёртка компонента для поля ввода --><template>    <div class="wrapper-comp">        <label>Моя метка</label>        <input type="text"            @focus="$emit('focus')"            @click="$emit('click')"            @blur="$emit('blur')"            @hover="$emit('hover')"        />    </div></template>

Этот код противоречит принципу DRY (не повторяй себя) и выглядит грязным. Простое решение состоит в том, чтобы просто повторно связать ваши слушатели событий с требуемыми DOM-элементам, используя свойство .

Почему Vue.js не использует ES-классы из коробки для компонентов?

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

Создатель Vue.js, Эван Ю, отлично ответил на этот вопрос в комментарии на GitHub:

Вот три главные причины, по которым не используются классы для объявления компонентов:

1. ES-классы недостаточно хороши для удовлетворения требований текущего API Vue.js. Классы в ES не полностью реализованы и их часто критикуют как шаг в неверном направлении. Классы с приватными полями и декораторами, после их стабилизации (достижения stage 3, как минимум), возможно, помогут.
2. ES-классы отлично подходят только тем, кто знаком с языками программирования с поддержкой ООП. Это просто исключает значительную часть веб-сообщества, которая не использует сложные инструменты для сборки проектов или транспилеры.
3. Создание отличной иерархии компонентов пользовательского интерфейса (UI) — это отличная композиция компонентов. Речь идёт не о большой иерархии наследования. К сожалению, классы в ES лучше подходят для последнего.

2. Как я могу создать собственный абстрактный компонент?

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

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

Но всё-таки подумайте дважды, прежде чем воспользоваться этим. Мы всегда полагались на примеси и простые функции для решения задач, оказавшись в тупиковой ситуации.

Роутер

Причина одной из самых тяжелых психологических травм которую я получил от Angular — роутер.
Несмотря на то, что переписывался он уже трижды, он все еще ужасен (да, я повторяюсь).

Не буду описывать все его проблемы подробно, но так как тема наболевшая, кратко:

1. Нет именованных роутов (!) — одно из самых странных решений, которое можно было принять это убрать именованные роуты, тем самым понизив удобство поддержки сложных приложений в разы
2. Странная система ивентов, проверять которые нужно по типу,
3. Превращение параметров роута в Observable — порой с ними крайне неудобно работать если они вам нужны только 1 раз при старте компонента
4. Для навигации были придуманы команды, очень странное и мало полезное решение, более не используемое ни в одном роутере
5. Lazy Loading через строковое название модулей, в приложении полностью на TypeScript… без комментариев
   … и т.д.

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

То есть, даже не будь в нем странных решений вроде команд, количество фич все равно делает его сложным и тяжелым.

Во Vue роутер предельно простой и рабочий.

Говоря простой, надо упоминуть, что в свое время я не обнаружил привычного по Angular параметра .

Из коробки нельзя сделать роут без шаблона, но это решается одной строчкой кода — созданием компонента вроде:

Плохо ли то, что подобной функциональности нет из коробки?

И да и нет, ведь с одной стороны важно насколько легко проблема решается, а с другой — сложность и скорость работы самого роутера (в противовес навороченности Angular). Кстати, вот классная штука:

Кстати, вот классная штука:

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

Vue 0.x — 2.x

00:00 В «Едадиле» Vue начал использоваться ещё с версии 0.11. Уже тогда он был сильно быстрее и проще Angular.js с его dirty-check и лаконичнее React с его setState и shouldComponentUpdate (не говоря уже про JSX).

00:49 Вышедший летом 2015 Vue 1 ознаменовал курс на стабилизацию. Это было весело: two-way binding, всеобщая изменяемость и, конечно, белые экраны пока не скомпилится шаблон.

01:21 Весной 2016 произошла революция — вышел Vue 2. Больше никакого веселья. Нет two-way binding, неизменяемые входные параметры, VDOM и, конечно же, прекомпиляция шаблонов. Это первая версия Vue, которая стала использоваться на edadeal.ru.

2

Что такое Vue.js

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

Название фреймворка созвучно с view, то есть с представлением (если говорить о модели MVC).

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

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

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

Также Vue.js можно использовать для создания одностраничных приложений.

Центральная концепция Vue.js – это концепция компонентов, то есть небольших частей интерфейса пользователя, которые можно использовать повторно. Таким образом, и само приложение состоит из частей-компонентов. Один компонент может включать несколько других компонентов, то есть используется древовидная иерархия: 

Vue.js – это реактивный MVC фреймворк: представление (view) автоматически изменяется при изменении переменной (модели).

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

Компонент приложения

Создаваемое нами приложение отображает популярные гифки, доступные на платформе Giphy. Через Giphy API мы получаем нужное изображение, заголовок и тип Gif. Данные будут отображаться с помощью компонентов, предоставляемых vue-native. Откройте файл App.vue, расположенный в корневой папке проекта и измените его, как показано ниже:

<template>
    <view>
        <scroll-view class="scroll-view">
           //TODO: Создать элемент gif и заголовок
           <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
              <activity-indicator size="large" color="#0000ff"></activity-indicator>
            </view>         </scroll-view>
    </view>
</template>
<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  export default {
    name: 'App',
    data() {
      return {
        gifs: [],
        loading: true,
      };
    },
    async created() {
      const response = await client.trending('gifs', {limit: 20});
      this.gifs = response.data;
    },
  };
</script>
<style>
    .scroll-view {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .loading-container {
        height: 600px;
    }
</style>

В приведенном выше фрагменте кода компонент App отображает компонент scrollview. Он является контейнером для других компонентов. Он отображает только ActivityIndicator, который будет заменен списком гифок после завершения вызова API.

Также мы создаем экземпляр клиента Giphy, используя ключ API из панели инструментов разработчиков. Нужно заменить строку ‘‘ на ключ API.

Вызов метода trending осуществляет запрос к Giphy. Первым передаваемым параметром является gifs. Он указывает, какие популярные элементы должны быть возвращены: гифки или стикеры. Второй параметр – это объект, предоставляющий необязательные параметры: limit (лимит), offset (смещение), rating (рейтинг) и fmt (формат).

Мы передадим только параметр limit, ограничив результаты 20 элементами. Этот вызов выполняется в созданном жизненном цикле компонента. Далее мы создадим элемент gif для отображения возвращенных результатов.

После перезагрузки приложение должно отобразить индикатор активности: