Вступ ​

Вивчайте Vue з відео курсами на VueMastery.com

Що таке Vue? ​

Vue (вимовляється як (англ.) /vjuː/, (укр) /в'ю/) — це фреймворк, який працює на JavaScript, створений для розробки користувацьких інтерфейсів. Він працює на базі звичайного HTML, CSS та JavaScript, з можливостями декларативно програмувати користувацькі інтерфейси будь-якої складності на основі компонентів.

Найпростіший приклад:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Рахунок: {{ count }}
  </button>
</div>

Результат

Наведений вище приклад демонструє дві основні функції Vue:

• Декларативний рендеринг: Vue розширює стандартний HTML шаблонним синтаксисом, який дозволяє нам декларативно задавати структуру HTML на основі стану описаного у JavaScript.

• Реактивність: Vue автоматично відстежує зміни стану описаного у JavaScript і з максимальною ефективністю оновлює DOM, коли відбуваються зміни.

Можливо, у вас вже є запитання – не хвилюйтеся. Ми розглянемо кожну деталь в наступних розділах документації. Наразі, будь ласка, прочитайте розділ повністю, щоб ви могли мати високорівневе розуміння того, що пропонує Vue.

Прогресивний фреймворк ​

Vue — це фреймворк та екосистема, яка охоплює більшість функцій, необхідних для розробки інтерфейсу. Але веб додатки надзвичайно різноманітні – речі, які ми створюємо в рамках веб додатків, можуть кардинально відрізнятися за формою та масштабом. Зважаючи на це, Vue розроблено таким чином, щоб бути гнучким і адаптивним. Залежно від вашого випадку та задач, Vue можна використовувати різними способами:

• Розширення статичного HTML
• Вбудовування як веб компонента на будь-яку сторінку
• Створення одно-сторінкового додатку (SPA)
• Фулстек / Додаток з рендерингом на стороні серверу (SSR)
• Jamstack / Генерація статичного додатку (SSG)
• Створення десктопних, мобільних, WebGL додатків і навіть додатків для термінала

Якщо ви вважаєте ці концепції важкими для розуміння, не хвилюйтеся! Гід і посібник вимагають лише базових знань HTML і JavaScript, і ви повинні бути в змозі зрозуміти їх, не бувши експертом з HTML чи JavaScript.

Якщо ви досвідчений розробник, зацікавлений у тому, як найкраще інтегрувати Vue у свій стек, або вам цікаво, що означають ці терміни, ми докладніше обговоримо їх у Способах використання Vue.

Не дивлячись на гнучкість фреймворку, основні знання про те, як працює Vue, можуть бути застосовані спільно для всіх цих варіантів використання Vue. Навіть якщо ви зараз лише новачок, знання, отримані на цьому шляху, залишаться корисними, коли ви зростатимете, щоб вирішувати амбітніші цілі в майбутньому. Якщо ви досвідчений розробник, ви можете обрати оптимальний спосіб використання Vue на основі проблем, які ви намагаєтеся вирішити, зберігаючи ту саму продуктивність. Ось чому ми називаємо Vue «Прогресивним фреймворком»: це фреймворк, який може рости разом з вами та адаптуватися до ваших потреб.

Однофайлові компоненти ​

У більшості проєктів Vue, що використовують інструменти збірки та потребують етапу збірки, ми створюємо компоненти Vue, використовуючи HTML-подібний формат файлу під назвою Single-File Component (також відомий як файли *.vue, скорочено SFC). Vue SFC, як випливає з назви, інкапсулює логіку компонента (JavaScript), шаблон (HTML) і стилі (CSS) в одному файлі. Ось попередній приклад, написаний у форматі SFC:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Лічильник: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

SFC є однією з основних функцій Vue і рекомендованим способом створення компонентів Vue, якщо ваша задача вимагає використання інструментів збірки. Ви можете дізнатися більше як і навіщо використовувати SFC у спеціальному розділі, але наразі знайте, що Vue впорається з усіма налаштуваннями інструментів збірки за вас автоматично.

Стилі API ​

Компоненти Vue можна створювати в двох різних стилях API: Опційному АРІ і Композиційному API.

Опційний API ​

За допомогою Опційного API ми визначаємо логіку компонента за допомогою об'єкта параметрів таких як data, methods і mounted. Властивості, визначені параметрами, виділяються у внутрішні функції this, що своєю чергою вказує на екземпляр компонента:

<script>
export default {
  // Властивості, повернуті з data(), переходять у реактивний стан
  // та виділяються у `this`.
  data() {
    return {
      count: 0
    }
  },

  // Методи — це функції, які змінюють стан і ініціюють оновлення.
  // Їх можна прив'язати як обробники подій у шаблонах.
  methods: {
    increment() {
      this.count++
    }
  },

  // Хуки життєвого циклу викликаються на різних етапах
  // життєвого циклу компонента.
  // Ця функція буде викликана під час монтування компонента.
  mounted() {
    console.log(`Початковий рахунок: ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Рахунок: {{ count }}</button>
</template>

Спробуйте у Пісочниці

Композиційний API ​

За допомогою Композиційного API ми визначаємо логіку компонента за допомогою імпортованих функцій API. У SFC Композиційного API зазвичай використовується з <script setup>. Атрибут setup — це підказка, яка змушує Vue виконувати перетворення під час компіляції, що дозволяє нам використовувати Композиційний API з меншою кількістю повторюваного шаблонного коду. Наприклад, імпортовані функції та змінні/функції верхнього рівня, оголошені в <script setup>, можна безпосередньо використовувати в шаблоні SFC.

Ось той самий компонент із тим самим шаблоном, але з використанням Композиційного API та <script setup>:

<script setup>
import { ref, onMounted } from 'vue'

// реактивний стан
const count = ref(0)

// функції, що змінюють стан і запускають оновлення
function increment() {
  count.value++
}

// хуки життєвого циклу
onMounted(() => {
  console.log(`Початковий рахунок: ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Рахунок: {{ count }}</button>
</template>

Спробуйте у Пісочниці

Що вибрати? ​

Обидва стилі API цілком здатні охопити стандартні випадки використання. Це різні інтерфейси, які працюють від однієї й тієї ж основної системи. Фактично, Опційний API реалізовано поверх Композиційного API! Основні концепції та знання про Vue спільні для обох стилів.

Опційний API побудовано навколо концепції «екземпляра компонента» (this, як показано в прикладі), який зазвичай краще узгоджується з розробкою на основі класу для користувачів, які мають досвід ООП. Він також більш зручний для початківців, оскільки абстрагується від деталей реактивності та забезпечує організацію коду через групи параметрів.

Композиційний API, своєю чергою, побудовано навколо концепції оголошення реактивних змінних безпосередньо в області функції та компонуванні єдиного реактивного стану з множини функцій, що підійде для складніших компонентів/випадків. Цей стиль має менше обмежень та потребує розуміння того, як реактивність працює у Vue, щоб ефективно використовувати її. Своєю чергою, гнучкість цього стилю забезпечує більш потужні можливості повторного використання та організації логіки.

Ви можете ознайомитись з більш детальним порівнянням двох стилів та потенційними перевагами Композиційного API у FAQ щодо Композиційного API.

Якщо ви тільки знайомитесь з Vue, ось наша загальна рекомендація:

• З метою навчання використовуйте стиль, який вам здається легшим для розуміння. Знову ж таки, більшість основних концепцій спільні для двох стилів. Ви завжди можете обрати інший стиль пізніше.

• Для комерційних проєктів:

  • Використовуйте Опційний API, якщо ви не користуєтеся інструментами збірки або плануєте використовувати Vue переважно в додатках низької складності.

  • Використовуйте Композиційний API + Single-File Components, якщо плануєте створювати повноцінні програми за допомогою Vue.

На етапі навчання вам не потрібно дотримуватися лише одного стилю. Решта документації містить зразки коду в обох стилях, де це можливо, і ви можете будь-коли перемикатися між ними за допомогою перемикача параметрів API у верхній частині лівої бічної панелі.

Все ще є запитання? ​

Перегляньте наші FAQ.

Виберіть свій стиль навчання ​

Різні розробники мають різні стилі навчання. Не соромтеся вибрати стиль навчання, який відповідає вашим уподобанням, хоча ми рекомендуємо переглянути всю документацію, якщо це можливо!