Phenquestions
Cilj okvira je zagotoviti takšne funkcije, ki razvijalcem olajšajo in pospešijo razvojni proces. Vue.js je tako s funkcijami obogaten okvir JavaScript, ki ponuja številne vgrajene funkcije in smernice za hiter razvojni proces. Vendar pa obstajajo nekateri scenariji, ko potrebujete nekaj funkcij, ki jih okvir ne razpolaga, zato morate zgraditi svojega.
V tej objavi se bomo naučili in si ogledali vgrajene smernice, ki jih ponuja Vue.js, naučili pa se bomo tudi ustvarjanja in uporabe lastne Vue direktive po meri.
Direktive
Direktive so atributi, ki jih lahko povežete z elementi DOM, s predpono stavka "v-", ki knjižnici pomaga vedeti, da gre za posebno vrsto sintakse, ki se uporablja za izvajanje nekaterih nalog. Direktive se običajno uporabljajo za neposredno manipulacijo z DOM. Nekatere najbolj uporabljene in najbolj znane direktive so "v-if", "v-for" in "v-show".
Direktive se uporabljajo za uporabo učinkov na elemente DOM, vendar reaktivno. Razumimo na primeru:
Direktiva „v-if“
Besedilo si lahko ogledate.
V zgornji oznaki je "v-if" direktiva, ki bo izbrisala ali dodala oznako odstavka "
", Je odvisno od resničnosti spremenljivke" showText ".
„V-show“ direktiva
Podobno imamo direktivo "v-show", ki lahko izvaja enako funkcijo, opisano zgoraj:
Besedilo si lahko ogledate.
Prefinjena razlika med "v-if" in "v-show" je v tem, da "v-if" ne naredi elementa med nalaganjem strani, če vezana spremenljivka ni true in se naloži, ko spremenljivka postane true. V nasprotju s tem bo v-show element upodobil v času nalaganja spletne strani, vendar ga bo skril. Torej, »v-if« je časovno učinkovit pri nalaganju strani in zamudno, ko spremenljivka postane resnična. Upodabljati mora celoten element, medtem ko je "v-show" časovno učinkovit glede na resničnost spremenljivke, ki traja dolgo v času nalaganja spletne strani.
Vredu! Oglejmo si direktivo, ki upošteva argument.
Direktiva „v-bind“
Druga najpogosteje uporabljena direktiva je "v-bind", ki se uporablja za interakcijo in posodabljanje atributov HTML. Na primer, če želimo neko spremenljivko povezati z atributom "href" v tag, lahko atribut “href” vežemo takole:
Direktiva „v-on“
Tako kot direktiva "v-bind" tudi Vue ponuja direktivo "v-on" za vezavo spremenljivke za poslušanje dogodkov, sproženih v DOM. Na primer, za poslušanje dogodka Click in vezavo neke spremenljivke nanj bi šla sintaksa takole:
V obrnjenih vejic lahko podajamo izraz in funkcije.
Zaključek
Spoznali smo direktive v Vue in videli, kako jih uporabiti v Vue.js. Razpravljali smo o nekaterih najbolj uporabljenih in osnovnih vgrajenih direktivah Vue.js, ki zelo pomaga in prihrani ogromno časa pri razvoju.
