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

Continue reading…


Svojstva Vue instance

Š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

Continue reading…


Instalacija Vue.js

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.

Continue reading…


Destruktuiranje u JavaScriptu

Uvod

destruktuiranje niza

Pojam “destruktuiranje” podrazumeva “izvlačenje” podataka iz strukture podataka (objekat ili niz) i pravljenje novih manjih struktura kojima se dodeljuju vrednosti na osnovu “izvučenih” podataka.
Pre ES2015 je bilo neophodno da se napiše kod koji bi vršio destruktuiranje ali srećom sa novim JavaScript standardom je došla i sintaksa koja omogućava da JavaScript kompajler ovaj posao automatski izvršava umesto nas. Ova sintaksa se naziva “destructuring assignment”, i upravo predstavlja to što joj sam naziv govori, dodeljuje vrednosti iz neke strukture novim promenjivima.

Primer
“Manuelno” destruktuiranje

Nova ES6 sintaksa

NAPOMENA: [a,b,c] iz prethodnog primera nove sintakse NIJE NIZ ! ! !
Kada se uglaste zagrade (ili vitičaste) nalaze sa leve strane znaka jednakosti, to ukazuje na patern (šablon) za dodeljivanje promenjivih. One nam omogućavaju da definišemo JavaScript kompajleru kako i pod kojim nazivom varijabli da sačuva destrukturisane vrednosti.

Continue reading…


Novi tipovi podataka Map, Set & Symbol

Symbol

Karakteristike

Symbol je novi tip podataka koji je došao sa ES2015 standardom. Symbol predstavlja jedinstveni token. Simbol se kreira koristeći funkciju Symbol().

Symbol može biti kreiran i sa label-om, koji mu se prosledi kao string. Taj label ne utiče na vrednost symbola, ali je koristan pri debagovanju i može da prikaže koristeći metod toString() nad symbol-om.

Namena: Ključ svojstva objekta

Uglavnom se “symbol” koristi kao ključ svojstva objekta, kada želimo da zaštitimo to svojstvo. Kada se koristi “symbol” kao ključ svojstva objekta, potrebno je da se koriste uglaste zagrade za pristup svojstvu (tzv. “bracket notation”). Takva svojstvo imaju sledeće karakteristike:

  • Jedinstveno svojstvo
  • Svojstvo ne može da se nabraja (eng. enumerated) kroz “for…in” petlju
  • Svosjtvo ignorišu metode: Object.keys(), Object.getOwnPropertyNames() i JSON.stringify()

Treba napomenuti da privatnost ovoga svojstva nije 100%, jer ipak postoji način za pristup svojstvu preko metoda “.getOwnPropertySymbols()” i .ownKeys():

Continue reading…


Nove karakteristike “string-a”

String su iterabilne kolekcije

String tip podataka je od ES2015 standarda postalo iterabilna kolekcija podataka tzv. “iterable”. Sada su string-ovima dostupni svi mehanizmim koji zahtevaju da kolekcija ima implementiran “iterable protokol”. Pa tako sada možemo nad string-ovima koristiti “for..of”:

ili čak da koristimo spread operator koji takodje zahteva iterable kolekciju za kreiranje niza:

Više o ovome pogledajte u delu “Iteratori i Iterable protokol”

Šablonski literali (template literals)

šablonski literali

Šablonski literali (eng. “template literals”) su znakovni nizovi (tzv. string) sa ugradjenim izrazima. Obeležavaju se obrnutim polunavodnicima (eng. backtick).
“Template literal” predstavlja novi poboljšani način konkatenacije string-ova, koji je pregledniji i jednostavniji za rad. U template literal-u je dozvoljena ugradnja izraza, ukoliko se obeleže sa dolar znakom i vitičastim zagradama. Template podrazumeva tzv. ” “preset format” dok “literal” predstavlja vrednost koja je napisana tačno onako kako se podrazumeva da se tumači. Stoga svaka nova linija, dodatna praznina (tab) postaju deo tog stringa
Šablonski literali objedinjuju sledeće karakteristike:

  • String interpolation
  • Multi-line string literals tzv. “preset format”, tj. kako je zapisano u kodu tako se i interpretira na izlazu.
Primer

Primer uradjen sa ES5 i konkatenacijom string-ova:

Novi pristup sa šablonskim literalima:

Continue reading…


Spread & Rest operator

Spread operator

Sa novim ES2015 standardom je došao novi operator “…” koji može da razdvoji niz u listu i obrnuto da grupiše listu u niz. U zavisnosti koju funkciju obavlja ovaj parametar ima naziv “spread” ili “rest”. Ukoliko se operator nalazi ispred iteratibilnog objekta i “širi” iterator (npr.niz) u pojedinačne vrednosti praveći listu, onda se naziva “spread”.

Transformacija niza u listu argumenata

Ovaj operator je zamena za često korišćen problem kada je potrebno niz prebaciti u listu argumenata. A najbolji primer je “širenje” niza u listu argumenata funkcije. Ovaj operator se koristi pri pozivanju funkcije:

Deklaracije niza koji sadrži drugi niz

Koristi se u okviru deklaracije niza koji sadrži drugi niz:

Kloniranje objekta

Sa novim standardom je dozvoljeno korišećenje spread operatora u okviru object literala. Ova pogodnost nam omogućava da korišćenjem spread operatora jednostavno kloniramo objekte, bez korišćenja metode Object.assign():

Spajanje dva objekta

Korišećenjem spread operatora je olakšano spajanje dva objekta bez dupliranja svojstava:

Continue reading…