lab5

README.md

@@ -1 +1,98 @@
-~
+# 🎓 Лабораторная работа №5
+
+![HTML5](https://img.shields.io/badge/HTML5-Structure-orange?style=for-the-badge&logo=html5)
+![CSS3](https://img.shields.io/badge/CSS3-Styling-blue?style=for-the-badge&logo=css3)
+![JavaScript](https://img.shields.io/badge/JavaScript-ES6+-yellow?style=for-the-badge&logo=javascript)
+![Vue.js](https://img.shields.io/badge/vue.js-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D)
+
+## ⬇️ Введение в Vue.js
+### Цель работы
+Используя Vue3 ознакомиться с основными возможностями фреймворка Vue.js, включая реактивность, работу с событиями, условный рендеринг, циклы, компоненты и вычисляемые свойства.
+
+## 📋 Задания
+
+### **Задача 1. Привет, Vue!** — 1 балл  
+**Требования**:  
+- Отображать приветствие с именем пользователя.  
+- Имя задаётся через переменную `name` в `data()`.  
+- Текст должен обновляться автоматически при изменении значения в `<input>`.
+
+**Ключевые технологии**: интерполяция (`{{ }}`), директива `v-model`.
+
+---
+
+### **Задача 2. Реактивный счётчик** — 1 балл  
+**Требования**:  
+- Создать кнопку и отображаемое число.  
+- При клике — увеличивать счётчик на 1.
+
+**Ключевые технологии**: реактивные данные (`ref`), обработка событий (`@click`).
+
+---
+
+### **Задача 3. Условный рендеринг** — 1 балл  
+**Требования**:  
+- Добавить кнопку “Показать/Скрыть описание”.  
+- По клику — переключать видимость описания.
+
+**Ключевые технологии**: `v-if` / `v-show`.
+
+---
+
+### **Задача 4. Список элементов** — 1 балл  
+**Требования**:  
+- Создать массив задач или товаров.  
+- Вывести каждый элемент с названием и порядковым номером.
+
+**Ключевые технологии**: `v-for`, уникальные ключи (`:key`).
+
+---
+
+### **Задача 5. Мини-форма** — 1 балл  
+**Требования**:  
+- Два поля ввода: имя и возраст.  
+- При нажатии “Добавить” — добавлять объект в массив и отображать список.  
+- Очищать форму после отправки.
+
+**Ключевые технологии**: `v-model`, `@submit.prevent`, работа с массивами.
+
+---
+
+### **Задача 6. Вычисляемые свойства** — 1 балл  
+**Требования**:  
+- Поле ввода для числа.  
+- Отображать число, его квадрат и куб.
+
+**Ключевые технологии**: `computed`.
+
+---
+
+### **Задача 7. Watch и жизненный цикл** — 2 балла  
+**Требования**:  
+- Компонент отображает текущее время (обновление каждую секунду).  
+- Использовать `watch` для отслеживания изменений времени.  
+- Выводить сообщение в консоль при каждом обновлении.  
+- Отображать приветствие (“Доброе утро” / “Добрый вечер”) в зависимости от часа.
+
+**Ключевые технологии**: `onMounted`, `watch`, реактивность.
+
+## Установка / Запуск
+
+1. Клонируйте репозиторий:
+```
+git clone https://github.com/WonderSi/webdev-frontend-vue.git
+```
+2. Переключитесь на ветку `vue`:
+```
+git checkout vue
+```
+3. Откройте файл `index.html` в браузере:
+
+---
+Выполнил Козлов Кирилл ФИТ-231
+https://wondersi.github.io/webdev-frontend-vue/
+
+
+
+
+