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
