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.

Definisanje nove instance

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.

OBJAŠNJENJE:
Pošto je Vue.js inspirisan sa MVVM paternom, često se za ime instance koristi “vm”, što je skraćenica od “ViewModel”.

Options objekat vue instance i njegava svojstva

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 svoji karakteristikama, koja omogućavaju rad vue aplikacije:

Svojstva vezana za Data
Svojstva i metode vezane za DOM

Najčešće korišćena a samim tim i najvažnija svojstva su: “el”, “data”, “methods”, “computed” i “watch”. Svojstva data, methods, computed i watch imaju specifične privilegije i ponašaju se kao “proxy” prema Vue instanci. To znači da prosledjuju svoja child svojstva direktno Vue instanci, a rezultat ovoga ponašanja je da su njihova child svojstva tzv. “top svojstva” (prva do instance), kojima se može pristupiti direktno sa “this” ključnom reči. Više o ovome pročitajte u članku “Pristup svojstvima Vue.js instance”

“el” & “template” svojstva

Sa svojstvom “el” definišemo HTML element nad koji će da “upravlja” Vue aplikacija:

HTML

JavaScript

U slučaju da želimo da zamenimo targetiran element sa nekim drugim, koji je definisan iz Vue instance, potrebno je da koristimo svojstvo “template”. Definisanjem templeta “gazimo” već postojeći targetirani HTML element:

Prethodni kod će pregaziti postojeći element “div” (“id=”nekiSelektor”) i štampaće ne njegovom mestu h4 tag sa sadržajem “Naslov iz template”

Data svojstvo

Kao što je već pomenuto kod Vue.js frameworka svojstvo “data” (“model” u MVVM) predstavlja sekciju vezanu za čuvanje podataka. Vue.js sva svojstva iz “data” objekta, rekurzivno konvertuje u getter/setters kako bi ih učinio “reaktivnim”. Objekat “data” mora biti jednostavan kako bi predstavljao samo podatke, pa sve API objekte browser-a (window, document…), kao i prototype svojstva objekta Vue.js ignoriše.
Svojstva koja počinju sa _ (underscore) ili sa $ (dolar znak) neće se ponašati kao proxi ka Vue instanci, jer su takvi nazivi u konfliktu s internim Vue.js svojstvima i metodama.

Primer

ili

Nakon kreiranja Vue instance više se ne mogu dodavati reaktivna data svojstva. Zbog toga se preporučuje da se takva svojstva unapred definišu, pre nego što se kreira instanca (da bi Vue.js mogao da ih obradi i definiše kao rekativna). Treba napomenuti da iako ne mogu da se naknadno dodaju tzv. “root-level” reaktivna svojstva, moguće je naknadno dodati nova svojstva u okviru već definisanih “root-level” rektivnih svojstava sa sledećpm sintaksom:

Methods, computed & watch

Već je pomenuto da ova svojstva predstavljaju most izmedju “view” i “modela”, i da se koriste za manipulisanje sa podacima iz Modela pre nego što ih prikažemo u View sekciji. Više o ovome pročitajte u članku “Svojstva Vue instance: methods, computed i watch”.

Pogledajte slične članke...

Podelite:

Ostavite komentar