diff --git a/README.md b/README.md index 54bcf30..7fcc2bc 100644 --- a/README.md +++ b/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()`. +- Текст должен обновляться автоматически при изменении значения в ``. + +**Ключевые технологии**: интерполяция (`{{ }}`), директива `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/ + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..c17f145 --- /dev/null +++ b/index.html @@ -0,0 +1,352 @@ + + + + + + Лабораторная №5 — Введение в Vue + + + + +
+

Лабораторная №5 — Введение в Vue

+ +
+ +
+ +
+ +
+
+ + + +