UI:Vaata kassid

Selle praktikumitunni ülesanne on vue.js käima ajada ja sellega väike näide valmis kirjutada

Ülesanne

Lahendage ülesanne vue.js vahendusel. Sammhaaval tegemisesk sobib järgmiste alamülesannete lahendamine vue.js abil:

• Mallide {{}} avaldiste abil sisu lehele näitamine.
• Tab-ide implementeerimine.
• Kontrollerist nimekirja esitamine
• Tekstivälja (input type=text) info kuvamine avaldise abil. (See on vaheharjutusena tore, aga lõpptulemuses seda vägisi pole mõtet kajastada)
• Vormi abil kontrollerisse nimekirja info lisamine

Kõike seda saab proovida, kui võtta ülesandeks kasside üle arvepidamise rakendus ja see Vue.js abil implementeerida. Rakenduse vaates oleks kaks tab-i: "Nimekiri" ja "Lisa kass". Sellest kõrgemal h1 pealkirjas ütleb, mis tab parajasti on valitud.

Kassi kohta salvestage:

• Nimi
• Sünniaasta

Kasside nimekiri salvesta data all.

Vormiväljal lisatud kass lisa nimekirja lõppu (või sordi aastaarvude või eesnimede järgi).

Reaalset, reloadi üleelavat salvestust ärge implementeerige.

Asjad, mida meeles hoida

Kui kasutaja mingeid andmeid sisestab siis ta ka eeldab, et leht reageerib sellele kuidagi. Näiteks tekib kiri: "kass lisatud" või "lisamine õnnestus" või näiteks vahetatakse tab kasside nimekirja tabile.

Boonus

Kui oskate Vue.js-i piisavalt, et ülesanne tundub igav, võite võistelda ajaliselt, kes esimesena lahenduse postkasti saab, lahendada mõni kodutöö rakenduse alamülesanne või siis lihtsalt õppejõudu veenda oma võimekuses vue.js abil midagi teha.

Kui oskate mõnda muud teeki, siis tehke see näide ära, et oma oskuste pagasit laiendada.

Viited

• Vue.js sissejuhatus
• Vue.js võrdlus teiste raamistikega

Esitamine

• Salvestada oma töö dijkstra kataloogi public_html/ui/praks3
• Vastavalt harjutustunni kellaajale saata oma töö link aadressile erik.soekov@ttu.ee või jaagup.irve@ttu.ee