Обмежений доступ для гостей

Вам доступно 3 уроки з цього курсу безкоштовно.

  • Коментарі доступні тільки авторизованим користувачам
  • Прогрес зберігається тільки 0:00
🔒
КурсиFrontend розробка / Основи Vue.js

Основи Vue.js

Вигляд:

Модуль 1. Вступ до Vue.js

1

Що таке Vue.js?

Знайомство з Vue.js та його особливостями

2

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

Встановлення Node.js та Vue CLI

3

Створення проекту з Vite

Створення Vue проекту за допомогою Vite

4

Структура Vue проекту

Розбір структури файлів та папок

5

Запуск та збірка

Команди для розробки та продакшн збірки

Модуль 2. Основи Vue

6

Екземпляр Vue додатку

Створення та налаштування Vue application

7

Шаблони та інтерполяція

Синтаксис шаблонів та вставка даних

8

Реактивність у Vue

Як працює реактивна система Vue

9

Options API vs Composition API

Порівняння двох підходів до написання коду

10

Single File Components (SFC)

Структура .vue файлів

Модуль 3. Компоненти

11

Анатомія компонента

Структура та частини Vue компонента

12

Props — передача даних

Передача даних від батька до дитини

13

Events — комунікація з батьком

Emit подій від дитини до батька

14

Slots — гнучкий контент

Слоти для гнучкого вмісту компонентів

15

Життєвий цикл компонента

Lifecycle hooks у Vue компонентах

16

Динамічні компоненти

Використання component та keep-alive

Модуль 4. Реактивність (Composition API)

17

ref та reactive

Основи реактивності в Composition API

18

computed властивості

Обчислювані властивості у Vue

19

watch та watchEffect

Спостереження за змінами даних

20

toRefs та toRef

Перетворення reactive об'єктів на refs

21

provide та inject

Dependency injection у Vue

22

Reactivity Transform

Спрощений синтаксис реактивності

Модуль 5. Директиви

23

v-if, v-else, v-else-if

Умовний рендеринг елементів

24

v-show та різниця з v-if

Приховування елементів через CSS

25

v-for та key

Рендеринг списків у Vue

26

v-model для форм

Two-way binding для форм

27

v-bind та v-on скорочення

Скорочений синтаксис директив

28

Створення власних директив

Custom directives у Vue

Модуль 6. Обробка подій

29

Event handling basics

Основи обробки подій у Vue

30

Event модифікатори

Модифікатори .stop, .prevent та інші

31

Keyboard та mouse events

Обробка клавіатурних та мишачих подій

32

Form input bindings

Прив'язка даних до елементів форм

33

Модифікатори v-model

Модифікатори .lazy, .number, .trim

Модуль 7. Composables

34

Що таке composables?

Концепція повторно використовуваної логіки

35

Створення useCounter

Практика: composable для лічильника

36

useFetch для HTTP запитів

Composable для fetch запитів

37

useLocalStorage

Робота з localStorage через composable

38

useDebounce та useThrottle

Оптимізація викликів функцій

39

Найкращі практики composables

Правила та рекомендації

Модуль 8. Vue Router

40

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

Налаштування роутера у проекті

41

Визначення маршрутів

Створення та конфігурація routes

42

RouterLink та RouterView

Компоненти для навігації

43

Динамічні параметри

Маршрути з параметрами

44

Вкладені маршрути

Nested routes та children

45

Navigation Guards

Захист маршрутів та редіректи

Модуль 9. Pinia (State Management)

46

Вступ до Pinia

Що таке Pinia та навіщо він потрібен

47

Створення Store

Створення першого store

48

State та Getters

Стан та обчислювані властивості store

49

Actions

Методи для зміни стану

50

Store composition

Використання stores разом

51

Pinia з TypeScript

Типізація stores

Модуль 10. Форми та валідація

52

Робота з формами у Vue

Основи роботи з формами

53

Валідація форм вручну

Самостійна валідація полів

54

VeeValidate бібліотека

Використання VeeValidate

55

Yup схеми валідації

Валідація з Yup

Модуль 11. HTTP та API

56

Fetch API у Vue

Використання fetch для запитів

57

Axios інтеграція

Налаштування та використання Axios

58

Обробка помилок та loading стани

Error handling та індикатори завантаження

Модуль 12. Збірка та деплой

59

Оптимізація продуктивності

Оптимізація Vue додатків

60

Деплой Vue додатку

Збірка та розгортання на хостинг

Коментарі

💬

Коментарі доступні тільки для авторизованих користувачів