Šta su Vue.js direktive

Posted on 06/04/2018 at 16:43.Written by Dragoljub Živanović

Sintaksa Vue.js direktiva

v-direktive

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 poseban način. Specifičan prefiks je glavna naznaka biblioteci da je u pitanju direktiva, i stavlja se ispred naziva svake direktive:

Pored prefiksa, svaka direktiva ima jedinstven naziv koji joj predodredjuje ponašanje i funkcionalnost koju treba da ima.

v-example

Medjutim sam naziv nije dovoljan za bilo kakvu funkcionalnost, pa se pored naziva direktive uvek prosledjuje i neka vrednost (svaka direktiva zna šta joj je činiti sa tom vrednosti).

v-example="value"

Za neke direktive ni prosledjena vrednost nije dovoljna, pa moramo da jasnije definišemo direktivu tako što ćemo joj proslediti i argument:

v-example:arg="value"

Pored svega nabrojanog u nekim slučajevim kod nekih direktiva postoji mogućnost da modifikujemo standardno ponašanje direktive. Modifikatori su posebni postfiksovi kojima prethodi tačka.

v-example:arg.modifier="value"

Modifikatori direktiva

Modifikatori direktive (eng.modifiers) su posebni postfiksi koji se nadovezuju korišćenjem tačke na neku od direktiva, i svojim postojanjem ukazuju na to da direktiva treba da bude izmenjena na neki poseban način.

<button v-on:click.stop="showDialog">Click Here!</button>  // Zamena za event.stopPropagation()

<input type=”text” v-on:keyup.enter=”pressedEnter”>  //Dodatno definiše dugme za event

<button v-on:click.stop="showDialog">Click Here!</button> // Zamena za event.stopPropagation()

<input type=”text” v-on:keyup.enter=”pressedEnter”> //Dodatno definiše dugme za event

Pregled Vue.js direktiva

Direktive ugradjene u Vue.js:

Naziv	Skraćena sintaksa	Primena	Primer
v-bind	:	Dinamičko vezivanje HTML atributa za neko data svojstvo	<div v-bind:style="{ background: color }"></div>
v-on	@	Dadaje event listener HTML elementu	<button v-on:click="nekiEventHandler"></button>
v-model	Nema skraćenu sintaksu	Omogućava povezivanje input-a i data svojstva u oba smera tzv. “two-way data binding”	<textarea v-model="message" ></textarea>
v-if v-else-if v-else	Nema skraćenu sintaksu	Kondicionalno renderovanje HTML-a	<g v-if="vrednost === 5"></g>
v-show	Nema skraćenu sintaksu	Prikazuje ili sakriva element (uvek postoji u DOM-u za razliku od v-if koji renderuje elemenat tek ako je zadovoljen uslov)	<child v-show=”showComponent”></child>
v-pre	Nema skraćenu sintaksu	Štampa sadržaj bez komapjliranja	<div v-pre>{{ sadrzaj bez metoda }}</div>
v-text	Nema skraćenu sintaksu	Ažurira tekst elementa	<span v-text="msg"></span> isti efekat kao string interpolacija <span>{{msg}}</span>
v-html	Nema skraćenu sintaksu	Ažurira HTML elementa	<div v-html="nekiHtml"</div>
v-once	Nema skraćenu sintaksu	Samo jednom renderuje elemenat (nema re renderovanja)	<div class=”v-once”>Samo jednom se renderuje</div>

U Vue.js postoji mogućnost da programer sam definiše nove tzv. custom direktive, ali to je naprednija tema i biće kasnije obradjena u nekom od članaka.

HTML interpolacija u okviru Vue.js

Posted on 30/03/2018 at 18:12.Written by Dragoljub Živanović

Uvod

Vue.js je MVVM framework, koji ima sistem kako da poveže “model” (podatke) sa odgovarajuć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.

<p id="example">{{ message }}</p>

<script>
    new Vue ({
      el: "#example"
      data: {
        messsage: "Ovaj tekst treba da se izrenderuje!"
      }
    });
</script>

<p id="example">{{ message }}</p>

new Vue ({

el: "#example"

data: {

messsage: "Ovaj tekst treba da se izrenderuje!"

}

});

</script>

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

Životni ciklus Vue.js instance/komponente

Posted on 28/03/2018 at 20:55.Written by Dragoljub Živanović

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.

Svojstva Vue instance: methods, computed i watch

Posted on 25/03/2018 at 17:14.Written by Dragoljub Živanović

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

Pristup svojstvima Vue.js instance

Posted on 22/03/2018 at 18:42.Written by Dragoljub Živanović

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:

this.nazivSvojstvaVueInstance

1	this.nazivSvojstvaVueInstance

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    ispisiPoruku : function () {
       console.log (this.message);
    }
  }
})

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

methods: {

ispisiPoruku : function () {

console.log (this.message);

}

})

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”

var app = new Vue({
  el: "#app",
  data: {
    message: 'Poruka poslata iz closure!'
  },
  methods: {
    ispisiPoruku : function () {
       function nekaClosure(){
         return this.message;
       };
       var a =  nekaClosure()
       console.log(a);              // Vraća undefined
    }
  }
})

var app = new Vue({

el: "#app",

data: {

message: 'Poruka poslata iz closure!'

methods: {

ispisiPoruku : function () {

function nekaClosure(){

return this.message;

};

var a = nekaClosure()

console.log(a); // Vraća undefined

}

})

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.

Svojstva Vue instance

Posted on 17/03/2018 at 12:24.Written by Dragoljub Živanović

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

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

<div id="nekiSelektor"></div>

1	<div id="nekiSelektor"></div>

JavaScript

new Vue ({
   el: "#nekiSelektor"
})

new Vue ({

el: "#nekiSelektor"

})

Instalacija Vue.js

Posted on 16/03/2018 at 19:18.Written by Dragoljub Živanović

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:

ver. 3.0
ver. 2.0

<script src="https://unpkg.com/vue@next"></script>

1	<script src="https://unpkg.com/vue@next"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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.

ver. 3.0
ver. 2.0

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:

let app = Vue.createApp({ // Options objekat  });

1	let app = Vue.createApp({ // Options objekat });

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

let vm = app.mount("#app")

1	let vm = app.mount("#app")

Pa bi ceo kod izgledao ovako:

let app = Vue.createApp({ // Options objekat  });

let vm = app.mount("#app")

let app = Vue.createApp({ // Options objekat });

let vm = app.mount("#app")

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.

new Vue(  { //ovo je tzv. options objekat }  )

1	new Vue( { //ovo je tzv. options objekat } )

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

var vm = new Vue({
  // "options objekat"
})

var vm = new Vue({

// "options objekat"

})

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.