Phenquestions
Un framework mira a fornire tali funzionalità che rendono il processo di sviluppo più facile e veloce per gli sviluppatori. Vue.js è un framework JavaScript così ricco di funzionalità che fornisce molte funzioni e direttive integrate per rendere rapidamente il processo di sviluppo. Tuttavia, devono presentarsi alcuni scenari in cui hai bisogno di alcune funzionalità che non sono disponibili dal framework, quindi devi crearne di tue.
In questo post, impareremo e daremo un'occhiata alle direttive integrate fornite da Vue.js e impareremo anche a creare e utilizzare la nostra direttiva Vue personalizzata.
Direttiva
Le direttive sono attributi che puoi collegare con gli elementi DOM, preceduti dalla clausola "v-" che aiuta a conoscere la libreria che è un tipo speciale di sintassi utilizzata per eseguire alcune attività. Le direttive vengono solitamente utilizzate per la manipolazione diretta del DOM. Alcune delle direttive più utilizzate e famose sono “v-if”, “v-for” e “v-show”.
Le direttive vengono utilizzate per applicare effetti sugli elementi DOM ma in modo reattivo. Capiamolo con un esempio:
Direttiva “v-if”
Puoi visualizzare il testo.
Nel tag sopra, la "v-if" è una direttiva che cancellerà o aggiungerà il tag di paragrafo "
”, dipende dalla veridicità della variabile “showText”.
Direttiva “v-show”
Allo stesso modo, abbiamo la direttiva "v-show" che può eseguire la stessa funzionalità descritta sopra:
Puoi visualizzare il testo.
La sottile differenza tra "v-if" e "v-show" è che "v-if" non esegue il rendering dell'elemento durante il caricamento della pagina se la variabile associata non è vera e si carica quando la variabile diventa vera. Al contrario, "v-show" renderà l'elemento al momento del caricamento della pagina web ma lo nasconde hide. Quindi, "v-if" è efficace nel tempo al caricamento della pagina e richiede tempo quando la variabile diventa vera. Deve rendere l'intero elemento mentre "v-show" è tempo effettivo sulla veridicità della variabile che richiede tempo al momento del caricamento della pagina web.
Tutto a posto! Diamo un'occhiata a una direttiva che accetta 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 associare una variabile all'attributo "href" del tag, possiamo associare l'attributo "href" in questo modo:
Direttiva “v-on”
Proprio come la direttiva "v-bind", Vue fornisce una direttiva "v-on" per vincolare la variabile per l'ascolto degli eventi generati nel DOM. Ad esempio, per ascoltare l'evento Click e associare alcune variabili ad esso, la sintassi dovrebbe essere questa:
Tra virgolette possiamo fornire sia l'espressione che le funzioni.
Conclusione
Abbiamo imparato a conoscere 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 fa risparmiare un'enorme quantità di tempo nello sviluppo.
