Начало работы с компонентами Vue

Завершено

По определению компонент — это "часть или элемент целого". Создавая приложение, вы, как правило, работаете с небольшими частями и объединяете их в единое целое — ваше приложение. Vue позволяет создавать компоненты, которые затем можно использовать для создания полного приложения.

Компоненты Vue

Хотя компоненты можно создавать с помощью файлов JavaScript, наиболее распространенным методом является создание однофайловых компонентов с помощью синтаксиса Vue во VUE-файле. Однофайловые компоненты обеспечивают более понятную структуру и более автономную установку. Они даже позволяют использовать различные предварительные обработчики, например Pug или Stylus.

При создании компонентов фактически создаются новые теги, которые можно использовать в приложении так же, как обычные теги HTML. Эта форма семантических тегов объясняет, что отображается на странице. Тег, например <booking-form></booking-form>, скорее всего, будет отображать форму для создания бронирования, а <booking-list></booking-list>, скорее всего, будет отображать список бронирований.

Структура компонента Vue

Компоненты Vue содержат три основных раздела: style, script и template.

style

Раздел style может содержать любой допустимый CSS или синтаксис любого предварительного обработчика, который вы используете.

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

<style>
.demo {
    font-family: Verdana
}
</style>

Скрипт

В разделе script хранится скрипт, используемый для компонента. Как и в случае с компонентом Vue JavaScript, можно экспортировать различные свойства и методы Vue, такие как data(), methods и components.

<script>
export default {
    data() {
        return {
            product: {
                name: 'Cruise to the moon',
                description: 'A cool cruise to the moon!'
            }
        }
    }
}
</script>

JSON

Раздел template содержит шаблон HTML, который следует использовать для отображения информации и предоставления пользователю возможности взаимодействия с данными. При использовании компонента на основе JavaScript template обычно находится внутри HTML-файла или является строковым литералом в файле JavaScript.

Синтаксис HTML, используемый в template, аналогичен использованию компонентов на основе JavaScript, включая использование handlebars ({{}}) для вывода данных.

<template>
  <div id="product">
    <div>{{ product.name }}</div>
    <div>{{ product.description }}</div>
  </div>
</template>

Примечание.

Шаблоны должны иметь один корневой элемент. То есть элемент div, для которого product имеет значение id, не может иметь элементы того же уровня. Он может иметь только дочерние элементы, как показано в предыдущем коде.

Загрузка и компоненты

Как было отмечено ранее, однофайловые компоненты сохраняются с расширением .vue. Эти компоненты можно загрузить так же, как и другие модули, — с помощью инструкции import. Их можно зарегистрировать с помощью свойства components. После регистрации компоненты становятся доступными для использования в качестве тега внутри template.

Примечание.

При импорте библиотеки с помощью import можно использовать PascalCase в качестве имени, где первая буква каждого слова прописная (например, PascalCase). Но в HTML соглашение для имен тегов предписывает использовать кебаб-стиль, где все слова написаны в нижнем регистре и разделяются дефисами (-). Vue будет автоматически управлять двумя различными соглашениями.

<template>
<product-display></product-display>
</template>
<script>
import ProductDisplay from './ProductDisplay.vue'
export default {
    components: {
        ProductDisplay
    }
}

В приведенном выше коде компонент ProductDisplay импортируется и добавляется в свойство components. Затем, когда ProductDisplay используется в шаблоне, компилятор Vue может сообщить, что этот компонент нужно проанализировать, это необычный HTML-элемент.

Разделение задач

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

Однофайловые компоненты позволяют создавать отдельные файлы для разделов script и style с помощью атрибута src.

<template>
    <div>Hello, world</div>
</template>
<script src="./hello.js"></script>
<style src="./style.css"></style>