Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке шаблон компонента?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Шаблон компонента** (template) - це **частина Vue-компонента, яка описує його HTML-структуру**, тобто те, як компонент виглядає на екрані.

Це декларативний спосіб вказати, **який інтерфейс потрібно відобразити**, використовуючи:

- звичайний HTML,
- директиви Vue (`v-if`, `v-for`, `v-model`),
- вирази (`{{ }}`),
- інші компоненти.

Простіше кажучи:
**шаблон - це "верстка" компонента, пов'язана з його даними і логікою.**

---

## Де оголошується шаблон?

У Single File Component (SFC) - у блоці `<template>`:

```javascript
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="count++">Clicked {{ count }} times</button>
  </div>
</template>
```

У цьому шаблоні:

- `{{ title }}` і `{{ count }}` - прив'язуються до стану в `<script>`
- `@click="count++"` - реактивна подія
- `<div>` і `<button>` - звичайний HTML

---

## Як шаблон пов'язаний з логікою?

У шаблоні ми можемо використовувати **дані, обчислювані властивості, методи, пропси**, оголошені в `<script>`.

Приклад:

```javascript
<template>
  <p>Hello, {{ name }}</p>
  <button @click="sayHi">Say Hi</button>
</template>

const name = ref('Timur')

function sayHi() {
  console.log(`Hi, ${name.value}!`)
}
</script>
```

Шаблон "бачить" усі змінні з `<script setup>`.

---

## Які можливості є у шаблону?

#### Інтерполяція даних

```javascript
{{ message }}
```

#### Директиви

```javascript
<div v-if="isVisible"></div>
<li v-for="item in items">{{ item }}</li>
<input v-model="text">
```

#### Прив'язки

```javascript
<img :src="imageUrl">
<button :disabled="isLoading">Save</button>
```

#### Події

```javascript
<button @click="handleClick"></button>
```

#### Слоти

```javascript
<Modal>
  <template #header>Title</template>
</Modal>
```

#### Використання інших компонентів

```javascript
<UserCard :user="user" />
```

---

## Альтернативи шаблону

У Vue можна використовувати **render-функцію** (JS замість HTML), але у 99% випадків використовують `<template>`, оскільки він:

- простіший,
- зрозуміліший,
- коротший,
- підтримує підсвітку і автодоповнення.

---

## Приклад цілого компонента з шаблоном

```javascript
<template>
  <div class="counter">
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

const count = ref(0)

function increment() {
  count.value++
}
</script>

---

## Підсумок (шпаргалка)

**Шаблон компонента (template)** - це структура HTML-розмітки компонента, у якій використовуються:

- дані зі скрипта,
- директиви,
- події,
- реактивні вирази,
- слоти,
- інші компоненти.

Він визначає, **як компонент виглядає** і **як реагує на зміни даних**.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати351 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.