Натисніть тут, щоб перейти на документацію по v3.x.

Посібник

Ви переглядаєте документацію для v2.x та раніших версій. Натисніть тут, щоб перейти на документацію по v3.x.

Вступ

Що таке Vue.js?

Vue (промовляється як в’ю) є прогресивним фреймворком для розробки користувацьких інтерфейсів. На відміну від інших монолітних фреймворків, Vue був розроблений з нуля щоб бути постійно пристосовуваним. Основна бібліотека сфокусована лише на шарі відображення, що надає змогу легкої інтеграції з іншими бібліотеками та існуючими проектами. З іншої сторони, Vue також готовий бути основою як простих SPA, так і складних додатків в комбінації із сучасними інструментами та підтримуючими бібліотеками.

Якщо ви бажаєте дізнатися більше про Vue перед поглибленням усередину, ми створили відео, яке розповідає про основні принципи на прикладі простенького проекту.

Якщо ж ви frontend-розробник з досвідом та бажаєте дізнатися про Vue в порівнянні з іншими бібліотеками/фреймворками, перегляньте Порівняння з іншими фреймворками.

Переглянути безкоштовний відео курс на Vue Mastery

Починаємо

Встановлення

Офіційний посібник передбачає середній рівень знант HTML, CSS та JavaScript. Якщо ви зовсім нещодавно у frontend-розробці, це може бути не найкращою ідеєю для вивчення фреймворку в якості Вашого першого кроку — опануйте основи та повертайтеся до нас! Попередній досвід з іншими фреймворками є корисним, але зовсім не обов’язковий.

Найлегший спосіб спробувати Vue.js — переглянути приклад “Привіт Світ” на JSFiddle. Відкрийте цей приклад в новій вкладці та слідкуйте далі за тим, як ми будемо давати деякі приклади. Або ж, ви можете створіть файл index.html та додайте Vue наступним чином:

<!-- версія для розробників, включає в себе корисні повідомлення про помилки в консолі -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

або:

<!-- продакшн-версія, оптимізована в швидкості та розмірі -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Сторінка по встановленню містить більше налаштувань по встановленню Vue. Примітка: Ми не рекомендуємо початківцям використовувати vue-cli, особливо, якщо ви ще не познайомилися з інструментами компіляції на Node.js.

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

Декларативне промальовування

Пройти урок на Scrimba

Основою Vue.js є система, яка дозволяє декларативно промальовувати дані в DOM, використовуючи зрозумілий синтаксис шаблону:

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Привіт, Vue!'
  }
})
{{ message }}

Ми щойно створили наш перший додаток на Vue! Як бачите, процес є досить схожим до роботи з шаблонами рядків, але з Vue додатково ще вионується чимало роботи під капотом. Дані та DOM тепер зв’язані, та все тепер є реактивним. Як це перевірити? Відкрийте консоль браузера (на цій сторінці, поки що) та запишіть в app.message якесь інше значення. ви маєте побачити, що відбулося автотичне промальовування відповідно до того, що ви ввели.

Зауважте, що нам більше не потрібно взаємодіяти напряму з HTML. Додаток на Vue прикріплює себе до DOM елементу (#app в нашому випадку) для повного контролю над ним. HTML
є нашою єдиною точкою входу, але все інше відбувається в межах новоствореного екземпляру Vue.

Крім текстової інтерполяції, ми також можемо зв’язати атрибути елементу наступним чином:

<div id="app-2">
  <span v-bind:title="message">
    Наведіть вказівник мишки поверх мене на кілька секунд,
    щоб побачити динамічно зв'язаний title!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'Ви завантажили цю сторінку о ' + new Date().toLocaleString()
  }
})
Наведіть вказівник мишки поверх мене на кілька секунд, щоб побачити динамічно зв'язаний title!

Тут ми спостерігаємо щось нове. Атрибут v-bind, який ви бачите, називається директивою. Директиви мають префікс v-, щоб вказати, що вони є спеціальними атрибутими, яке надає нам Vue, і що, як ви вже певно здогадались, вони застосовують спеціальну реактивну поведінку до промальовуваного DOM. Тут ми буквально кажемо “оновлюй атрибут title елемента, як тільки зміниться властивість message на екземплярі Vue.”

Якщо ви знову відкриєте JavaScript консоль та введете app2.message = 'це так легко', ви знову побачите, що зв’язаний HTML - в цьому випадку це атрибут title — змінився.

Умови та цикли

Пройти урок на Scrimba

Так ж легко перемикати присутність елемента:

<div id="app-3">
  <span v-if="seen">Тепер мене видно</span>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
Тепер мене видно

Не зупиняйтеся та введіть app3.seen = false в консолі. ви помітите, що повідомлення зникло.

Це приклад ілюструє, що ми можемо зв’язувати дані не тільки до текстових атрибутів, але також до самої структури DOM. Більше того, Vue надає нам потужну систему ефектів переходів, які автоматично можуть задіювати переходи, коли елементи додаються, оновлюються чи видаляються Vue.

Існує чимало інших директив, кожна з яких має свою власну функціональність. Для прикладу, директива v-for може бути використана для відображення списку елементів, використовуючи дані з масиву:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Вивчити JavaScript' },
      { text: 'Вивчити Vue' },
      { text: 'Створити щось круте' }
    ]
  }
})
  1. {{ todo.text }}

В консолі, змініть масив, ввівши app4.todos.push({ text: 'Посадити дерево' }). Ви маєте побачити, що нову ціль додано до списку цілей.

Обробка користувацького введення

Пройти урок на Scrimba

Щоб користувачі мали змогу взаємодіяти з додатком, ми можемо використовувати директиву v-on для закріплення обробників подій на нашому екземплярі Vue.

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Реверсувати напис</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Привіт, Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

{{ message }}

Зауважте, що в цьому методі ми оновлюємо стан нашого додатку, не зачіпаючи DOM - всі маніпуляції з ним виконуються через Vue, та при написанні коду ви зосереджені лише на логіку в основі.

Vue також надає нам директиву v-model, яка задіює, так звану, двонаправлене зв’язування з елементом введення форми та станом додатку дуже просто:

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Привіт, Vue!'
  }
})

{{ message }}

Робота з компонентами

Пройти урок на Scrimba

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

Дерево компонентів

У Vue, компонентом є екземпляр Vue з заданими певними налаштуваннями. Реєстрація компоненти у Vue є досить простою:

// Оголошуємо нову компоненту з назвою todo-item
Vue.component('todo-item', {
  template: '<li>Якась задача</li>'
})

var app = new Vue(...)

Тепер ви можете використати її в шаблоні іншої компоненти:

<ol>
  <!-- Створити екземпляр компоненти todo-item -->
  <todo-item></todo-item>
</ol>

Але це б промалювало той ж самий текст для кожної задачі, що не є дуже цікавим. Було б супер, якби ми могли передавати дані з батьківської компоненти в дочірню. Давайте змінимо оголошення компоненти так, щоб вона приймала властивість:

Vue.component('todo-item', {
  // Тепер компонента todo-item приймає властивість,
  // яка є спеціальним атрибутом.
  // Давайте назвемо нашу властивість todo.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

Ось тепер ми можемо передавати задачу в кожну таку компоненту, використовуючи v-bind.

<div id="app-7">
  <ol>
    <!--
      Тут ми передаємо кожній компоненті todo-item об'єкт,
      в якій знаходиться задача, щоб зробити її вміст динамічним.
      Ми повинні також вказувати для кожної компоненти
      спеціальний атрибут "key", про який ми поговоримо пізніше.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Овочі' },
      { id: 1, text: 'Сир' },
      { id: 2, text: 'Щось інше, придатне для їжі' }
    ]
  }
})

Звичайно, це надуманий приклад, але головне те, що ми змогли розбити наш додаток на дрібніші частинки, дочірня компонента є досить незалежною від батьківської через інтерфейс властивостей. Тепер ми можемо навіть вдосконалити нашу компоненту <todo-item>, додавши більше складої логіки та змінивши шаблон без жодного впливу на батьківську.

У великих додатках, розділення на компоненти є обов’язковим — це покращує їх обслуговування. В цьому посібнику ми ще обов’язково розглянемо компоненти більш глибше пізніше, але давайте поглянемо ще на один (теж уявний) приклад того, як ще може виглядати додаток з іншими компонентами:

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

Відношення до специфікації Веб Компоненти

Ви могли помітити, що компоненти Vue дуже схожі до Веб Компонент, які є частиною специфікації Веб Компонент. Це все тому, що синтаксис компонент Vue був навмисне дещо пов’язаний з даною специфікацією. Для прикладу, компоненти Vue слідують за Slot API та спеціальним атрибутом is. Разом з тим, все ж є кілька відмінностей:

  1. Роботу над специфікацією було закінчено, але вона не була задіяна нативно в кожному браузері. Safari 10.1+, Chrome 54+ та Firefox 63+ підтримують веб-компоненти нативно. В порівнянні, компоненти Vue не потребують жодних поліфілів та працюють однаково в усіх підтримуваних браузерах (IE9 та вище). Коли потрібно, компоненти Vue також можуть бути обгорнуті всередині нативної користувацької веб-компоненти.

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

Хоч Vue і не використовує користувацькі веб-компоненти внутрішньо, але у Vue є прекрасна з ними сумісність, коли це стосується розповсюдження Vue-компонентів як користувацьких веб-компонентів. Vue CLI також підтримує компіляцію компонентів Vue, які автоматично себе реєструють як нативні користувацькі веб-компоненти.

Готові до більшого?

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

← Встановлення Vue екземпляр →
Помітили помилку або бажаєте долучитися до перекладу документації? Відредагуйте цe на GitHub! Сайт працює на платформі Netlify .