Из чего состоит компонент Vue

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

Компонент Vue состоит из трёх основных частей, которые вместе образуют полнофункциональный модуль пользовательского интерфейса.

Template (Шаблон)

Template — это декларативная часть компонента, отвечающая за разметку и структуру. В нём вы описываете, какой HTML будет отрендерен на экране.

<template>
  <div class="greeting">
    <h1>{{ message }}</h1>
    <button @click="increment">Счётчик: {{ count }}</button>
  </div>
</template>

В template используются:

• Интерполяция {{ }} для вывода данных
• Директивы (v-if, v-for, v-bind, @click) для управления DOM
• Event binding для обработки событий
• Двусторонняя привязка (v-model) для форм

Script (Логика компонента)

Script — это JavaScript-часть компонента, которая содержит бизнес-логику и управление состоянием.

<script setup>
import { ref } from "vue";

const message = ref("Привет, Vue!");
const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

В modern Vue (версия 3+) используется синтаксис <script setup>, который предоставляет:

• Реактивные переменные через ref() и reactive()
• Computed свойства для производных данных
• Методы для обработки событий
• Жизненные циклы (onMounted, onUnmounted и т.д.)
• Импорты и экспорты всё сразу доступны в template

Style (Стили)

Style — часть с CSS, которая стилизует компонент. Может быть как обычный CSS, так и SCSS, PostCSS.

<style scoped>
.greeting {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

h1 {
  color: #333;
  font-size: 24px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>

Атрибут scoped гарантирует, что стили применяются только к этому компоненту и не влияют на другие.

Полный пример компонента

<template>
  <div class="counter">
    <p>Текущее значение: {{ count }}</p>
    <button @click="decrement">-</button>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const count = ref(0);

const isPositive = computed(() => count.value > 0);

const increment = () => count.value++;
const decrement = () => count.value--;
</script>

<style scoped>
.counter {
  display: flex;
  gap: 10px;
  align-items: center;
}

button {
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}
</style>

Итог

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