HTML interpolacija u okviru Vue.js

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”.

Continue reading…


Životni ciklus Vue.js instance/komponente

Uvod

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 ×

Continue reading…


Svojstva Vue instance: methods, computed i watch

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.

Continue reading…


Pristup svojstvima Vue.js instance

Pristup svojstvima iz instance uz pomoć “this”

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”

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.

Continue reading…


Vue instanca

Uvod

mvvm

Vue.js framework dizajniran na osnovu MVVM šablona (Model View ViewModel), koji omogućava razdvajanje aplikacije na različite sekcije radi bolje razumljivosti i preglednosti. U ovakvoj podeli:

“Model”

Ova sekcija je vezana za podatke (data) tj. bazu podataka, unos podataka ili čak za hardkodovone vrednosti. U kontekstu Vue.js frameworka ovu sekciju predstavlja “data” svojstvo.

“View”

Ova sekcija obično predstavlja frontend deo aplikacije koji se koristi za “štampanje” podataka iz modela. Sekcija “view” je kao i u drugim frontend bibliotekama ustvari HTML, ali sa dodatnim funkcionalnostima koje mu omogućavaju dinamičko prikazivanje model-a. Dinamičko prikazivanje u okviru HTML-a Vue.js obezebedjuje sa:

  • “interpolacijom”
    “Interpolacija” podrazumeva obradu izraza definisanog u u sklopu duplih vitičastih zagrada {{ }}, i štampanje razultata na tom mestu. Više o interpolaciji pročitajte u članku “Interpolacija u okviru Vue.js”

  • “direktivama”
    Pored interpolacije za renderovanje sadržaja HTML taga može da se koristi neka od direktiva: “v-text”, “v-html”, “v-pre”
    Ali najčešća upotreba direktiva je za dinamičko renderovanje atributa HTML taga, kada koristimo direktivu “v-bind”, jer atribute ne možemo renderovati sa interpolacijom. Direktive su značajan mehanizam u okviru Vue.js, stoga je u okviru sajta njima posvećena velika pažnja, više o direktivama možete pročitati u uvodnom članku “Uvod u Vue.js direktive”
“ViewModel”

Ova sekcija je most izmedju dve prethodno pomenuti sekcije i ima sistem kako da poveže “model” (podatke) sa odgovarajućim “view”. U okviru nje manipulišemo podacima iz Modela pre nego što ih prikažemo u View sekciji. U okviru Vue.js aplikacije ovu sekciju predstavlja neko od svojstava: methods, computed ili watch.

Continue reading…


Instalacija Vue.js

Šta je Vue.js?

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.

Integracija 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.

a) Integracija sa CDN

Dovoljno je da se na dnu body sekcije ubaci skipta koja se nalazi na CDN-u:

i Vue.js je spreman za rad

b) Instalacija Vue.js kao npm paketa

Za instalaciju Vue.js kao npm paketa je potrebno da imamo instaliran node.js i njegoov package manager npm (pogledajte u članku “Instalacija alata za web development”). Nakon toga možemo da instaliramo vue.js naredbom:

npm install vue

Continue reading…