Hva er et vue -direktiv, og hvordan du bruker det?
Et rammeverk har som mål å tilby slike funksjoner som gjør utviklingsprosessen enklere og raskere for utviklerne. Vue.JS er en slik funksjonsanriket JavaScript-rammeverk som gir mange innebygde funksjoner og direktiver for raskt å gjøre utviklingsprosessen. Men det må komme noen scenarier når du trenger litt funksjonalitet som ikke er tilgjengelig av rammene, så du må bygge ditt eget.
I dette innlegget vil vi lære og ta en titt på de innebygde direktivene levert 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, prefiks av klausulen “V-” som hjelper til med å 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” -direktiv
Du kan se teksten.
I taggen ovenfor er "V-IF" et direktiv som vil slette eller legge til avsnitts-taggen "
”, Avhenger av" ShowText "-variabelenes sannhet.
“V-show” -direktiv
Tilsvarende har vi “V-show” -direktivet som kan utføre den samme funksjonaliteten beskrevet ovenfor:
Du kan se teksten.
Den subtile forskjellen mellom “V-IF” og “V-show” er at “V-IF” ikke gjengir elementet mens du laster siden hvis den bundne variabelen ikke er sant og den lastes når variabelen blir sann. Derimot vil "V-show" gjengi elementet på websidenes lastetid, men skjuler det. Så "V-IF" er tid effektiv på sidens last tid og tidkrevende når variabelen blir sann. Det må gjengi hele elementet mens "V-show" er effektiv tid på sannheten til den variable tidkrevende på lastetidspunktet på websiden.
Ok! La oss se på et direktiv som tar argumentet.
“V-Bind” -direktiv
Et annet mest brukt direktiv er "V-Bind", som brukes til å samhandle og oppdatere HTML-attributtene. Hvis vi for eksempel vil binde en variabel til "Href" -attributtet til taggen, kan vi binde "Href" -attributtet slik:
“V-On” -direktiv
Akkurat som "V-Bind" -direktivet gir Vue et "V-ON" -direktiv for å binde variabelen for å lytte til hendelsene som ble avfyrt i DOM. For å lytte til klikkhendelsen og binde en viss variabel for det, vil syntaksen for eksempel gå slik:
I de omvendte kommaene kan vi gi uttrykket så vel som funksjoner.
Konklusjon
Vi har lært om direktivene i Vue og se 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.