Cos'è una direttiva Vue e come usarla?
Un framework mira a fornire tali caratteristiche che rendono il processo di sviluppo più semplice e più veloce per gli sviluppatori. Vue.JS è un tale framework JavaScript arricchito che fornisce molte funzioni e direttive integrate per rendere rapidamente il processo di sviluppo. Ma ci devono venire alcuni scenari quando hai bisogno di alcune funzionalità che non sono disponibili dal framework, quindi devi costruire il tuo.
In questo post, impareremo e daremo un'occhiata alle direttive integrate fornite dalla VUE.JS Framework e impareremo anche a creare e utilizzare la nostra direttiva VUE su misura.
Direttiva
Le direttive sono attributi che puoi collegare con gli elementi DOM, prefissati dalla clausola "V-" che aiuta a sapere la libreria che è un tipo speciale di sintassi utilizzata per eseguire alcune attività. Le direttive vengono solitamente utilizzate per la manipolazione diretta di DOM. Alcune delle direttive più usate e famose sono "V-if", "V-For" e "V-show".
Le direttive vengono utilizzate per applicare gli effetti sugli elementi DOM ma in modo reattivo. Capiamolo con un esempio:
Direttiva "v-if"
Puoi visualizzare il testo.
Nel tag sopra, il "V-if" è una direttiva che eliminerà o aggiungerà il tag paragrafo "
", Dipende dalla verità della variabile" showtex ".
Direttiva "v-show"
Allo stesso modo, abbiamo la direttiva "v-show" che può eseguire la stessa funzionalità sopra descritta:
Puoi visualizzare il testo.
La sottile differenza tra "v-if" e "v-show" è che "v-if" non rende l'elemento durante il caricamento della pagina se la variabile legata non è vera e si carica quando la variabile diventa vera. Al contrario, "V-show" renderà l'elemento al tempo di caricamento della pagina web ma lo nasconde. Quindi, "V-if" è efficace nel tempo di carico della pagina e che richiede tempo quando la variabile diventa vera. Deve rendere l'intero elemento mentre "v-show" è efficace sulla veridicità della variabile che richiede tempo al tempo di carico della pagina web.
Bene! Diamo un'occhiata a una direttiva che prende l'argomento.
Direttiva "V-Bind"
Un'altra direttiva più utilizzata è "V-Bind", che viene utilizzata per interagire e aggiornare gli attributi HTML. Ad esempio, se vogliamo legare una variabile all'attributo "Href" del tag, possiamo legare l'attributo "Href" in questo modo:
Direttiva "V-On"
Proprio come la direttiva "V-Bind", Vue fornisce una direttiva "V-On" per legare la variabile per ascoltare gli eventi sparati nel DOM. Ad esempio, per ascoltare l'evento Click e vincere alcune variabili ad esso, la sintassi sarebbe così:
Nelle virgole invertite, possiamo fornire l'espressione e le funzioni.
Conclusione
Abbiamo imparato le direttive in Vue e vediamo come usare le direttive in vue.js. Abbiamo discusso alcune delle direttive integrate più utilizzate e di base di Vue.JS, che aiuta molto e risparmia molto tempo nello sviluppo.