Для чого використовується Vue

Способи використання Vue

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

Автономний скрипт

Vue можна використовувати як окремий файл скрипта – крок складання не потрібно! Якщо у вас є бекенд-фреймворк, який вже рендерить більшу частину HTML, або логіка фронтенду не настільки складна, щоб виправдати крок складання, то це найпростіший спосіб інтегрувати Vue у ваш стек. У таких випадках можна розглядати Vue як більш декларативну заміну jQuery.

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

Вбудовані Web-компоненти

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

Односторінкові програми (SPA)

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

Vue надає основні бібліотеки та всебічну інструментальну підтримку з приголомшливим developer experience для створення сучасних SPA, включаючи:

Маршрутизатор на стороні клієнта
Неймовірно швидкий ланцюжок інструментів збирання
Підтримка IDE
Інструменти розробника у браузері
Інтеграція TypeScript
Утиліти для тестування

SPA зазвичай вимагають, щоб бекенд відкривав кінцеві точки API, але ви можете використовувати Vue у парі з такими рішеннями, як Inertia.js, щоб отримати переваги SPA, зберігаючи при цьому серверно-орієнтовану модель розробки.

Fullstack / SSR

Чисті SPA на стороні клієнта проблематичні, якщо програма чутлива до SEO і часу виведення контенту. Це пов'язано з тим, що браузер отримує практично порожню HTML-сторінку і змушений чекати, поки завантажиться JavaScript, перш ніж щось відобразити.

Vue надає першокласні API для "рендерінгу" програми Vue у HTML-рядку на сервері. Це дозволяє серверу відправляти назад вже відрендерований HTML, що дозволяє кінцевим користувачам бачити вміст одразу, поки завантажується JavaScript. Потім Vue "гідратує" додаток на стороні клієнта, роблячи його інтерактивним. Це називається Серверний рендеринг (SSR) та значно покращує такі показники Largest Contentful Paint (LCP).

На основі цієї парадигми побудовані більш високорівневі фреймворки на базі Vue, наприклад Nuxt, які дозволяють розробляти повнофункціональні програми з використанням Vue та JavaScript.

JAMStack / SSG

Серверний рендеринг може бути виконаний заздалегідь, якщо дані є статичними. Це означає, що ми можемо попередньо рендерувати всю програму в HTML і надавати її у вигляді статичних файлів. Це підвищує продуктивність сайту і спрощує розгортання, оскільки нам більше не потрібно динамічно рендерувати сторінки при кожному запиті. При цьому Vue все одно може "гідратувати" такі програми, забезпечуючи багату інтерактивність на клієнті. Ця техніка відома як Static-Site Generation (SSG), також відома як JAMStack.

Існує два різновиди SSG: односторінковий і багатосторінковий. В обох випадках сайт попередньо перетворюється на статичний HTML, різниця полягає в наступному:

Після початкового завантаження сторінки односторінковий SSG "гідратує" її до SPA. Це вимагає більшого попереднього навантаження на JS і витрат на гідратацію, але наступні переходи будуть швидше, оскільки потрібне лише часткове оновлення вмісту сторінки, а не перезавантаження всієї сторінки.
Багатосторінковий SSG завантажує нову сторінку при кожній навігації. Плюсом є те, що в ньому можна використовувати мінімум JS – або взагалі не використовувати JS, якщо сторінка не потребує взаємодії! Деякі багатосторінкові SSG-фреймворки, такі як Astro, також підтримують "часткову гідратацію" - це дозволяє використовувати компоненти Vue для створення інтерактивних "острівців" усередині статичного HTML.

Односторінкові SSG краще використовувати, якщо передбачається нетривіальна інтерактивність, більша тривалість сеансу або збереження елементів/стану під час переходу. В іншому випадку краще використовувати багатосторінкові SSG.

Команда Vue також підтримує генератор статичних сайтів під назвою VitePress, на якому працює цей сайт, який ви читаєте зараз! VitePress підтримує обидва варіанти SSG. Nuxt також підтримує SSG. Ви навіть можете змішувати SSR та SSG для різних маршрутів в одному додатку Nuxt.

За межами вебу

Хоча Vue в першу чергу призначений для створення веб-застосунків, його можливості в жодному разі не обмежуються тільки браузером. Ви можете:

створювати настільні програми за допомогою Electron
Створювати мобільні програми за допомогою Ionic Vue
Створювати настільні та мобільні програми з однієї кодової бази за допомогою Quasar або Tauri
Будівництво 3D WebGL з TresJS
Використовувати Vue Custom Renderer API для створення рендерів, орієнтованих на WebGL або навіть на термінал!

Що таке Vue: опис, застосування, плюси та мінуси

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

Фреймворки та бібліотеки у кожної мови програмування різні. У випадку з Java Script (JS) багато хто має справу з Vue.js. Далі необхідно вивчити відповідний інструмент якнайкраще. Потрібно з'ясувати, що він є, для чого і коли використовується, які переваги і недоліки має.Відповідна інформація стане в нагоді як досвідченим програмістам, так і розробникам-новачкам.

Що це таке

Vue, згідно з Google, називається фреймворком для розробки програмного забезпечення на JS. Він був створений у 2012 році. Розробником Vue виступає один із працівників Google. Популярність до цього фреймворку прийшла у 2015 році – після твіту Тейлора Отвелла – творця одного з найпопулярніших PHP-фреймворків (Laravel).

Vue – прогресивний фреймворк, який використовується для створення односторінкових веб-додатків та інтерфейсів користувача. Розробка відповідних проектів здійснюється мовою JavaScript. Vue, згідно з Google, вирішує завдання рівня представлення (view), а також робить процес взаємодії з бібліотеками при написанні кодів більш простим.

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

Області застосування

VueJS, згідно Google, широко застосовується в розробці найрізноманітнішого програмного забезпечення. Цей фреймворк використовується для створення:

швидких веб-сайтів та онлайн-додатків;
невеликих блогів різної тематики;
веб-сайтів із високим навантаженням: Інтернет-магазинів, інформаційних сервісів;
SPA-додатків (односторінкових додатків): соціальних мереж, CMS, мікроблогів-сервісів та подібних до них;
адаптивних інтерфейсів;
авторизаційних інтерфейсів;
онлайн-чатів;
всіляких форм заявок та зворотного зв'язку, а також інших функціональних блоків на сайтах та онлайн-сервісах;
розділів профілів (особистих кабінетів) та сторінок користувача.

Google вказує на те, що багато великих комерційних організацій користуються згаданим фреймворком як основа для фронтенду.До них можна віднести Ozon, Nintendo, Alibaba та інші відомі фірми.

Ще частіше VueJS використовується для формування окремих елементів. Їм користується навіть компанія Google.

Плюси та мінуси

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

До переваг VueJS можна віднести:

Найшвидшу розробку. Це пов'язано з тим, що фреймворк має все необхідне для програмування інтерфейсів, односторінкових проектів та сайтів з невеликим та середнім навантаженням.
Невелика вага файлів фреймворку.
Наявність документації різними мовами. За рахунок цього навіть недосвідчений програміст зможе швидко освоїти роботу з Vue.
Велика спільнота розробників. Серед них можна зустріти навіть російськомовних користувачів.
Можливість підключення та створення власних плагінів.
Швидка взаємодія з DOM.
Відповідний прийом робить вихідний код більш зрозумілим і читаним.
Наявність підтримки серверного рендеру.
Доступність: Згідно Google, Vue поширюється по MIT-ліцензії.

Google зазначає, що у Vue також є низка недоліків.

Невелика кількість професійних ресурсів. За межами vuejs org відшукати дані для роботи з інструментом, що вивчається, особливо російською, проблематично.
Неповну документацію російською мовою.Це створює проблеми з освоюванням інструменту, особливо розробниками-новачками. Закрити прогалини в офіційній документації допомагають відео-уроки та туторіали, але їх доведеться шукати самостійно.
Проблеми із гнучкістю. Вони виникають, згідно Google, при спробі інтегрувати інструмент, що вивчається, у великий проект. Оптимального вирішення цієї проблеми немає, тому доводиться користуватися «милицями». Розробники-початківці з відповідним нюансом зазвичай не стикаються. Це пов'язано з тим, що Vue рекомендується для невеликих та середніх проектів. А там проблем із гнучкістю зазвичай не виникає.

Основна інформація про Vue вивчена. Тепер можна краще познайомитися з його складом.

Пристрій фреймворку

Google підкреслює, що інструмент, що вивчається, включає в себе різноманітні складові. До них можна віднести:

компоненти. Програмне забезпечення складається із частин-компонентів. Так, згідно Google, називаються елементи із заданими параметрами та поведінкою. Вони прикріплюються до проекту за допомогою компілятора та розширюють базові HTML-елементи. Дають можливість їхнього подальшого багаторазового використання. Один компонент Vue framework здатний включати кілька інших. Тут має місце деревоподібна ієрархія.
Фільтри. Це інструменти представлення даних для їхньої фільтрації на рівні об'єктних моделей. Вони дозволяють здійснювати налаштування глобального доступу, покращувати представлення програми за рахунок контролю шару, форматувати дані на рівні представлення або безпосередньо в об'єктній моделі документа.
Директиви. Так Google описує спеціальні атрибути, які використовуються всередині HTML-шаблону компонента Vue для взаємодії з HTML-тегами та іншими компонентами.Вони зазвичай відзначаються буквою «v» на самому початку. Після неї ставиться дефіс та назва. Так, v-show використовується для забезпечення відображення елемента у відповідність до переданого значення, а v-if відповідає за відображення компонентів, але завжди залишається в DOM і змінює лише значення display в CSS.
Шаблони. Google описує їх як валідні HTML-коди, які прив'язують візуалізовану DON до бази даних Vue.
Переходи. Так називаються інструменти, які відповідають за реалізацію анімаційних ефектів для відмальованих, оновлених чи віддалених із DOM-елементів. Вони включають DOM-зміни через JS, підключення JS-бібліотек зі сторонніх джерел, автоматичне застосування класів для CSS-переходів та анімації, а також підключення бібліотек для CSS-анімації зі сторонніх джерел.

Google також вказує на те, що Vue має безліч додаткових інструментів, що формують екосистему фреймворку:

router – пакет, відповідальний забезпечення маршрутизації;
vuex – бібліотека та патерн управління станами;
devtools – плагін налагодження у браузері, який відображає наявність та стан різних компонентів;
CLI – інструмент командного рядка;
server-render – пакет серверного рендерингу компонентів у HTML-код з подальшим їх відправкою в браузер;
loader – плагін, що використовується для завантаження веб-пакетів, що дозволяє створювати Vue-компоненти в форматі SFC (однофайловому).

Швидше освоїти JS та Vue допоможуть дистанційні комп'ютерні курси. На них навіть недосвідченого ПК-користувача у найкоротші терміни навчать користуватися згаданою мовою та фреймворком на рівні професіонала.

Бажаєте освоїти сучасну IT-спеціальність? Величезний вибір курсів по затребуваним IT-напрямкам є в Otus!

Введення

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

Ось маленький приклад:

import
from
'vue'
createApp(

data() 

return


count:
0

>

>
>).mount('#app')

import
from
'vue'
createApp(

setup() 

return


count:
ref(0)

>

>
>).mount('#app')

div
id="app">

button
@click="count++">

Лічильник: >

button>
div>

Результат

Приклад вище демонструє дві основні фундаментальні особливості Vue:

Декларативне малювання: Vue розширює стандартний HTML синтаксисом шаблонів, що дозволяє декларативно описувати фінальний HTML на основі стану JavaScript.
Реактивність: Vue автоматично відстежує зміни стану JavaScript та ефективно оновлює DOM, коли відбуваються зміни.

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

У посібнику передбачається наявність знань HTML, CSS та JavaScript. Для новачків у фронтенд-розробці відразу починати вивчення з фреймворку може бути не найкращою ідеєю – повертайтеся, розібравшись із основами! Перевірити рівень своїх знань можна, наприклад, за допомогою цього огляду JavaScript. Наявність досвіду роботи з іншими фреймворками може допомогти, але не є обов'язковою.

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

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

Покращувати статичний HTML без додавання етапу збирання
Вбудовуватись як веб-компоненти на будь-якій сторінці
Односторінкові програми (SPA)
Fullstack / Зображення на стороні сервера (SSR)
Jamstack / Генерація статичного сайту (SSG)
Націленість на настільні, мобільні пристрої, WebGL і навіть термінали

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

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

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

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

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

script>
export
default


data() 

return


count:
0

>

>
>
script>
template>

button
@click="count++">Лічильник: >button>
template>
style
scoped>
button


font-weight:
bold;
>
style>

script
setup>
import
from
'vue'
const
count
=
ref(0)
script>
template>

button
@click="count++">Лічильник: >button>
template>
style
scoped>
button


font-weight:
bold;
>
style>

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

Стилі API

Компоненти Vue можна створювати за допомогою двох різних стилів: Options API і Composition API.

Options API

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

script>
export
default


// Властивості, що повертаються з data() стають реактивним

// Станом компонента і до них можна звертатися через `this`.

data() 

return


count:
0

>

>,

// Методи – це функції, які мутують стан і викликають оновлення.

// Вони можуть бути прив'язані як обробники подій у шаблонах.

methods:  

increment() 

this.count++

>

>,

// Хуки життєвого циклу викликаються різних етапах

// Життєвого циклу компонента.

// Ця функція буде викликана після встановлення компонента.

mounted() 

console.log(`Стартове значення лічильника - $this.count>.`)

>
>
script>
template>

button
@click="increment">Лічильник: >button>
template>

Composition API

Ось той же компонент, з таким самим шаблоном, але написаний з використанням Composition API і :

script
setup>
import
from
'vue'
// Реактивний стан
const
count
=
ref(0)
// функції, які мутують стан і викликають оновлення
function
increment() 

count.value++
>
// хуки життєвого циклу
onMounted(()
=>


console.log(`Стартове значення лічильника - $count.value>.`)
>)
script>
template>

button
@click="increment">Лічильник: >button>
template>

Який стиль вибрати?

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

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

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

Докладніше про порівняння двох стилів та потенційні переваги Composition API можна дізнатися в розділі Composition API FAQ.

Для новачків у Vue, ось загальна рекомендація:

Для навчання вибирайте той стиль, який здається більш зрозумілим. Знову ж таки, більшість основних концепцій є спільними для цих двох стилів. Завжди можна освоїти інший стиль пізніше.
Для використання в production:
- Вибирайте Options API якщо не використовуються інструменти збирання або при плануванні використовувати Vue в основному в сценаріях з низькою складністю, наприклад, для прогресивного поліпшення.
- Вибирайте Composition API + однофайлові компоненти, якщо плануєте створювати повноцінні програми за допомогою Vue.
На етапі навчання необов'язково дотримуватись лише одного стилю. В решті документації наводяться приклади коду в обох стилях, де це можливо, і можна в будь-який час перемикатися між ними за допомогою перемикача Вподобаний стиль API у верхній частині лівої бічної панелі.

Залишились питання?

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

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

У посібнику кожен аспект фреймворку розбирається докладно.

Для тих, хто вважає за краще вчитися на практиці.

Вивчіть приклади основних функцій та загальних завдань при розробці UI.