From 46e453b617ca737525e63e2ac54f8abbaa2045e2 Mon Sep 17 00:00:00 2001 From: WonderSi Date: Fri, 17 Oct 2025 11:06:51 +0700 Subject: [PATCH 01/11] feat(lab5): add initial Vue project structure with tabs --- index.html | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..8552a26 --- /dev/null +++ b/index.html @@ -0,0 +1,93 @@ + + + + + + Лабораторная №5 — Введение в Vue + + + + +
+

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

+ +
+ +
+ +
+ +
+
+ + + + From e017d19f5a702849e93deddfe7a76872c0c6cec0 Mon Sep 17 00:00:00 2001 From: WonderSi Date: Fri, 17 Oct 2025 11:07:32 +0700 Subject: [PATCH 02/11] feat(lab5): implement Task 1 with data binding --- index.html | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 8552a26..beb6cf8 100644 --- a/index.html +++ b/index.html @@ -73,7 +73,21 @@

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

// --- ЗАДАНИЕ 1 --- const Task1 = defineComponent({ - // ... + data() { + return { + name: 'Гость' + } + }, + template: ` +
+

Привет, {{ name }}!

+ +

Вы ввели: {{ name }}

+
+ ` }) // --- ЗАДАНИЕ 2 --- From 011e7127b91b45cde76113252279f9bbb57f6ac8 Mon Sep 17 00:00:00 2001 From: WonderSi Date: Fri, 17 Oct 2025 11:20:47 +0700 Subject: [PATCH 03/11] feat(lab5): implement Task 2 with counter --- index.html | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index beb6cf8..afaf0cd 100644 --- a/index.html +++ b/index.html @@ -92,7 +92,19 @@

Привет, {{ name }}!

// --- ЗАДАНИЕ 2 --- const Task2 = defineComponent({ - // ... + setup() { + const counter = ref(0) + + return { + counter + } + }, + template: ` +
+

Счет: {{ counter }}

+ +
+ ` }) createApp({ From d5f3c345331f07bca1d8fc7afbd04fcfc663f51f Mon Sep 17 00:00:00 2001 From: WonderSi Date: Fri, 17 Oct 2025 11:34:54 +0700 Subject: [PATCH 04/11] feat(lab5): implement Task 3 toggle component --- index.html | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index afaf0cd..e7bb91a 100644 --- a/index.html +++ b/index.html @@ -107,10 +107,32 @@

Привет, {{ name }}!

` }) + // --- ЗАДАНИЕ 3 --- + const Task3 = defineComponent({ + setup() { + const showDescription = ref(false) + + const toggleDescription = () => { + showDescription.value = !showDescription.value + } + + return { + toggleDescription, + showDescription + } + }, + template: ` +
+ +

Привет!

+
+ ` + }) + createApp({ setup() { const currentTab = ref(0) - const tabs = [Task1, Task2] + const tabs = [Task1, Task2, Task3] return { currentTab, tabs } } }).mount('#app') From d227f93745cb4e2755e0b600ef0f4779d5a867fd Mon Sep 17 00:00:00 2001 From: WonderSi Date: Sat, 18 Oct 2025 00:12:42 +0700 Subject: [PATCH 05/11] feat(lab5): implement Task 4 with v-for list rendering --- index.html | 33 ++++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index e7bb91a..cc18fd8 100644 --- a/index.html +++ b/index.html @@ -129,10 +129,41 @@

Привет, {{ name }}!

` }) + // --- ЗАДАНИЕ 4 --- + const Task4 = defineComponent({ + setup() { + const tasks = ref([ + { id: 1, name: 'God of Aboba' }, + { id: 2, name: 'AbobaUs' }, + { id: 3, name: 'ABOBACRAFT' }, + { id: 4, name: 'Spider Aboba' }, + { id: 5, name: 'The Last Aboba Us' } + ]) + + return { + tasks + } + }, + template: ` +
+

Список задач

+
    +
  • + {{ index + 1 }} {{ task.name }} +
    • +
+
+ ` + }) + createApp({ setup() { const currentTab = ref(0) - const tabs = [Task1, Task2, Task3] + const tabs = [Task1, Task2, Task3, Task4] return { currentTab, tabs } } }).mount('#app') From 7fb3be208d450748551cd9bf28f9ab4ae9c3bfcc Mon Sep 17 00:00:00 2001 From: WonderSi Date: Sat, 18 Oct 2025 00:55:30 +0700 Subject: [PATCH 06/11] feat(lab5): implement Task 5 with form and user list --- index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 81 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index cc18fd8..2935e83 100644 --- a/index.html +++ b/index.html @@ -129,7 +129,7 @@

Привет, {{ name }}!

` }) - // --- ЗАДАНИЕ 4 --- + // --- ЗАДАНИЕ 4 --- const Task4 = defineComponent({ setup() { const tasks = ref([ @@ -160,10 +160,89 @@

Список задач

` }) + // --- ЗАДАНИЕ 5 --- + const Task5 = defineComponent({ + setup() { + const name = ref('') + const age = ref('') + const users = ref([]) + + const addUser = () => { + if (name.value.trim() && age.value) { + users.value.push({ + id: Date.now(), + name: name.value, + age: parseInt(age.value) + }) + name.value = '' + age.value = '' + } + } + + return { + name, + age, + users, + addUser + } + }, + template: ` +
+

Добавление пользователей

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

Список пользователей

+
    +
  • + {{ user.name }} - {{ user.age }} лет +
    • +
+
+ +

+ Список пуст. Добавьте первого пользователя! +

+
+ ` + }) + createApp({ setup() { const currentTab = ref(0) - const tabs = [Task1, Task2, Task3, Task4] + const tabs = [Task1, Task2, Task3, Task4, Task5] return { currentTab, tabs } } }).mount('#app') From 6d970dc550ae4e8a1f16d3c809f5ce304e778772 Mon Sep 17 00:00:00 2001 From: WonderSi Date: Sat, 18 Oct 2025 01:13:52 +0700 Subject: [PATCH 07/11] feat(lab5): implement Task 6 with computed properties --- index.html | 47 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 2935e83..87bc564 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,7 @@

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