Vue.js — это фреймворк с открытым исходным кодом, который можно использовать для создания одностраничных приложений и пользовательских интерфейсов. Одной из его основных особенностей является создание компонентов, которые могут обновляться пользователем и которые позволяют обновлять веб-страницу в режиме реального времени в соответствии с введенной информацией.
Сегодня я собираюсь показать вам, как я создал динамический список задач, используя Vue с двумя разными компонентами: родительским компонентом, представляющим сам список задач и всю его информацию, и дочерним компонентом, представляющим одну задачу. Я также расскажу о связи между этими двумя компонентами для реагирования на пользовательские события.
Несмотря на то, что вам не нужны какие-либо предварительные знания Vue, чтобы следовать этой статье (она самодостаточна), она не предназначена для знакомства с Vue как фреймворком, потому что некоторые из его основных функций здесь не рассматриваются.
Прежде всего, давайте взглянем на веб-страницу, которую мы пытаемся создать. Его можно посетить здесь:
Это простая веб-страница, содержащая список задач, каждая из которых имеет описание, приоритет и флажок, чтобы отметить, выполнено ли оно уже или нет. Он также содержит кнопку для добавления новых задач и кнопку для отправки информации, которая просто распечатывает ее ниже.
Настройка основ: компоненты Vue
Компоненты — это повторно используемые экземпляры Vue, которые формируют структуру данных веб-страницы. Вы можете создать компонент, указав его свойства, некоторые данные, методы или HTML-шаблон. После того, как он будет создан, вы можете использовать его имя в качестве тега HTML в любом месте вашей страницы.
Родительский компонент: список задач
Например, давайте сначала определим простой компонент для представления нашего списка задач. Хотя код прокомментирован для удобочитаемости, подробности, касающиеся Vue, объясняются в следующих абзацах:
Здесь я создаю глобальный компонент (можно использовать где угодно) с именем task-item, который содержит некоторые данные (как функцию, это важно), методы для управления ими и шаблон. Функция data возвращает две задачи-заполнители внутри массива, а methods используются для добавления новых задач (при нажатии кнопки «Добавить новую задачу» на странице) и отправки информации, представленной в интерфейсе (в данном случае это печатает отправленные данные в разделе «Вы отправили» веб-страницы, но он также может отправлять данные через API с использованием библиотеки, такой как Axios, как это видно из комментариев).
Теперь, когда я определил этот компонент, я могу использовать HTML-тег task-list в любом месте документа. Затем Vue заменит этот элемент содержимым атрибута template, в данном случае переменной listTemplate, которая содержит:
Мы можем видеть здесь структуру списка задач, которую мы видели ранее на изображении веб-страницы, как класс группы списка Bootstrap (если вы не знаете Bootstrap, вам просто нужно знать, что этот класс используется для простого определения красивый список элементов).
Сначала сосредоточимся на кнопках «Добавить новую задачу» и «Отправить». Вы заметили HTML-атрибут @click? Это краткая форма v-on:click, которая определяет поведение при возникновении определенного события, в данном случае click события. При нажатии они запускают методы, определенные ранее в компоненте.
Мы также видим неизвестный тег HTML: task-item. Он перебирает список задач (содержащийся в массиве tasks, определенном в функции data) с директивой v-for. Эта директива создает отдельный элемент задачи для каждого элемента в массиве задач, а также имеет то преимущество, что она динамически обновляется. Также внутри этого элемента задачи есть несколько обработчиков некоторых событий (с предшествующим '@'), которые просто обновляют значение свойства каждой задачи на содержимое некоторой переменной event. Как вы, возможно, уже догадались, этот task-item — еще один компонент Vue, дочерний компонент.
Дочерний компонент: элемент задачи
Компонент task-item представляет одну задачу в нашем списке задач. Мы можем объявить это следующим образом:
В данном случае компонент проще, он просто содержит шаблон и свойства компонента: идентификатор, описание задачи, ее приоритет и выполнена ли она уже или нет. Эти свойства необязательны, работает и без их объявления, но улучшает читабельность кода.
Давайте теперь проанализируем содержимое шаблона для элемента задачи:
Он содержит ввод текста для ввода описания задачи, селектор для выбора приоритета и флажок, чтобы пометить его как выполненный. Он также содержит обработчики для прослушивания событий input и change. Единственное, что может показаться неясным, — это директива emit об обработчиках: она позволяет task-item взаимодействовать со своим родителем.
Связь между родительским и дочерним компонентами
Vue нужен способ привязать определенный элемент HTML, где пользователь может вводить данные (например, input или select, как мы использовали) к определенному свойству наших компонентов. Самый распространенный способ сделать это — использовать директиву v-bind:attribute="prop" (или ее короткую форму :attribute="prop", которая связывает значение attribute HTML-элемента, в котором он размещен, со свойством, определенным в данных компонента.
Например, если мы хотим связать свойство value первого HTML-элемента input со свойством desc элемента задачи, нам просто нужно поместить :value="desc" в элемент input. Мы не сделали этого таким образом, потому что это обновляет данные объекта, представляющего сам компонент (т. е. атрибут данных в компоненте task-item, который мы не объявляли, поэтому он не окажет никакого влияния на наш список задач), и это не изменит содержимое данных в родительском элементе. Это было бы полезно, если бы мы объявили данные внутри компонента task-item, но поскольку мы сделали это в родительском компоненте (полезно для обработки данных, например, для их отправки), мы должны использовать функцию emit для отправки данных вверх.
Функция emit используется для запуска пользовательского события для родительского компонента, необязательно с аргументом. Он получает два аргумента: имя запускаемого события и, необязательно, любое значение. В этом случае первый элемент ввода (текстовый, управляющий описанием задачи) генерирует событие change:desc с необязательным аргументом, установленным на текст, введенный пользователем ($event.target относится к самому элементу ввода, а value этого элемента — это текст, который он содержит).
Если вы помните из HTML-шаблона списка задач, это событие было перехвачено, и оно установило необязательное значение, полученное в качестве аргумента (внутри переменной $event), в свойство desc элемента. Это позволяет обновлять данные внутри списка задач, где мы это объявили.
Эта связь родитель-потомок позволяет вам объявлять и манипулировать данными в родительском компоненте, упрощая, например, добавление новых задач на страницу (просто отправляя их в массив) или отправляя данные через API.
Vue.js — это мощная библиотека, которая позволяет вам легко реагировать на пользовательский ввод в режиме реального времени. В этой статье мы рассмотрели особенности связи между иерархией компонентов. Это позволяет нам хранить данные наиболее удобным способом для манипулирования ими. Но это лишь одна из особенностей Vue. Если вы хотите узнать больше, обратитесь к документации или к некоторым учебным пособиям, доступным в Интернете (мне пригодился бесплатный вводный курс на vueschool.io).
Спасибо за чтение! Надеюсь, этот пост был полезен для вас. Если у вас есть какие-либо комментарии или предложения, или вы просто хотите сообщить мне что-то, не стесняйтесь делать это в разделе комментариев к сообщению. Если вам понравилось, и вы хотели бы поддержать мою работу, подумайте о том, чтобы угостить меня кофе! Это очень помогло бы!
