Phenquestions
Et rammeverk har som mål å gi slike funksjoner som gjør utviklingsprosessen enklere og raskere for utviklerne. Vue.js er et slikt funksjonsberiket JavaScript-rammeverk som gir mange innebygde funksjoner og direktiver for raskt å få utviklingsprosessen. Men det må komme noen scenarier når du trenger litt funksjonalitet som ikke er tilgjengelig i rammeverket, så du må bygge din egen.
I dette innlegget vil vi lære og se på de innebygde direktivene som tilbys av Vue.js framework, og vi vil også lære å lage og bruke vårt eget skreddersydde Vue-direktiv.
Direktiv
Direktiver er attributter som du kan koble til DOM-elementene, foran en klausul “v-” som hjelper til å kjenne biblioteket at det er en spesiell type syntaks som brukes til å utføre noen oppgaver. Direktiver brukes vanligvis til direkte manipulering av DOM. Noen av de mest brukte og berømte direktivene er "v-if", "v-for" og "v-show".
Direktivene brukes til å anvende effekter på DOM-elementer, men reaktivt. La oss forstå det med et eksempel:
“V-if” -direktivet
Du kan se teksten.
I taggen ovenfor er “v-if” et direktiv som vil slette eller legge til avsnittstaggen “
”, Avhenger av“ showText ”-variabelens sannhet.
“V-show” -direktivet
På samme måte har vi "v-show" -direktivet som kan utføre den samme funksjonaliteten som beskrevet ovenfor:
Du kan se teksten.
Den subtile forskjellen mellom "v-if" og "v-show" er at "v-if" ikke gjengir elementet mens siden lastes inn hvis den bundne variabelen ikke er sann, og den lastes når variabelen blir sann. I motsetning til dette vil "v-show" gjengi elementet på nettsidens lastetid, men skjuler det. Så, "v-if" er tidseffektiv på sidens lastetid og tidkrevende når variabelen blir oppfylt. Det må gjengi hele elementet mens "v-show" er tidseffektivt når det gjelder sannheten til den variable tidkrevende ved lastetiden til websiden.
Ok! La oss ta en titt på et direktiv som tar argumentet.
“V-bind” -direktivet
Et annet mest brukte direktiv er "v-bind", som brukes til å samhandle og oppdatere HTML-attributtene. For eksempel hvis vi vil binde en variabel til attributtet “href” til , kan vi binde attributtet “href” slik:
“V-on” -direktivet
Akkurat som "v-bind" -direktivet, gir Vue et "v-on" -direktiv for å binde variabelen for å lytte til hendelsene avfyrt i DOM. For eksempel, for å lytte til Click-hendelsen og binde en variabel til den, vil syntaksen gå slik:
I de omvendte kommaene kan vi gi uttrykk så vel som funksjoner.
Konklusjon
Vi har lært om direktivene i Vue og ser hvordan du bruker direktivene i Vue.js. Vi har diskutert noen av de mest brukte og grunnleggende innebygde direktivene til Vue.js, som hjelper mye og sparer enormt mye tid i utviklingen.
