Phenquestions
Sistēmas mērķis ir nodrošināt tādas funkcijas, kas izstrādātājiem atvieglo un paātrina izstrādes procesu. Vue.js ir tik ar funkcijām bagātināts JavaScript ietvars, kas nodrošina daudzas iebūvētas funkcijas un direktīvas, lai ātri veiktu izstrādes procesu. Tomēr, ja jums ir nepieciešama kāda funkcionalitāte, kas nav pieejama ietvarstruktūrā, ir jānotiek dažiem scenārijiem, tāpēc jums jāveido savs.
Šajā ierakstā mēs uzzināsim un apskatīsim iebūvētās direktīvas, ko nodrošina Vue.js ietvaru, un mēs arī iemācīsimies izveidot un izmantot paši savu Vue direktīvu.
Direktīva
Direktīvas ir atribūti, kurus varat saistīt ar DOM elementiem, pirms kuriem ir teikums “v-”, kas palīdz uzzināt bibliotēku, ka tas ir īpašs sintakses veids, ko izmanto dažu uzdevumu veikšanai. Direktīvas parasti izmanto tiešai manipulācijai ar DOM. Dažas no visbiežāk izmantotajām un slavenākajām direktīvām ir “v-if”, “v-for” un “v-show”.
Direktīvas tiek izmantotas, lai iedarbību uz DOM elementiem piemērotu, bet reaktīvi. Sapratīsim to ar piemēru:
“V-if” direktīva
Jūs varat apskatīt tekstu.
Iepriekš minētajā tagā “v-if” ir direktīva, kas izdzēsīs vai pievienos rindkopas tagu “
”, Ir atkarīgs no mainīgā“ showText ”patiesuma.
“V-show” direktīva
Līdzīgi mums ir direktīva “v-show”, kas var izpildīt to pašu iepriekš aprakstīto funkcionalitāti:
Jūs varat apskatīt tekstu.
Smalka atšķirība starp “v-if” un “v-show” ir tā, ka “v-if” lapas renderēšanas laikā elementu nepārveido, ja piesaistītais mainīgais nav patiess un tiek ielādēts, kad mainīgais kļūst patiess. Turpretī “v-show” elementu renderē tīmekļa lapas ielādes laikā, bet to slēpj. Tātad, “v-if” ir efektīvs lapas ielādes laikā un ir laikietilpīgs, kad mainīgais kļūst patiess. Tam ir jāatveido viss elements, kamēr “v-show” ir efektīvs laiks mainīgā laikietilpīguma patiesumam tīmekļa lapas ielādes laikā.
Labi! Apskatīsim direktīvu, kurā ņemts arguments.
“V-bind” direktīva
Vēl viena visplašāk izmantotā direktīva ir “v-bind”, ko izmanto mijiedarbībai un HTML atribūtu atjaunināšanai. Piemēram, ja mēs vēlamies saistīt kādu mainīgo ar “href” atribūtu tagu, mēs varam saistīt atribūtu “href” šādi:
“V-on” direktīva
Tāpat kā “v-bind” direktīva, Vue nodrošina “v-on” direktīvu mainīgā saistīšanai DOM izšauto notikumu klausīšanai. Piemēram, lai noklausītos klikšķa notikumu un piesaistītu tam kādu mainīgo, sintakse būtu šāda:
Apgrieztajos komatos mēs varam sniegt izteiksmi, kā arī funkcijas.
Secinājums
Mēs esam uzzinājuši par Vue direktīvām un redzējuši, kā Vue izmantot šīs direktīvas.js. Mēs esam apsprieduši dažas visbiežāk izmantotās un pamata iebūvētās Vue direktīvas.js, kas palīdz daudz un ietaupa ļoti daudz laika izstrādē.
