Vediamo brevemente 3 delle principali direttive di Vue.js per imparare a conoscerle meglio.

Innanzitutto, che cos’è una direttiva (directive)? Una directive è un’istruzione che inserisco nel codice, e fa il binding (in italiano “legame”) tra l’html ed i dati che si trovano nell’istanza di Vue.js.

La directive v-once

In Vue.js quando andiamo a stampare una variabile/funzione tra graffe, il suo valore viene sovrascritto se esso viene modificato dalla variabile/funzione stessa in altre parti, eseguite successivamente, del codice. Quindi se per esempio inizialmente diamo a {{ title }} il valore di “Hello World!” e successivamente quel valore viene cambiato, ovunque {{ title }} assumerà l’ultimo valore attribuitogli. Per evitare questo, e tenere traccia dei valori iniziali è possibile usare la directive v-once, come nell’esempio seguente:

See the Pen rJzBZz by Davide De Maestri (@gleenk) on CodePen.13441

La directive v-bind

La directive v-bind permette di  stampare un link dentro ad un attributo html in modo dinamico (ovvero generato da Vue). Quindi, per poter stampare un link o un valore dinamico, dentro ad un attributo html, non si dovrà scrivere semplicemente {{ link }} ma occorrerà usare v-bind. Come? Vediamolo nell’esempio:

See the Pen rJzVRY by Davide De Maestri (@gleenk) on CodePen.13441

La directive v-html

Ultima della nostra terna, è la directive v-html che permette di renderizzare codice html dentro alle nostre stringhe. Tuttavia bisogna prestare molta attenzione nell’utilizzo di v-html, infatti tramite questa direttiva è possibile iniettare codice malevole, è importante quindi fare in modo che venga utilizzato soltanto laddove si è sicuri che quell’output generato sia conosciuto e sicuro.

See the Pen zRdGVW by Davide De Maestri (@gleenk) on CodePen.13441