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

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

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

По сути, как минимум один компонент есть в нашем Vue приложении, с которым мы будем работать.

Что же такое Vue компонент?

Это отдельная логическая область (кирпичик, модуль), из которых состоит наш User Interface (пользовательский интерфейс).

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

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

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

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

Техническое представление компонента Vue.

Технически компонент представляет собой область, которая состоит из трех частей: разметка, скрипты, стили. 

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

Скрипты - это Javascript код, который отвечает у нас за автоматизацию всего процесса. Логика компонента, обработчики событий, дополнительная логика.

Стили отвечают за оформление отдельных элементов компонента. Оформление кнопок, отдельных блоков. Раскрасить что-то, увеличить размер, шрифт и.т.д. 

Преимущества компонентов

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

Благодаря свойствам мы можем менять внешний вид, содержимое компонента. Главная идея в том, что компоненты позволяют нам тиражировать код и не повторять самим себя. 

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

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

Компоненты Vue на уровне кода.

На уровне кода компоненты очень похожи на html элементы. 

<Element atr1="value1" atr2="value2"></Element>

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

Вот такое теоретическое введение по работе с Vue компонентами, давайте на этом завершим и будем переходить к практике.