Skip to main content

Що таке шаблон компонента?

VueJunior~1 хв читання
Запропонувати правку

Шаблон компонента (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> <script setup> import { ref } from 'vue' 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> <script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script> <style scoped> .counter { padding: 10px; } </style>

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

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

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

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

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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