Direktiva v-on:

Prosledjivanje argumenata handler funkciji:

a) prosledjivanje samo event objekta

Ako u sklopu direktive ne prosledimo nikakv argument, Vue.js automatski u pozadini uvek prosledjuje “event objekat”. Stoga ga uvek možemo iskoristi i pozvati u sklopu event handler metode.

Primer

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

b) prosledjivanje argumenta

Kada želimo da callback funkciji prosledimo neki parametar, a da to nije event objekat, potrebno je da koristimo sledeću sintaksu:

Primer

See the Pen Vue prosledjivanje argumenta event handleru by Web programiranje (@chos) on CodePen.

c) Prosledjivanje argumenta i event objekta

Kada callback funkciji pored specifičnog parametra želimo da prosledimo i “event objekat” potrebno je da ga navedemo sa “$event”:

Event modifiers

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

NAPOMENA:
Modifikatori dogadjaja se mogu nadovezivati jedan na drugi <button @click.stop.prevent="doThis"></button>
Pošto se i izvršavaju prema redosledu kako su navedeni, treba na to obratiti pažnju.

.stop

Kada se ovaj modifikator nadoveže na direktivu ima istu funkcionalnosti kao da smo tom u sklopu event handlera pozvali metodu event.stopPropagation() i tako sprečili propagaciju dogadjaja

Primer

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

.prevent

Kada se ovaj modifikator nadoveže na direktivu ima istu funkcionalnosti kao da smo tom u sklopu event handlera pozvali metodu event.preventDefault().

Primer

U ovome primeru koristeći modifikator .prevent sprečavamo defaultno ponašanje forme da se pri kliku na dugme “izračunaj” da se submit-uje. Kada ovaj kod ne bi koristio modifier “prevent” onda bi se odmah nakon klika na dugme stranica ponovno učitala, jer submitujemo formu. Pri kliku na dugme bi se takodje pozivao i event handler “calculate”, ali stranica bi se reloadovala pa ne bi videli rezult. Treba pojasniti da bi istu funkcionalnost postigli bez modifikatora ubacivanjem koda event.preventDefault(); na početku metode “calculate”. Medjutim korišćenje modifikatora je jednostavnije i sam pogled na HTML jasno daje do znanja da je sprečeno podrazumevano ponašanje forme.

See the Pen Modifier na event direktivi v-on by Web programiranje (@chos) on CodePen.

Key modifikatori

Ovi modifikatori omogućavaju da se aktivira event handler funkcija samo ukoliko se koristi odredjeno dugme. Najčešće korišćeni key modifikatori su:

1. .enter

2. .tab

3. .delete

4. .esc

5. .space

6. .up

7. .down

8. .left

9. .right

Pored ovih “običnih” dugmadi tastature, često se koriste i sistemska dugmad:

10. .ctrl

11. .alt

12. .shift

13. .meta (na macintosh-u ⌘, a na windows-u ⊞)

Primer

Primer

Pored samog naziva dugmeta možemo da koristimo i njihov alijas (Enter je 13):

Mouse modifikatori

Ovi modifikatori se koriste da se sa njima jasnije definiše dogadjaj vezan za rad miše, u zavisnosti od korišćenog dugmeta.

1. .left

2. .right

3. .middle

Za levo dugme je podrazumevani dogadjaj “onclick”, dok je za desni taster podrazumevan dogadjaj “oncontextmenu”, srednje dugme nema definisan podrazumevani tip dogadjaja. Pored podrazumevanih dogadjaja na sva tri dugmeta se mogu koristi još i “onmousedown” ili “onmouseup” dogadjaji. Pošto za podrazumevane dogadjaje nema potrebe da koriste modifikatore, sledi da mouse modifikatore koristimo samo za “onmousedown” ili “onmouseup” dogadjaje.

Primer

Pošto je za “onclick” event već podrazumevano koristi levi taster, glupo je koristiti ovaj modifikator na “onclick” dogadjaju, stoga modifikator koristimo samo za jedan od dva moguća dogadjaja onmousedown:

.capture

Podrazumevano redosled prenošenja dogadjaja je “bubbling” (dogadjaj se prenosi od unutrašnjosti ka spoljašnjem elemetu), medjutim ukoliko želimo da koristimo obrnuti smer prosledjivanja dogadjaja tzv. “capturing” je neophodno da koristimo modifikator .capture. Više o redosledu izvršavanja dogadjaja pročitajte u članku “Dogadjaji u JavaScript=u”

Primer

U ovom primeru iako je event listener ugradjen na srednjem elementu, ukoliko kliknemo na unutrašnji elelment i on će aktivirati dogadjaj jer se dogadjaj zbog “capture” modifikatora prosledjuje od spoljašnjosti ka unutrašnjosti. Medjutim iz istog razloga se ništa neće desiti ukoliko se klikne na spoljašnji element

See the Pen Vue Capture v-on modifikator by Web programiranje (@chos) on CodePen.

.self

Ovaj modifikator omogućava da dogadjaj bude “okinut” samo ukoliko se klikne baš na element na kome je direktiva.

Primer

U ovome primeru se može primetiti da nema ni bubbling ni capturinig prosledjivanja dogadjaja, i da će dogadjaj biti “okinut” samo na elementu na kome je definisana direktiva (event listener), u ovom slučaju samo na srednjem elementu.

See the Pen Vue event modifikator self by Web programiranje (@chos) on CodePen.

.native

Vue.js ima svoj sistem za događaje kada su u pitanju komponente, pod nazivom “prilagođeni događaji” (eng.custom events). Ovaj sistem je odvojen od standardnih (nativnih) događaja u browseru, tako da Vue.js očekuje baš custom click dogadjaj, a ne nativni dogadjaj. Stoga, ukoliko nam ipak treba nativni browserov tip dogadjaja, onda je potrebno koristiti .native modifikator na v-on direktivi.

.once

Kada se na direktivu doda .once modifikator, onda se na tom elementu može okinuti samo jedan dogadjaj.

Ustvari dogadjaj se ponaša kao da je u opcijama za dogadjaj u options delu

definisana vrednost { once: true }. Pogledajte više o ovome u dokumentaciji u članku “EventTarget.addEventListener()”.

.passive

Kada se na direktivu doda .pasive modifikator, onda on obezbedjuje da se na tom elementu nikada ne pozove preventDefault () metoda. Čak i ako se nekada to desi, Vue.js će ga ignorisati i generisati upozorenje u konzoli.

Ustvari event listener se ponaša kao kada se u njegovom options delu definiše vrednost { passive: true }.

Pogledajte više o ovome u MDN dokumentaciji u članku “addEventListener()”.