В предыдущих двух частях этого руководства мы обсудили первоначальную настройку Vue CLI, как настроить маршрутизацию и управление состоянием, а также создали две страницы приложения. В этой части мы создадим компоненты.
Это обзор учебника:
- "Начальная настройка"
- Маршрутизация и управление состоянием
- "Компоненты"
- Необязательно: Сохраняющееся состояние и извлеченные уроки
В конце этого урока у нас будет классное приложение покедекс, которое показывает первых 151 покемонов, и вы сможете искать записи покедексов ваших любимых покемонов.
Компоненты
Нам понадобятся следующие компоненты:
- Список, который показывает доступных покемонов
- Список любимых покемонов
- Карточка, на которой изображен отдельный покемон
Давайте проверим, что мы получим от PokéAPI. При запросе первых 151 покемонов со следующим запросом
https://pokeapi.co/api/v2/pokemon?limit=151
Мы получим длинный список имен покемонов с их URL-адресами для получения дополнительной информации о покемонах.
В папке компонентов удалите HelloWorld.vue и создайте следующие файлы PokemonList.vue, SummaryFavorites.vue и PokemonCard.vue.
Я могу себе представить, что эти фрагменты кода могут выглядеть немного ошеломляющими. Между тегами template есть HTML, но со странными атрибутами, такими как v-if и v-for. Они называются directives в Vue. Директива — это специальный токен в разметке, который говорит Vue что-то сделать с элементом DOM.
v-if делает части шаблона рендерингом условно (именно поэтому есть еще v-else). v-for позволяет зацикливаться на элементах для их рендеринга, поэтому нет необходимости писать все вручную в HTML.
@click запускает функцию после того, как событие click запускается для этого конкретного элемента. Вы можете задаться вопросом, почему перед некоторыми атрибутами стоит :. Это ярлык для v-bind, который позволяет вам использовать выражения javascript для передачи данных в атрибут.
И самое главное здесь, конечно же, интерполяция текста скобками{{ }}
Вы можете использовать скобки в каждом элементе HTML, где вы можете определить текст. Все, что заключено в скобки, будет прочитано как выражение javascript. Таким образом, вы можете визуализировать данные из экземпляра Vue внутри шаблона.
В шаблоне сценария data содержит свойства, принадлежащие экземпляру Vue. props — это свойства, которые экземпляр Vue получает от других компонентов, которые его вызывают. Здесь мы можем определить, какой тип мы ожидаем в качестве свойства и требуется ли он от компонента, который нас вызывает.
methods содержит только функции, известные и доступные в этом экземпляре Vue, и любая функция, зарегистрированная как свойство computed, является специальной функцией, которую можно использовать в качестве переменной. Значение свойства будет автоматически обновляться при изменении его зависимостей.
Как упоминалось ранее, существуют хуки жизненного цикла Vue, такие как created, для выполнения методов в нужное время в течение «жизненного цикла» экземпляра Vue. Например, другие хуки жизненного цикла — это beforeUpdate и beforeDestroy. Это позволяет вызывать метод всякий раз, когда обновляется экземпляр Vue (может пригодиться при отладке).
Обновите страницы
Теперь мы можем обновлять страницы, импортируя компоненты и передавая им данные.
Обновите home.vue и favorites.vue следующим образом.
Мы импортируем компоненты на страницы и регистрируем их как компоненты страницы. Затем мы используем компоненты, названные при импорте, в качестве элементов HTML в шаблоне. Это место в DOM, где они будут отображаться (в случае home.vue как дочерний элемент div с классом select-pokemon-page). Мы даем компонентам обещанные prop данные, как мы определили в компонентах, и мы сопоставляем генерируемые события с методами, известными странице. Как упоминалось ранее, с помощью mapState страница получает определенные данные из объекта состояния Vuex. Используя mapActions, мы можем инициировать определенные действия из хранилища Vuex. Все сопоставленные действия будут доступны как методы на this. Именно поэтому мы можем использовать методы прямо в шаблоне.
Теперь ваше приложение должно выглядеть как на скриншотах. Откройте свое приложение в браузере и выберите какого-нибудь покемона. Ваше приложение должно выглядеть следующим образом после выбора 10 покемонов.
Если вы хотите, вы можете добавить страницу входа, как в моем репозитории, но это не обязательно для покедекса. В моем репозитории мне пришлось реализовать проверку пароля как часть задания 😉
В последней части руководства я расскажу о постоянном состоянии приложения (ваши данные будут по-прежнему доступны после перезагрузки страницы) и об уроках, извлеченных при создании этого проекта. 💡
