Основні компоненти Vue.js

Основні компоненти Vue.js використовуються для створення та керування структурою додатка. Розглянемо їх під заголовками:

1. Vue Instance (Екземпляр Vue)

Екземпляр Vue, який є основою додатка Vue.js, створюється як корінний компонент застосунку і ініціалізується за допомогою new Vue.

var app = new Vue( {  
el: '#app',  
data: {  
 message: 'Привіт Vue!'  
 }  
});

el: Вказує на DOM елемент, з яким зв'язується екземпляр Vue.

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

1. Templates (Шаблони)

Vue.js маніпулює DOM за допомогою HTML-подібних шаблонів. Шаблони дозволяють використовувати дані та методи екземпляра Vue для створення динамічного контенту.

    {{ message }}   

{{ message }}: Виводить значення message з екземпляра Vue на екрані.

1. Directives (Директиви)

Директиви — це спеціальні HTML-атрибути, які додають Vue.js специфічну поведінку на DOM. Вони починаються з префікса v-.

**v-bind:** Прив'язує HTML атрибути до даних Vue.


**v-model:** Створює двостороннє з'єднання між даними Vue та елементами форми.

{{ item }}

**v-for:** Створює цикл для ітерації списку.

Горить
Не горить

**v-if / v-else:** Показує або приховує DOM елементи на основі умов.

Тискни
```
v-on: Слухає DOM події та виконує вказану функцію.

1. Components (Компоненти)

Vue.js дозволяє розділяти додаток на менші, повторно використовувані компоненти. Кожен компонент може мати свій шаблон, дані та методи.

Vue.component('my-component', {
template: 'Це компонент!'
});

Props: Використовується для передачі даних ззовні до компонентів.

Vue.component('child-component', {
props: ['message'],
template: '{{ message }}'
});

Custom Events: Для комунікації між компонентами використовуються спеціальні події.

Vue.component('child-component', {
template: 'Тискни'
});


1. Computed Properties (Обчислювані властивості)

Обчислювані властивості — це значення, які динамічно обчислюються на основі даних екземпляра Vue. Вони автоматично оновлюються, коли змінюються їх залежні дані.

var app = new Vue({
el: '#app',
data: {
firstName: 'Елізабета',
lastName: 'Хокінг'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
});


1. Watchers (Спостерігачі)

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

var app = new Vue({
el: '#app',
data: {
question: '',
answer: 'Ваше запитання очікується...'
},
watch: {
question: function(newQuestion) {
this.answer = 'Шукається відповідь...';
this.getAnswer();
}
},
methods: {
getAnswer: function() {
// Тут виконуються асинхронні операції
}
}
});


1. Lifecycle Hooks (Кроки життєвого циклу)

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

• created: Виконується під час створення компонента.
• mounted: Виконується, коли компонент додається до DOM.
• updated: Виконується, коли компонент оновлюється.
• destroyed: Виконується, коли компонент знищується.

var app = new Vue({  
 el: '#app',  
 data: {  
 message: 'Привіт Vue!'  
 },  
 created: function() {  
 console.log('Компонент створено!');  
 },  
 mounted: function() {  
 console.log('Компонент додано до DOM!');  
 }  
});

1. Routing (Маршрутизація)

Vue.js забезпечує маршрутизацію за допомогою бібліотеки vue-router для створення односторінкових додатків (SPA). Це дозволяє відображати різні компоненти для різних URL.

const routes = [  
 { path: '/', component: Home },  
 { path: '/about', component: About }  
];  

const router = new VueRouter({  
 routes  
});  

const app = new Vue({  
 router  
}).$mount('#app');

1. State Management (Управління станом)

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

const store = new Vuex.Store({  
 state: {  
 count: 0  
 },  
 mutations: {  
 increment(state) {  
 state.count++;  
 }  
 }  
});  

const app = new Vue({  
 el: '#app',  
 store  
});

1. Mixins (Міксини)

Міксини використовуються для спільного використання функціональності між компонентами. Міксин — це об'єкт, який може використовувати кілька компонентів.

var myMixin = {  
 created: function() {  
 this.hello();  
 },  
 methods: {  
 hello: function() {  
 console.log('Привіт міксин!');  
 }  
 }  
};  

var app = new Vue({  
 mixins: [myMixin]  
});

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

Перекладено з: Vue.js’in Temel Bileşenleri Nelerdir?