Projekt: Interaktywny Panel Hologramow NOVA LAB

Czas na projekt koncowy! W Pracowni Hologramow NOVA LAB polaczysz wszystkie techniki szablonow Vue, ktore poznales w tym module. Zbudujesz w pelni interaktywny panel zarzadzania hologramami stacji kosmicznej — od wyswietlania danych, przez filtrowanie i stylowanie, po obsluge zdarzen i bezposrednia manipulacje DOM.

Podsumowanie modulu

W tym module nauczyles sie:

Interpolacja
{{ }}
— wyswietlanie danych reaktywnych i wyrazen JavaScript w szablonach. Pamietaj o ograniczeniach: tylko wyrazenia, nie instrukcje.
v-bind (
:
) — dynamiczne wiazanie atrybutow HTML:
```
:src
```
,
```
:class
```
,
```
:style
```
,
```
:disabled
```
. Skrocona skladnia
```
:
```
jest standardem.
v-on (
@
) — obsluga zdarzen uzytkownika:
```
@click
```
,
```
@submit
```
,
```
@keyup
```
. Modyfikatory jak
```
.prevent
```
,
```
.stop
```
,
```
.once
```
upraszczaja typowe operacje.
Wiazanie klas i stylow — object syntax (
```
:class="{ active: isActive }"
```
), array syntax (
```
:class="[classA, classB]"
```
) i inline style binding.
v-if / v-else-if / v-else / v-show — warunkowe renderowanie.
```
v-if
```
dodaje/usuwa z DOM,
```
v-show
```
tylko przelacza
```
display
```
.
v-for — renderowanie list z
```
:key
```
, iteracja po tablicach i obiektach, unikanie
```
v-for
```
z
```
v-if
```
na tym samym elemencie.
Template Refs — bezposredni dostep do elementow DOM przez
```
ref
```
, function refs, refs na komponentach z
```
defineExpose
```
.
v-html — renderowanie surowego HTML (uwaga na XSS!).

Wymagania projektu

Zbuduj Panel Kontrolny Hologramow ktory zawiera:

1. Lista hologramow z v-for

Wyswietl liste hologramow stacji. Kazdy hologram ma nazwe, typ (np. "navigation", "diagnostic", "communication") i status (aktywny/nieaktywny). Uzyj

:key

z unikalnym ID.

2. Filtrowanie z v-if

Dodaj trzy przyciski filtrow: "Wszystkie", "Aktywne", "Nieaktywne". Na podstawie wybranego filtra pokaz odpowiednie hologramy. Uzyj computed property do filtrowania listy.

3. Dynamiczne klasy i style

Uzyj

:class

aby hologramy aktywne mialy zielona ramke (

border-color: #00ff88

), a nieaktywne — czerwona (

border-color: #ff4444

). Dodaj efekt neonowego swiecenia (

box-shadow

) dla aktywnych elementow.

4. Obsluga zdarzen

Klikniecie na hologram przelacza jego status (aktywny/nieaktywny)
Przycisk "Dodaj hologram" dodaje nowy element do listy z losowa nazwa
Przycisk "Usun ostatni" usuwa ostatni element z listy
Wyswietl licznik: "X aktywnych z Y calkowitych"

5. Template Ref

Uzyj

ref

aby po dodaniu nowego hologramu automatycznie przewinac kontener listy na dol, tak aby nowy element byl widoczny.

Rozbuduj starter ponizej o wszystkie wymagane funkcjonalnosci!

Vai a CodeWorlds→