Phenquestions
En ramme sigter mod at tilvejebringe sådanne funktioner, der gør udviklingsprocessen lettere og hurtigere for udviklerne. Vue.js er sådan en funktionsberiget JavaScript-ramme, der giver mange indbyggede funktioner og direktiver til hurtigt at udvikle processen. Men der skal komme nogle scenarier, når du har brug for nogle funktioner, der ikke er tilgængelige i rammen, så du skal bygge din egen.
I dette indlæg vil vi lære og se på de indbyggede direktiver, der leveres af Vue.js framework, og vi lærer også at oprette og bruge vores eget skræddersyede Vue-direktiv.
Direktiv
Direktiver er attributter, som du kan linke til DOM-elementerne, præfikset af klausulen “v-”, som hjælper med at kende biblioteket, at det er en særlig type syntaks, der bruges til at udføre nogle opgaver. Direktiver bruges normalt til direkte manipulation af DOM. Nogle af de mest anvendte og berømte direktiver er "v-if", "v-for" og "v-show".
Direktiverne bruges til at anvende effekter på DOM-elementer, men reaktivt. Lad os forstå det med et eksempel:
"V-if" -direktivet
Du kan se teksten.
I ovenstående tag er "v-if" et direktiv, der sletter eller tilføjer afsnitstag "
”, Afhænger af” showText ”-variabelens sandhed.
”V-show” -direktivet
På samme måde har vi "v-show" -direktivet, der kan udføre den samme funktionalitet som beskrevet ovenfor:
Du kan se teksten.
Den subtile forskel mellem "v-if" og "v-show" er, at "v-if" ikke gengiver elementet, mens siden indlæses, hvis den bundne variabel ikke er sand, og den indlæses, når variablen bliver sand. I modsætning hertil gengiver "v-show" elementet på websides indlæsningstid, men skjuler det. Så "v-if" er tidseffektiv på sidens indlæsningstid og tidskrævende, når variablen bliver sand. Det skal gengive hele elementet, mens "v-show" er tidseffektivt på sandheden af den variable tidskrævende ved indlæsningstiden på websiden.
I orden! Lad os se på et direktiv, der tager argumentet.
"V-bind" -direktivet
Et andet mest anvendt direktiv er "v-bind", som bruges til at interagere og opdatere HTML-attributterne. For eksempel, hvis vi vil binde en variabel til attributten "href" for tag, kan vi binde attributten "href" på denne måde:
"V-on" -direktivet
Ligesom "v-bind" -direktivet giver Vue et "v-on" -direktiv til binding af variablen til at lytte til begivenhederne affyret i DOM. For eksempel for at lytte til Click-begivenheden og binde en variabel til den, ville syntaksen gå sådan ud:
I de omvendte kommaer kan vi give udtryk såvel som funktioner.
Konklusion
Vi har lært om direktiverne i Vue og se, hvordan man bruger direktiverne i Vue.js. Vi har diskuteret nogle af de mest anvendte og grundlæggende indbyggede direktiver fra Vue.js, hvilket hjælper meget og sparer enormt tid i udviklingen.
