Šta su custom direktive?

Direktiva je generalno neki poseban token u markupu koji govori biblioteci da uradi nešto sa DOM elementom. Vue ima svoje predefinisane direktive ali šta ako želimo da uradimo nešto ili izvršimo neku akciju koja još uvek nije eksplicitno definisana ni sa jednom Vue direktivom. Vue vam omogućava da kreiramo sopstvenu prilagođenu direktivu gde možemo definisati custom radnju koju želimo a koje odgovaraju individualnim potrebama projekta.

Sintaksa za custom direktivu

Za kreiranje nove custom direktive se poziva funkciju directive() na Vue instanci. Ova funkcija prihvata dva argumenta: ime direktive i objekat sa svim “udicama” (hooks) vezane za životni ciklus Vue instance.

da bude jasnije:

Naziv direktive

Koje god ime da izaberemo za custum direktivu, Vue će automatski staviti prefiks ispred imena direktive v-, tako da šablon može da pristupi vašoj direktivi kao v-naziv_direktive.

Udice koje mogu da se koriste

U sklopu objekta koji se prosledju kao drugi parametar metode directive() se prosledjuju tzv. “udice” na koje se “kači” i aktivira direktiva. Evo je lista dostupnih udica u ver. 3.0:

  • created: poziva se pre nego što se primene atributi ili slušaoci događaja vezanog elementa. Ovo je korisno u slučajevima kada direktiva treba da doda (attach) slušaoce događaja koji moraju biti pozvani pre normalnih slušalaca događaja v-on.
  • befhoreMount: poziva se kada je direktiva prvi put vezana za element i pre nego što je povezana (mounted) roditeljska komponenta.
  • mounted: poziva se kada je aplikacija povezana (mounted) za element.
  • beforeUpdate>: poziva se pre nego što se VNode koji sadrži komponentu ažurira.
  • updated: poziva se nakon ažuriranja VNode komponente.
  • beforeUnmount: poziva se pre nego što se roditeljska komponenta “odkači” od elementa.
  • Unmounted: poziva se samo jednom, kada je direktiva otkačena od HTML elementa.
Primer

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

Podelite:

Ostavite komentar