Vue.js

Direktiva v-on:

by

Sintaksa

Vue pruža veoma lep način integrisanja event listener-a na bilo kom elementu DOM-a. Kao i kod ostalih metoda i event callback metode imaju direktan pristup Vue podacima koristeći „this“ ključnu reč.

a) Standardna sintaksa

Da bismo event listener priključili bilo kojem HTML elementu, koristimo direktivu v-on: na koju nadovezujemo naziv vrste dogadjaja koji osluškujemo. Pored toga je potrebno da na kraju takve sintakse da „dodelimo“ odgovarajuću event handler metodu.

Skraćeno pisanje sintakse

b) Objektna sintaksa za više „zakačenih“ dogadjaja

Ova sintaksa se koristi kada „kačimo“ više različitih dogadjaja na isti elemenat

Read more

Direktiva v-bind:

by

Sintaksa

Kao što je pomenuto Vue.js može da dinamičiki generiše HTML koristeći neku od direktiva. Za dinamičko generisanje atributa HTML elementa se koristi direktiva „v-bind“.

Koristeći ovu direktivu možemo reaktivno da povežemo vrednost atributa sa „data“ objektom:

Primer

Skraćeno pisanje direktive

Ova direktiva v-bind: ima skraćenu sintaksu koju predstavlja dvotačaka :

Primer

Read more

Šta su Vue.js direktive

by

Sintaksa Vue.js direktiva Direktive su komande koje možemo zakačiti na DOM element, koriste se za low-level pristup HTML elementu, i njegovu kontrolu ponašanja. Upravo zahvaljujući direktivama i interpolaciji, svaki HTML koji je pod jurisdikcijom Vue.js, je ipak nešto više od običnog HTML-a. Da bi Vue.js znao kada je u pitanju direktiva, one su obeležene na … Read more

HTML interpolacija u okviru Vue.js

by

Uvod

vue.js

Vue.js je MVVM framework, koji ima sistem kako da poveže „model“ (podatke) sa odgovarajućim „view“. Sekcija „view“ je kao i u drugim frontend bibliotekama ustvari HTML, ali sa dodatnim funkcionalnostima koje mu omogućavaju dinamičko prikazivanje model-a, a to su:

  • „interpolacija“
  • „direktive“

Deo HTML koda nad kojim se izvršava interpolacija se obeležava sa duplim vitičastim zagradam a takva sintaksa je poznata pod nazivom „Mustache syntax“. Sve što se nalazi u okviru duplih vitičastih zagrada će biti obradjeno od strane Vue.js i zamenjeno odgovarajućim rezultatom.

Interpolacija teksta

Ukoliko se izmedju zagrada nalazi tekst koji predstavlja neko svojstvo iz „data“ objekta ova sintaksa će da prikaže u okviru HTML-a trenutnu vrednost iz tog svojstva. Pošto je „data“ svojstvo specifično i ponaša se kao proxy prema vue instanci, nije potrebno koristi sintaksu this.data.svojstvo, već je dovoljan samo naziv svojsva. Najbitnija stvar vezana za interpolaciju teksta je da će Vue.js ponovno obraditi sve što je u okviru zagrada ukoliko dodje do promene podataka, nakon čega će automatski ažurirati HTML.

Sa ovakvim načinom se interpretira „data“ kao običan tekst, ne kao HTML. Ukoliko je potrebno da se evaulira HTML onda se koristi direktiva „v-html“. Treba naglastiti da se interpolacija teksta ne može koristiti za interpretaciju atributa HTML taga, za to je neophodno da se koristi direktiva „v-bind“.

Read more

Životni ciklus Vue.js instance/komponente

by

Uvod

Napomena za Vue 3 (2026): U Vue 3 destroy hookovi se zovu beforeUnmount / unmounted. Stara imena beforeDestroy / destroyed i dalje rade kao aliasi.

vue

Da bi se tergetirao neki odredjeni trenutak u „životu“ jedne vue instance/komponente, u sam core Vue.js frameworka su integrisane tzv. udice (eng. hooks). Udice omogućavaju da željenu akciju pokrenete precizno u odgovarajućem trenutku životnog ciklusa komponente. Udice u okviru Vue.js frameworka su predstavljene kroz specifične predefinisane metode koje to omogućuju.

Metode vezane za Lifecycle

Sve metode vezane za lifecycle se smeštaju u root vue instance kao direktno svojstvo.

vue lifecycle

slika ×

Read more

Svojstva Vue instance: methods, computed i watch

by

methods

Svojstva u okviru Methods su funkcije vezane za Vue instancu. „Metode“ se koriste kada želite da se nešto izvrši nakon nekog događaja ili kada želite da se funkcija izvrši kada god se promeni stanje instance/komponente nakon čega se DOM re-renderuje. „Metode“ se takodje izvršavaju pri svakom učitavanju instance (komponente).

When this data changes, the view will re-render. Method invocation will always run the function whenever a re-render happens.
Dokumentacija Vue.js

Ovakvo ponašanje metoda je omogućeno time što Vue.js ne vodi računa šta se nalazi u okviru metode pa će metoda, biti ponovo proračunata čak iako promena ne utiče na metodu.

Primer

methods

U ovome primeru imamo dve metode („obavestenje()“ i „ispisiVrednostB()“) čije su funkcionalnost jednostavne i opisane samim nazivom metode. Medjutim funkcionalnost koja je važna u ovome primeru je ispisivanje poruke u konzoli svaki put kada se klikne bilo koje dugme.
Kao prva stvar na koju treba obratiti pažnju je činjenica da se odmah nakon učitavanja Vue instance u konzoli ispisuju poruke iz obe metode, što potvrdjuje činjenicu da se metode izvršavaju pri svakom učitavanju Vue instance (komponente).
Zatim treba pratiti konzolu nakon svakog klika na akciono dugme, jer se nakon svakog klika ispisuju po dve nove poruke, bez obzira koje dugme je kliknuto. Ovo ukazuje da se obe metode izvršavaju svaki put kada se re-renderuje DOM nakon promene nekog od data svojstava, pa čak i metoda na koju promena data svojstva ne utiče.

See the Pen Specifičnost metoda u Vue.js by Web programiranje (@chos) on CodePen.

Zaključak:

Stoga zbog svega pomenutog treba naglasiti da u slučaju čestog ažuriranja user interfejsa, može doći do problema sa preformansama aplikacije, jer se troše resursi pri ponovnom pokretanja svih metoda. Na primer, ako imamo aplikaciju koja prikazuje tajmer koji se ažurira posle svake sekund, sve funkcije u okviu „methods“ objekta će biti pozivane za izvršenje posle svake sekunde, i ponovno izračunati bez obzira na to koja im je namena. U ovakvom slučaju je preporuka koristi computed properties.

Read more

Pristup svojstvima Vue.js instance

by

Pristup svojstvima u okviru same Vue instance

Unutar Vue.js instance ključna reč „this“ ukazuje na instancu vue.js objekta. Stoga se za pristup svojstvima instance koristi rezervisana reč „this“, na koju se nadovezuje naziv željenog svojstva:

Treba napomenuti da su odredjena svojstva vue instance specifična, jer se kod njih odvija dodatna „magija u pozadini“. Svojstva data, methods, computed i watch se ponašaju kao „proxy za vue instancu“, pa sva svojstva unutar njih se direktno prosledjuju vue instanci. Zbog toga sva child svojstva ovih navedenih svojstava se predstavljaju kao da su direktna svojstva Vue instance.

Primer

Zahvaljujući ovoj „magiji“, kod tergetiranja child svojstava unutar tih specifinih svojstava, pristupamo im kao da su „glavna“ svojstva. Tako da ne moramo da koristimo „this.data.nekoSvojstvo“, već možemo da koristimo samo „this.nekoSvojstvo“.

U ovome primeru umesto da koristimo this.data.message izraz, mi koristimo this.message kao sasvim legitiman način.

Problematični slučajevi pri korišćenju „this“ (za: data, methods, computed i watch)

a) Arrow funkcija

Child svojstva u okviru ovih „specijalni“ svojstava (data, methods, computed i watch), upravo zbog „magije“ u pozadini ne bi trebalo da koriste arrow funkciju jer ona koristi leksički „this“ tj. koristi „this“ od roditeljskog okruženja pa bi u tom slučaju vraćao „undefined“. Više o arrow funkciji možete pročitati u članku „Arrow funkcija“

b) Closure

Ukoliko clousure funkciju poziva spoljna funkcija, onda se pri odredjivanju vrednosti ključne reči „this“ koristi “podrazumevano pravilo” (pročitaj više o ovome u članku „Značenje operatora “this” u JavaScript-u“). Iz pomenutog razloga ključna reč „this“ u okviru closure ukazuje na globalni objekat.

Primer

U ovome primeru this.message ne vraća očekivanu vrednost već „undefined“ jer globalni objekat nema svojstvo „message“

Za rešenje ovog problema možemo koristi poznatu tehniku var self = this;, gde u okviru nove variable van closure funkcije sačuvamo vrednost this (closure ima uvek pristup ovoj promenjivoj). Više o ovome mehanizmu pročitajte u sekciji „Mehanizam self=this”

See the Pen Closure unutar Vue.js by Web programiranje (@chos) on CodePen.

Read more

Svojstva Vue instance

by

Šta su svojstva Vue instance?

Pri definisanju nove Vue instance konstruktorska funkcija kao parametar prihvata objekat kroz koji se definišu sve opcije Vue instance. U okviru tog objekta Vue.js obezbedjuje već predefinisana svojstva svaka sa svojim karakteristikama, koja omogućavaju rad Vue aplikacije. Sledeća lista predstavlja osnovna svojstva svake Vue instance i njima se pristupa van instance sa predznakom $.

Pored njih su pomenuta i tri veoma važana svojstva: computed, methods i watch koja se ponašaju kao proksi (više o ovome pročitajte u članku „Pristup svojstivima Vue instance“).

„$el“

U okviru 3.0 verzije $el može da se koristi za pristup osnovnom DOM element-u, uglavnom kod komponenti koje koriste fragmente. Ipak je preporučeno da se od verzije 3.0 izbegava oslanjanje na $el već da se umesto njega koriste šablonske reference $refs kao direktan pristup DOM elementima.

U okviru 2.0 verzije sa svojstvom „el“ definišemo HTML element nad koji će da „upravlja“ Vue aplikacija:

HTML

JavaScript

Read more

Instalacija Vue.js

by

Integrisanje u postojeći projekat

Izmedju ostalog Vue.js je popularan medju developer-ima, jer ima mogućnost da se jednostavno integriše u postojeći projekat, dovoljno je da se na dnu body sekcije ubaci skipta koja se nalazi na CDN-u:



Kada imamo dostupanu Vue.js biblioteku u okviru projekta posle ovog script taga je dovoljno da otvorimo novi script tag u okviru koga će se kreirati instanca.

U slučaju verzije 3.0 je malo promenjena sintaksa (pogledajte zbog čega su nastale ove promene na oficijelnom sajtu), pa instanciranje Vue objekta izgleda ovako:

U ovoj verziji je nakon instanciranja je još potrebno da se odradi „mount-ovanje“ tj. povezivanje instance sa HTML elementom.

Pa bi ceo kod izgledao ovako:

Primer (3.0 ver):

See the Pen
Untitled by Web programiranje (@chos)
on CodePen.


Svaka Vue aplikacija mora da ima kreiranu instancu na osnovu konstruktorske funkcije Vue(). Konstruktorskoj funkciji se prosledjuju podaci neophodni za kreiranje nove instance kroz tzv. „options objekat“. Za kreiranje nove instance je dovoljno pozvati konstruktorsku funkciju sa ključnom reči new.

Ukoliko imamo potrebu da pristupamo svojstvima Vue instance i izvan same instance, onda je potrebno dodeliti nekoj promenjivoj kreiranu instancu:

Dozvoljeno je intancirati više Vue instanci ali sva od instanci mora da „kontroliše“ različite delove HTML-a, jer nije dozvoljeno vezivati jednu instancu za više različitih HTML delova. Medjutim često se javlja potreba da se u web aplikaciju ugradi više istih ili sličnih HTML elemenata koji se ponavljaju (kao što je npr. produkt), a ipak da su povezani sa Vue.js instancama. Pošto nije dozvoljeno vezivati jednu instancu za više različitih HTML delova, onda u tom slučaju treba kreirati Vue.js komponentu i ugraditi je više puta.

Read more