Phenquestions
Raamistiku eesmärk on pakkuda selliseid funktsioone, mis muudavad arendajate arendusprotsessi lihtsamaks ja kiiremaks. Vue.js on selline funktsioonidega rikastatud JavaScripti raamistik, mis pakub paljusid sisseehitatud funktsioone ja direktiive, et arendusprotsessi kiiresti teha. Kuid kui teil on vaja mõnda funktsionaalsust, mida raamistik ei võimalda, peavad tulema mõned stsenaariumid, nii et peate oma üles ehitama.
Selles postituses õpime ja vaatame Vue pakutavaid sisseehitatud direktiive.js raamistik ja õpime ka looma ja kasutama omaenda valmistatud Vue direktiivi.
Direktiiv
Direktiivid on atribuudid, mille saate linkida DOM-i elementidega, eesliitega klauseliga “v-”, mis aitab teeki teada saada, et see on teatud tüüpi süntaks, mida kasutatakse mõnede ülesannete täitmiseks. DOM-i otseseks manipuleerimiseks kasutatakse tavaliselt direktiive. Mõned enimkasutatavad ja kuulsamad direktiivid on “v-if”, “v-for” ja “v-show”.
Direktiive kasutatakse mõju rakendamiseks DOM-i elementidele, kuid reaktiivselt. Mõistame seda näite abil:
“V-if” direktiiv
Saate teksti vaadata.
Ülaltoodud märgendis on „v-if” direktiiv, mis kustutab või lisab lõigusildi „
”, Sõltub muutuja“ showText ”tõesusest.
“V-show” direktiiv
Samamoodi on meil ka „v-show“ direktiiv, mis suudab täita eespool kirjeldatud funktsioone:
Saate teksti vaadata.
Peen erinevus “v-if” ja “v-show” vahel on see, et “v-if” ei renderi lehte laadides elementi, kui seotud muutuja pole tõene ja see laaditakse siis, kui muutuja saab tõeks. Seevastu “v-show” renderdab elemendi veebilehe laadimise ajal, kuid peidab selle. Niisiis on “v-if” lehe laadimise ajal aeganõudev ja muutuja tõeks saamisel aeganõudev. See peab renderdama kogu elemendi, samal ajal kui "v-show" on ajale kuluva muutuja õigsuse jaoks veebiteabe laadimise ajal tõhus.
Hästi! Vaatame direktiivi, mis võtab vastu argumendi.
„V-bind“ direktiiv
Teine kõige sagedamini kasutatav direktiiv on „v-bind”, mida kasutatakse HTML-atribuutide interakteerimiseks ja värskendamiseks. Näiteks kui soovime siduda mõne muutuja atribuudiga „href” sildi abil saame atribuudi „href” siduda järgmiselt:
„On-on“ direktiiv
Nii nagu „v-bind“ direktiiv, pakub ka Vue „v-on“ direktiivi muutuja sidumiseks DOM-is käivitatud sündmuste kuulamiseks. Näiteks kliki sündmuse kuulamiseks ja mõne muutuja sidumiseks süntaks läheks järgmiselt:
Pööratud komades võime pakkuda nii avaldist kui ka funktsioone.
Järeldus
Oleme õppinud Vue direktiivide kohta ja näinud, kuidas Vue'i direktiive kasutada.js. Oleme arutanud Vue enimkasutatavaid ja lihtsamaid sisseehitatud direktiive.js, mis aitab palju ja säästab arenduses tohutult aega.
