Vuejs è un framework Javascript molto semplice da utilizzare, purtroppo non esiste una vera e propria guida vue.js in italiano. Con l’articolo di oggi, vedremo assieme di colmare questa mancanza.
La guida, per esigenze di spazio, sarà ben articolata, tuttavia non potremo addentrarci fino in fondo su alcuni concetti. Stai tranquillo comunque, troverai le risposte che cercavi e ne uscirai con una solida base.
Indice dei contenuti
Cos’è Vue.js
Vue.js è un framework Javascript ideato da Evan You. Si tratta di un framework definito progressivo e possiede, a mio avviso, molti vantaggi in più rispetto ai blasonati Angular e React, giusto per citarne un paio.
Sebbene, infatti, non permetta di effettuare la miriade di operazioni effettuabili con un framework monolitico come Angular, Vue.js regge al suo interno un intero ecosistema capace di adattarsi perfettamente ad ogni tipo di applicativo frontend.
Sono diversi i suoi punti di forza tra cui, senza dubbio, la versatilità, la facilità di utilizzo e soprattutto quella di installazione. Vue.js è, inoltre, un framework davvero poco invasivo che lavora benissimo sia da solo che con applicativi molto utilizzati come jQuery e Laravel.
Vue.js gode al giorno d’oggi di una grande popolarità tra gli sviluppatori frontend, grazie anche ad una vibrante community di supporto, capitanata dallo stesso You. Come detto, infatti, Vue.js fa parte di un vero e proprio ecosistema che gravita attorno al core del framework.
Con Vue, infatti, è possibile ottenere anche utili componenti come l’installazione tramite CLI e l’unità di testing. Si tratta di addon di Vue.js sviluppati dalla stessa community del framework e per questo sono considerati altamente affidabili.
Perché utilizzare Vue.js
Passare ad un framework Javascript è un atto dovuto quando iniziamo a scrivere codice a livelli professionali. Se il nostro obiettivo è quello di diventare sviluppatori frontend, non possiamo esimerci dal conoscere almeno un framework JS: sia questo Vue, React o Angular.
I Framework permettono di avere un ambiente di lavoro ben organizzato, ci consentono di sfruttare il MVVM (Model View View-Model), di manipolare il DOM ed effettuare operazioni “On the fly” su oggetti mutabili nel corso del ciclo di vita di un’applicazione.
La programmazione reattiva, infatti, ha completamente stravolto il concetto di frontend. Quello che un tempo era possibile solo tramite AJAX è diventato di colpo molto più facile da gestire grazie alla presenza di simili framework.
Sono diversi i punti di forza di Vue. Primo fra tutti vi è una curva di apprendimento davvero poco ripida. Se si hanno buone conoscenze di HTML, CSS e qualche nozione di Javascript, non sarà difficile iniziare a padroneggiare Vue.
Un altro aspetto molto interessante di Vue.js è la sua facilità di utilizzo. Per quanto, infatti, possiamo installarlo tramite il Node Package Manager, è possibile usare Vue anche richiamandolo semplicemente dalla CDN all’interno della nostra pagina HTML. Un metodo decisamente più semplice per chi è alle prime armi
Per iniziare ad utilizzarlo, dunque, vi basterà inserire questo script all’interno della pagina
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
Semplice vero? Mentre scrivo, la versione più recente è la 2.6.10. Quando usciranno delle nuove versioni, non dovrete fare altro che aggiornare Vue manualmente cambiando il numero di versione all’interno dello script.
Dopo questi pochi, e semplici passi, siamo già pronti per comporre la nostra prima applicazione Vue.js
Prima applicazione Vue.js
Ora che abbiamo ottenuto un’infarinatura generale sul mondo di Vue, possiamo iniziare a creare la nostra prima applicazione. Per prima cosa, nell’html, andiamo a creare un div un determinato ID. Questo sarà il contenitore della nostra applicazione.
<div id="app"></div>
Lasciamo questo div vuoto per il momento ed occupiamoci, invece della parte Javascript. Per far partire Vue dovremo creare un’instanza. Questa istanza di Vue, che racchiuderemo in una variabile chiamata vm, conterrà al suo interno un elemento, ovvero l’id app del nostro div e un oggetto, definito data, che avrà il compito di contenere i dati per l’appunto.
var vm = new Vue({ el : '#app', data: { pippo : 'pluto' } })
L’interpolazione in Vue.js
Il concetto di interpolazione è uno dei più importanti nei framework Javascript. Altro non è che la possibilità di stabilire un legame tra una variabile JS e ciò che verrà mostrato poi all’interno dell’HTML.
Nel nostro primo esempio, abbiamo creato una variabile all’interno dell’oggetto data che abbiamo chiamato pippo. Tuttavia la variabile pippo non viene stampata all’interno del DOM al momento.
Modifichiamo dunque il codice per fare in modo che questo avvenga.
<div id="app">{{pippo}}</div>Se tutto è andato per il verso giusto, troverai la scritta pluto all’interno del div con id app.
Trovi questo primo esempio completo su codepen : Esempio interpolazione Vue.js
Se hai già esperienze con Angular, troverai la sintassi molto simile. Anche il framework di Google, infatti, gestisce le variabili in interpolazione racchiudendole tra due parentesi graffe.
Sono comunque molte le differenze tra Vue e i più famosi framework Javascript sul mercato. Se vuoi conoscerle nel dettaglio, ti rimando alla sezione dedicata all’interno della guida ufficiale, in inglese.
Il v-model
Ora che conosciamo il concetto di interpolazione, possiamo passare a qualcosa di decisamente più pratico, vale a dire il v-model. Il v-model, a differenza dell’interpolazione, crea un legame indissolubile tra variabile e il suo modello di partenza.
Detta così, lo so, la definizione potrebbe sembrare un pò fumosa ma, sono convinto, che un esempio pratico ti aiuterà a schiarirti le idee.
Creiamo una semplice input di testo, al suo interno inseriremo un testo. Creiamo, infine, un elemento bold che conterrà il testo digitato nell’input. Ecco il nostro html di partenza
<div id="app"><input type="text" v-model="value"/>
Il valore inserito è <b>{{value}}</b></div>Il codice JS che regolerà il tutto, invece, è il seguente
var vm = new Vue({ el : '#app', data: { value : '' } })
Adesso prova ad inserire un testo all’interno della tua input. Cosa accade? il v-model è in grado di bindare la variabile con il valore corrente della input di testo.
Così facendo potrai vedere il tuo testo in bold on the fly. Questo piccolo esempio, disponibile su codepen ( Esempio v-model Vue.JS).
Immagina se avessi dovuto fare la stessa cosa con jQuery o in semplice Javascript. Quante righe di codice avresti dovuto utilizzare? Ecco, questo è uno dei motivi per scegliere un framework come Vue.
v-if vs. v-show
Dopo l’interpolazione e il model, affrontiamo un altro argomento che, chi sviluppa, conoscerà molto bene: sto parlando dei costrutti condizionali.
Anche Vue, infatti, ti permette di svolgere delle operazioni logiche e di confrontare delle variabili. Realizziamo dunque un esempio pratico. Creiamo una semplice applicazione che, dopo aver pescato l’ora esatta, ci restituisce un saluto diverso in base al momento della giornata in cui ci troviamo.
Ecco di seguito la nostra parte HTML
<div id="app"> <p v-if="orario < 12 && orario > 5">Buon Giorno!</p> <p v-else-if="orario >= 12 && orario <= 18">Buon Pomeriggio!</p> <p v-else>Buona sera!</p> </div>
La parte JS, invece, è la seguente.
var vm = new Vue({ el : '#app', data: { orario : new Date.getHours(); } })
Come vedete ho demandato le operazioni logiche direttamente nella view poiché si tratta di calcoli banali. Avrei, in alternativa, potuto spostare la parte logica all’interno del JS restituendo già la variabile con il valore corretto.
Anche questo esempio è disponibile su codepen: Esempio v-if Vue.js
Strettamente collegato al v-if, troviamo il v-show. La differenza sostanziale tra v-if e v-show qual è e quando usare uno oppure l’altro?
Il v-show non fa altro che nascondere l’elemento mentre con il v-if l’elemento che nella comparazione non corrisponde al vero non verrà proprio stampato nell’html.
A livello di performance, incide più il v-if, ma, in molti casi è comunque preferibile in quanto, come detto, il v-show non fa altro che nascondere l’elemento nel DOM. Ecco di seguito un esempio pratico. La parte html è la seguente
<div id="app"> <p v-show="check">V-Show</p> </div>
mentre il JS è questo
var vm = new Vue({ el : '#app', data: { check: false } })
Ti invito a cambiare la variabile check da false a true e vedere cosa accade. Non soffermarti soltanto alla parte visiva, ispeziona anche l’elemento con Firefox o Google Chrome.
Trovi l’esempio completo su codepen qui -> Esempio v-show Vue.js
Il ciclo for: v-for
Come ogni linguaggio di programmazione che si rispetti, anche Vue.js consente di ciclare all’interno di un dato elemento, che sia esso un array oppure un oggetto. Ciclare su un oggetto è un ottimo modo per ricavare informazioni evitando operazioni ridondanti. Il ciclo for in Vue.js è molto semplice da impostare. In questo esempio creiamo un array in JS con all’interno una serie di dati. Nell’html, poi, andremo a ciclare su questo array ottenendo così i dati.
Ecco la parte HTML
<div id="app">
<ul>
<li v-for="dog in dogs">{{dog}}</li>
</ul>
</div>La parte Javascript invece è la seguente
var vm = new Vue({ el : '#app', data: { dogs: ['Barboncino', 'Volpino', 'Pastore Tedesco'] } })
L’esempio è di facile intuizione. Abbiamo semplicemente creato un array contenente delle razze di cane e poi le abbiamo stampate a video ciclando sull’array. L’esempio completo è disponibile su codepen: Esempio v-for Vue.js
Ovviamente nulla ci vieta di fondere assieme più costrutti appresi. Se, ad esempio, volessimo che se la razza di cane è uguale a barboncino il testo diventi bold, potremo modificare il nostro HTML in questo modo
<div id="app">
<ul>
<li v-for="dog in dogs">
<b v-if="dog == 'Barboncino'"><span>{{dog}}</span></b>
<span v-else>{{dog}}</span>
</li>
</ul>
</div>Bindare un elemento: il v-bind
Probabilmente avrete già sentito parlare del concetto di binding. La direttiva v-bind viene utilizzata per collegare un valore ad un attributo html. Esistono due sintassi per il v-bind.
Possiamo utilizzare la solita sintassi lunga ovvero v-bind=”valore” oppure abbreviare usando i : al posto di v-bind. La scelta è vostra, io personalmente utilizzo sempre i due punti. L’importante è mantenere la stessa sintassi in tutto il codice.
Andiamo a creare un semplice bottone. La tipologia di bottone verrà decisa tramite un v-bind.
<div id="app"><button :type="buttonType">Test button</button></div>
Questo è invece il JS
var vm = new Vue({ el: '#app', data: { buttonType: 'submit' } });
L’html che verrà generato da questo esempio è il seguente
<button type="submit">Test button</button>
L’esempio completo è disponibile su Codepen: Esempio v-bind Vue.js
Template e componenti
Un altro aspetto importante di Vue è rappresentato dai template e i componenti. Questi non sono altro che pezzi di codice da poter facilmente riutilizzare all’interno del nostro layout. Vediamo dunque come creare un template riutilizzatibile innestato all’interno del codice mediante l’utilizzo di un componente Vue. I componenti sono una parte molto importante in quanto ci consentono di estendere il core di Vue.
Per prima cosa andiamo a creare il nostro componente all’interno della parte html. Per farlo non dovremo fare altro che creare una sorta di tag.
<div id="app"> <primo-componente></primo-componente> </div>
La parte JS che regola questo componente è la seguente
var primoComponente = { template: '</code> <div>primoComponente. The number: {{num}}</div> ', data: function() { return { num: Math.random() } }, methods: { showNum : function() { alert("my number is " + this.num); } } } vm = new Vue({ el : '#app', data : { num: 42 }, components: { primoComponente: primoComponente } })
Come puoi vedere ho creato la solita instanza di vue. Ho inserito nei miei dati un numero e ho creato un nuovo oggetto chiamato components. In components non ho fatto altro che cambiare la sintassi di dichiarazione del componente passando da quella con barretta centrale alla semplice notazione JS quindi da primo-componente a primoComponente.
Ho poi definito la variabile primoComponente che, al suo interno, ha un template: ovvero quello che verrà poi effettivamente stampato. Dei dati: dove abbiamo una semplice funzione javascript che restituisce un numero randomico. Un metodo: che contiene una funzione denominata showNum che non fa altro che mostrare l’alert del numero randomico precedentemente calcolato.
L’esempio completo è disponibile su Codepen: Esempio componenti Vue.js
Conclusioni
Se hai seguito attentamente la mia guida Vue.js in italiano dovresti aver carpito a pieno i concetti di base di Vue.js e soprattutto apprezzato le sue grandi potenzialità. Il mio consiglio è quello di modificare i miei esempi rendendoli più complessi.
Se hai voglia di apprendere tutti i segreti di VueJS, ti consiglio questo libro disponibile su Amazon, è in inglese, ma ti permetterà di entrare nel dettaglio, anche attraverso alcuni esempi pratici. Il libro è di facile comprensione e adatto ai neofiti.
Per sviluppare in Vue.js ti conviene utilizzare Google Chrome e scaricare questa interessante estensione dedicata a Vue.js.
Segui sempre la documentazione ufficiale Vue.js e se hai dubbi, contattami pure e sarò lieto di rispondere.