Vue.js

Instalacija Vue.js

by

[vc_row][vc_column width=“1/1″][vc_tta_tabs style=“modern“ shape=“square“ active_section=“1″ css_animation=“bounceIn“][vc_tta_section title=“Tab 1″ tab_id=“1751323679048-d65b517e-3267″][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. 1111111111111111[/vc_column_text][/vc_tta_section][vc_tta_section title=“Tab 2″ tab_id=“1751323679052-b473328f-02fa“][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit … Read more

Šta je Vue.js?

by

Šta je Vue.js?

Napomena za Vue 3 (2026): Vue 3 je trenutna major verzija (Vue 2 je EOL). Novi projekti: Vue 3 + Vite (npm create vue@latest). Options API i dalje radi; Composition API se preporučuje za noviji/kompleksniji kod.

Vue.js se izgovara /vjuː/, slično kao engleska reč view, a u oficijelnoj dokumentaciji kažu za njega da je progresivni JavaScript framework za izradu korisničkog interfejsa.

„Progressive framework for building user interfaces“.
Dokumentacija Vue.js

vue.js

Vue.js se smatra da je jedan od najjednostavnijih JavaScript framework-a, koji je veoma brz, ima malu veličinu i veoma detaljnu dokumentaciju. Vue.js je veoma fleksibilan i prilagodljiv različitim vrstama projekata. U osnovnoj verziji je praktično library, i kao takav je primenjiv za male i srednje projekte, medjutim Vue.js dodavanjem odgovarajućih oficijalnih komponenati postaje full framework, i kao takav ima potencijal za izradu enterprise aplikacija.
Iako trenutno Vue.js nije još uvek popularan kao React (koji podržava Facebook) ili Angular 2 (koji podržava Google), njegova popularnost raste iz dana u dan, a Laravel community ga smatra za jedan od njihovih omiljenih front-end framework-a.

NAPOMENA:
U trenutku pisanja članka je bila aktuelna verzija 2.0, medjutim kasnije je izašla nova verzija 3.0 za koju i dalje važi većina tekstova ali ona ipak donosi sa sobom i brojne promene (pogledajte spisak promena na oficijelom sajtu). Kod najvećih promena sam se vratio i ažurirao sadržaj članaka dodajući objašnjena vezana i za 3.0 verziju ali ne i kod svih, tako da na čitaocu ostaje da prouči sve razlike.

Read more

Custom Vue direktive

by

Šta su custom direktive? Direktiva je generalno neki poseban token u markupu koji govori biblioteci da uradi nešto sa DOM elementom. Vue ima svoje predefinisane direktive ali šta ako želimo da uradimo nešto ili izvršimo neku akciju koja još uvek nije eksplicitno definisana ni sa jednom Vue direktivom. Vue vam omogućava da kreiramo sopstvenu prilagođenu … Read more

Karakteristike i specifičnosti ruta

by

Objekat “route” sadrži sve informacije u vezi trenutne rute, kojim se uvek može pristupiti iz aplikacije preko nekog od njegovih svojstava:

$route.path – String koji je jednak putanji trenutne rute, uvek se rešava kao apsolutna putanja (npr. “/user/profile”).
$route.params – Objekt u vidu parova ključ/vrednost koji se koristi za vraćanje podataka iz dinamičkih ruta. Ako nema parametara, vrednost će biti prazan objekat.
$route.query – Objekt u vidu parova ključ/vrednost koji se koristi za vraćanje podataka query string-a.
$route.fullPath – full URL uključujući query i hash.
$route.matched – Niz koj sadrži zapise o putanji trenutne rute
$route.name – Ime trenutne rute ako mu je definisano
$route.redirectedFrom – Ime rute sa koje izvršena redirekcija ako postiji redirekcija

Osnove rutiranja sa Vue.js

by

U razvoju web aplikacija, rutiranje je vezano za razdvajanje korisničkog interfejsa. Deljenje aplikacije na više različitih stranica je neophodno radi lakšeg sagledavanja kompleksne aplikacije. U najgrubljim crtama rutiranje predstavlja definisanje pravila uz pomoć kojih se povezuje odgovarajući sadržaj sa zahtevom koji podnet posebnom URL adresom. Routiranje se često deli na dve glavne sekcije:

a) Routiranje na serveru (eng. server-side routing)
b) Rutiranje na strani klijenta (eng. client-side routing)

Animacija više elemenata odjednom „transition-group“

by

Renderovanje liste se veoma često koristi u programiranju, najčešće je to dinamičko prikazivanje listi kada se renderuje serija slično grupisanih informacija.
U ovom članku je objašnjeno kako animirati takve liste sa Vue.js frameworkom. Za animaciju više elemenata ne možemo koristiti komponentu “transition”, jer ona može da “obavije” SAMO JEDAN HTML element, stoga Vue.js uvodi novi tip wrapper komponente, pod nazivom .

Tranzicija pri zameni elemenata sa Vue.js

by

Pri tranziciji se promena svojstva na oba elementa dešava istovremeno. Usled čega su oba elementa vidljiva za vreme animacije (što nije baš najlepše). Novi element koji tek treba da se prikaže je uvek pozicioniran ispod elementa koji nestaje. Neprirodno je to što taj elemenat dolazi na pravo mesto tek kada prvi element skroz nestane tj. kada se završi animacija (pa se tada primeti skok elementa).
Da bi se izbeglo ovakvo ružno ponašanje potrebno je da elemenat koji nestaje potpuno završi animaciju, pre nego što počne animacija elementa koji se pojavljuje. Vue.js ovo postiže definisanjem tzv. moda tranzicije.
Postoje dve mogućnosti za vrednost atributa “mode”:

Osnove animacije sa Vue.js

by

Vue.js ima mehanizme za jednostavno integrisanje CSS animacije nad HTML elementom. Vue.js omogućava CSS animaciju tako što automatski dodaje specifične klase HTML elementu u odredjenem trenutku animacije, nakon čega možemo preko njih da se definišemo CSS svojstva za animaciju.
Pored toga Vue.js omogućava animaciju sa JavaScript-om jer sa “transition hooks” (“custom events” koje “okida” Vue.js prema utvrdjenom tajmingu animacije) omogućava korišćenje JavaScript-a za direktnu manipulaciju DOM-om.
Takodje uz Vue.js postoji mogućnost da se jednostavno integrišu 3rd-party CSS biblioteke za animaciju (npr. Animate.css) ili 3rd-party JavaScript biblioteke za animaciju (npr. Velocity.js ili GreenSock).

Filtriranje sa Vue.js

by

Vue filter je u suštini funkcija koja uzima vrednost, obrađuje je, a zatim vraća obrađenu vrednost. Filteri nisu zamene za metode, computed properties ili watch svojstva, jer filteri ne transformišu podatke, već samo transformiše izlaz koji korisnik vidi. Filteri mogu da se nadovezuju jedan na drugi i kao sve funkcije mogu da prime argumente. Kada se koristi filter, njegov kontekst je postavljen na instancu koja se poziva na njega, stoga i ključna reč “this” ukazuje na nju.

Vue.js mixin

by

Šta je mixin?

Napomena za Vue 3 (2026): Za novi Vue 3 kod preferirajte composables (Composition API, npr. useXxx()) umesto mixin-a. Mixini i dalje rade sa Options API-jem, ali su zavisnosti manje eksplicitne.

vue mixin

Mixin-i su „reusable“ delovi koda koji mogu da se višekratno iskoriste u bilo kojoj Vue komponenti ili instanci. Vue.js mixin je u stvari objekat koji može sadržati sva svojstva kao i options objekat instance/komponente: data, methods, computed…
„Mixin“ se koriste za:

  • Kreiranje zajedničikh svojstva (metoda, data…), koje se koriste u različitim komponentama i tako omoguće poštovanje DRY („Don’t Repeat Yourself“) principa.
  • Pri kreiranje plugina koje imaju potrebu da modifikuju postojeću Vue instancu, jer mogu jednostaavno da dodaju nove funkcionalnosti.
Domen mixin-a

Mixin se integriše u instancu (komponentu) tako što se u komponentu ugradi kopija koda napisanog u mixin-u. Ovo povlači zaključak da je kod koji je došao u komponetu iz mixina potpuno odvojen i nezavisan kako od samog mixina tako i od koda ugradjenog u ostale komponente.

Read more