Guida Vue.js

In questa guida introduttiva a Vue.js illustreremo attraverso degli esempi alcuni dei concetti basilari per poter iniziare ad utilizzare il framework in un'applicazione di qualsiasi dimensione e complessità. Baseremo le prossime lezioni sulla versione 2.x, ma ci soffermeremo anche su alcune delle funzionalità introdotte a partire dalla versione 3 del framework. Al di là di poche nuove funzioni e...

Senza ulteriori indugi, vediamo subito come creare una semplice applicazione per iniziare ad acquisire familiarità con Vue.js. In questo primo esempio ci limiteremo ad includere Vue.js direttamente in una pagina HTML tramite un elemento <script> che scaricherà il file opportuno da una CDN. È possibile seguire o replicare l'esempio usando uno dei tanti servizi ed editor online come StackBlitz, CodePen,...

Nella precedente lezione abbiamo creato il nostro primo esempio in Vue.js. Si tratta di una banale applicazione in cui abbiamo però adottato una delle forme più semplici di associazione tra i dati presenti nell'istanza Vue base e la porzione di codice HTML (data binding), ovvero l'interpolazione. Interpolazione in Vue.js L'interpolazione è una tecnica di aggiornamento delle informazioni unidirezionale. Ogni volta che...

Dopo aver introdotto alcune direttive fra cui v-bind, che consente di assegnare un'espressione javascript agli attributi degli elementi HTML, illustriamo il funzionamento della direttiva v-on grazie alla quale è possibile intercettare e gestire gli eventi del DOM. La direttiva v-on Vediamo subito un primo semplice esempio in cui generiamo un numero casuale in seguito alla pressione di un pulsante. Per questo...

Vue mette a disposizione una serie di direttive predefinite grazie alle quali siamo in grado di controllare quali elementi devono essere mostrati o rimossi/nascosti al verificarsi di una determinata condizione. Le direttive che incontreremo sono v-if, v-else, v-else-if ed infine v-show. Vedremo in cosa differiscono v-if e v-show che forniscono due approcci diversi alla risoluzione dello stesso problema. La direttiva...

Dopo aver introdotto v-show, v-if e le direttive associate, continuiamo il nostro viaggio nell'esplorazione dei template in Vue.js e parliamo della direttiva v-for grazie alla quale riusciamo a mostrare sullo schermo più elementi simili partendo dalle informazioni contenute in un oggetto o in un array. Ripetere un elemento con la direttiva v-for In realtà nella forma più semplice, la direttiva v-for...

Continuiamo ad esplorare le funzionalità messe a disposizione da Vue e soffermiamoci in particolare sulle cosiddette computed properties cercando di capire in cosa differiscono rispetto ai metodi. Passiamo poi a parlare di un altro tipo di opzione, ovvero di quelli che Vue chiama watchers. Cosa sono le 'computed properties' in Vue.js Nelle precedenti lezioni abbiamo visto come utilizzare la tecnica dell'interpolazione...

Nelle precedenti lezioni abbiamo appreso le basi di Vue.js e abbiamo iniziato a capire, al meno superficialmente, come funziona il framework. A questo punto abbiamo trattato abbastanza argomenti per realizzare un esempio più articolato anche se non del tutto completo ed ottimizzato. In questa lezione vedremo quindi come creare un'applicazione rudimentale per generare dei codici QR. La versione finale dell'applicazione...

Finora abbiamo creato delle applicazioni scaricando i file da una CDN e abbiamo registrato i vari componenti localmente o globalmente creando contestualmente un'istanza base di tipo Vue. Nell'esempio visto nella precedente lezione ci siamo immediatamente accorti che questo approccio inizia a mostrare tutti i suoi limiti all'aumentare delle dimensioni e della complessità di un progetto. In particolare avevamo riportato tra i...

Nelle precedenti lezioni abbiamo visto come passare delle informazioni ad un componente tramite le cosiddette 'props' che rappresentano infatti un mezzo di comunicazioni attraverso il quale un componente genitore trasferisce dei dati agli immediati discendenti presenti nel suo template. Nel template di un componente è anche possibile aggiungere dei segnaposto in cui iniettare qualsiasi tipo di contenuto quando il componente...

Nel corso della sua esistenza ciascun componente attraversa varie fasi e va incontro ad una serie di eventi predefiniti sotto il diretto controllo del framework. Fin dal momento in cui un componente viene creato e poi montato nel DOM, passando per le fasi di aggiornamento e terminando con l'istante in cui viene rimosso dal DOM e distrutto, Vue si...

Cosa si intende per componenti dinamici Finora abbiamo visto come mostrare o nascondere dei componenti attraverso le direttive v-if e v-else. In questa lezione illustreremo come rimpiazzare dei componenti e quindi visualizzarne solo uno alla volta sullo schermo attraverso la tecnica dei componenti dinamici. Si tratta di un metodo per sostituire dinamicamente dei componenti inseriti nello stesso nodo DOM senza...

Nelle precedenti lezioni abbiamo illustrato vari esempi in cui è stata utilizzata la direttiva v-model per associare, in modo bidirezionale (two-way data binding), una proprietà dell'oggetto data di un componente al valore di un campo di input. Così facendo, ogni volta che una proprietà cambia, viene automaticamente aggiornato il valore del campo di input e viceversa. Abbiamo visto che per...

Nelle lezioni precedenti abbiamo più volte incontrato direttive come v-bind, v-on, v-if ecc... che rappresentano alcuni degli strumenti indispensabili senza i quali non potremmo realizzare delle applicazioni in Vue.js con estrema semplicità e seguendo un approccio dichiarativo. Ma Vue.js offre anche la possibilità di creare delle direttive personalizzate in modo simile a quanto abbiamo già visto per la definizione dei...

In questa lezione parleremo brevemente dei filtri che rappresentano una soluzione per trasformare e formattare dei dati dinamici di un componente. Prima di continuare è bene fare due precisazioni importanti: i filtri non modificano i dati originali, ma restituiscono una 'copia' formattata dei dati in ingresso A partire dalla versione 3 di Vue.js i filtri sono stati rimossi ed è consigliato sostituirli...

I mixin sono uno strumento per poter isolare e condividere frammenti di codice fra più componenti. In questo modo non dovremo duplicare inutilmente funzioni e dati analoghi in diverse parti di un'applicazione. Prima di continuare, è bene precisare che con l'introduzione della Composition API in Vue 3, l'uso dei Mixin è sconsigliato. Tipi di Mixin Esistono due tipi di mixin: Mixin locali: il...

In questa lezione parleremo della nuova Composition API introdotta a partire dalla versione 3 di Vue.js, ma che è possibile provare già nella versione 2 del framework attraverso il plugin @vue/composition-api. Prima di proseguire è bene sottolineare che la Composition API è del tutto opzionale ed è possibile continuare ad usare le tecniche viste nelle lezioni precedenti per definire i...

In questa lezione presenteremo una panoramica degli strumenti messi a disposizione da Vue per implementare transizioni e animazioni al fine di migliorare l'esperienza utente ed assicurare un uso più piacevole di un'applicazione. Così facendo possiamo semplificare la navigazione all'interno di un sito rendendo meno brusco ed improvviso il passaggio fra diverse sezioni o pagine. Oppure possiamo attirare l'attenzione dell'utente...

Col nome Vuex ci si riferisce ad un pattern e all'omonima libreria usata per la gestione dello stato di un'applicazione. Vuex prende ispirazione da Redux che a sua volta è nato sulla base del pattern Flux, sviluppato dal team di React con l'intento di creare un modo prevedibile, riproducibile ed affidabile per la gestione dei dati di un'applicazione. Al contrario...

In questa lezione realizzeremo un'applicazione per la raccolta di citazioni e frasi celebri utilizzando Vuex. Per semplicità useremo JSON Server per simulare il salvataggio delle citazioni su un finto server locale. JSON Server fornisce una REST API che permetterà di prelevare e salvare sul server le citazioni aggiunte attraverso un semplice form. Dietro le quinte verrà usato un file...

In quest'ultima lezione, introdurremo brevemente Vue Router che rappresenta la soluzione ufficiale per implementare un meccanismo di navigazione lato client in applicazioni realizzate con Vue.js. Prima di parlare di Vue Router, è bene chiarire alcuni concetti chiave. SPA e Routing lato client In un sito internet classico, ogni volta che l'utente vuole visitare una nuova pagina, il browser effettua una richiesta al...

Nel corso delle precedenti lezioni abbiamo illustrato i concetti chiave di Vue usando la versione 2.6 del framework. La versione 3 di Vue.js è stata ufficialmente rilasciata a settembre 2020 e le principali novità introdotte riguardano cambiamenti interni atti a migliorare le prestazioni generali e perfezionare il supporto a TypeScript. Non si tratta dunque di cambiamenti radicali come avvenuto per esempio...

In questa breve lezione, illustriamo quali modifiche sono state apportate in Vue 3 per quanto riguarda le transizioni. Le prima novità significativa riguarda i nomi delle classi CSS che vengono automaticamente aggiunti da Vue agli elementi su cui vogliamo applicare una transizione in ingresso e uscita. In Vue 2, durante il processo di transizione in ingresso, <transition> applica automaticamente 3 diverse...

Nelle precedenti lezioni abbiamo già incontrato la direttiva v-model quando abbiamo parlato dei form e degli elementi <input> predefiniti. Ricordiamo che v-model consente di implementare in modo estremamente semplice la tecnica che prende il nome di two way data binding e che consiste nella realizzazione di un legame bidirezionale fra il valore di un campo di <input> ed una...

In questa lezione parleremo di due particolari proprietà dell'oggetto data presenti in Vue 2 e Vue 3 il cui comportamento è stato modificato nell'ultima versione del framework. Stiamo parlando di $attrs e $listeners. Le speciali proprietà $attr e $listeners in Vue 2 e Vue 3 In Vue 2, nel definire un componente tramite un oggetto di opzioni, specifichiamo quali sono le...

In questa lezione ci soffermeremo su un'altra novità di Vue 3, ovvero Teleport. Si tratta di un modo per spostare un elemento o un intero sottoalbero presenti all'interno del template di un componente in una differente area del DOM. Tale funzionalità era disponibile in Vue 2.x solo tramite il plugin Portal Vue. A partire da Vue 3, il team di sviluppo...

Con l'introduzione di Vue 3 è stato aggiornato anche Vue Router la cui API resta sostanzialmente invariata a parte alcune modifiche minori di cui discuteremo in questa lezione. È bene sottolineare che Vue Router passa dalla versione 3 (per Vue 2.x) alla versione 4 (per Vue 3.x). Su questo tema si può dire che forse sarebbe stato meglio unificare...

In questa breve lezione conclusiva illustreremo rapidamente i cambiamenti introdotti nella nuova versione di Vuex che è la 4.x ed è compatibile con Vue 3. Vogliamo sottolineare che, in modo simile a ciò che accade per Vue Router, Vuex 4.x è compatibile con Vue 3 mentre Vuex 3.x è compatibile con Vue 2. Nei prossimi paragrafi non ci addentreremo...