Vue.js è un framework javascript leggero e versatile, che permette di interagire facilmente con il DOM. Sul sito ufficiale: https://vuejs.org/ è possibile trovare informazioni utili, documentazione e quant’altro. Quello che vediamo di seguito saranno semplici e basilari esercizi per entrare in confidenza con la sintassi e la logica di questo strumento, senza lo scopo o la presunzione di essere esaustivi o completi.
Una volta implementato nel nostro codice HTML il richiamo a Vue.js tramite CDN: https://cdn.jsdelivr.net/npm/vue/dist/vue.js, avremo a disposizione tutto ciò che è necessario per iniziare a divertirci. Vediamo quindi 3 semplici modi per interagire/renderizzare del codice sfruttando Vue.
See the Pen RQGKYv by Davide De Maestri (@gleenk) on CodePen.13441
Alcune brevi note preliminari per comprendere l’esempio:
- L’interpolazione dei dati avviene tramite doppie parentesi graffe (in soldoni, viene interpretato e quindi “letto” da Vue.js)
- L’oggetto Vue (new Vue) in questo esempio ha 3 proprietà ovvero:
- el (che definisce l’elemento del DOM dentro cui agisce Vue)
- data (che contiene le proprietà, in questo caso “title”)
- methods (che contiene i metodi/funzioni che eseguono le azioni)
- L’attributo v-on: che abbiamo assegnato all’input si chiama “direttiva” e si occupa di ascoltare gli eventi che arrivano dal DOM ed attivarsi all’occorrenza. In questo caso abbiamo detto di attivarsi quando viene effettuata qualsiasi attività sull’input stesso (keyup ecc…)
Tornando invece all’esempio, sono presenti 3 modi diversi di interagire col DOM, rappresentati dai 3 metodi diversi utilizzati.
Esempio 1: data-binding
Nel primo caso, attraverso la direttiva v-on:input attiviamo il metodo changeTitle() che, come indicato nei commenti al codice, cambia il contenuto di title in base al value dell’elemento target. Quindi, in parole povere, ciò che viene digitato nell’input diventa il valore di title.
Esempio 2
Nel secondo esempio invece viene semplicemente mostrata la possibilità di inserire direttamente la funzione tra parentesi graffe e veder stampato il contenuto che viene ritornato dalla funzione. Questo è possibile soltanto se return restituisce una stringa.
Esempio 3
Questo esempio è stato fatto solo ed esclusivamente per far vedere una proprietà interessante di Vue. Ovvero che il framework ci permette di avere sempre a disposizione tutte le proprietà dell’oggetto, in questo caso “title” anche se si trovano al di fuori del nostro metodo.
