Guida Tutorial a Vue.js – 1° parte – Introduzione

Se vuoi imparare ad usare Vue.js sei nel posto giusto, questa guida ti spiegherà come creare una applicazione a singola pagina partendo da zero. La guida è composta da diversi articoli, in cui svilupperemo questa applicazione esaminando nel contempo gli aspetti principali di Vue.js.

Vue.js è un sistema che consente di creare delle viste HTML reattive, cioè collegate ad una serie di dati contenuti in un’istanza dell’oggetto Vue, la cui variazione comporta una modifica della vista html. Per fare questo Vue.js crea un DOM virtuale, collegato al DOM reale, il cui contenuto scaturisce dall’elaborazione dei dati dell’istanza Vue. Quando questi dati cambiano, cambia anche il DOM virtuale; siccome questo è collegato con quello reale, ad ogni variazione del DOM virtuale corrisponde la variazione del DOM reale. In altre parole, le modifiche ai dati comportano un’immediata modifica della pagina web, senza che sia necessario un nuovo caricamento della pagina. Per rendere il risultato più veloce, ad ogni modifica non verrà effettuato un nuovo rendering dell’intera pagina web, ma soltanto di quegli elementi del DOM che sono variati rispetto al rendering precedente.

Inizia subito ad utilizzare Vue.js

L’aspetto che più ti colpirà di Vue.js è la sua facilità d’uso, sopratutto rispetto ad altri framework javascript che richiedono complicate procedure di installazione di moduli, l’utilizzo di task runner e chi più ne ha più ne metta. Non che queste procedure non siano previste, ma sono richieste soltanto nel momento in cui l’applicazione da realizzare raggiunge un certo grado di complessità. Per tale motivo questo framework si autodefinisce “progressivo”, perchè può essere integrato molto facilmente all’interno di un sito web per svolgere il suo compito base, cioè gestire la costruzione delle viste, ma consente anche lo sviluppo di applicazioni complesse o di Single Page Applications utilizzando librerie e componenti esterni. Come vedrai i primi articoli della guida non richiederanno particolari procedure di installazione.
Per iniziare ad utilizzare Vue.js puoi semplicemente inserire questo codice all’interno del tag head della tua pagina html:

<script src=”https://cdn.jsdelivr.net/npm/vue”></script>

Questo link conduce all’ultima versione di Vue pubblicata su npm e ti consentirà sin da subito di utilizzare Vue e seguire questa guida, che ha l’obiettivo di costruire un sito di annunci immobiliari, con l’aspetto che puoi vedere in questa immagine:

schermata del sito che costruiremo nel corso della guida
Anteprima del sito che costruiremo

Come vedrai fra poco, soltanto l’header ed il footer del sito sono realizzate con codice html statico, tutto il resto è opera di Vue.js!

Creiamo la prima applicazione Vue

Con il tuo editor di codice crea un nuovo file html e copia ed incolla al suo interno il seguente codice

<!DOCTYPE html>
<html>
    <head>
        <title>Vue Tutorial</title>
        <link rel="stylesheet" href="foundation.min.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald:700" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.2.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    </head>
    
    <body>
        
<div class="wrapper row">
            
<header class="site-header">
                    
<div class="site-branding small-12 large-3 columns" id="site-branding">
                        <a href="#" title="Vue Tutorial">
                            
<h1 class="site-title">Vue Tutorial</h1>

                        </a>
                        

Il sito per creare con Vue.js

                    </div>

<!-- .site-branding -->
                    
<div class="site-header-menu small-12 large-9 columns">
                        
<nav class="main-navigation" role="navigation" aria-label="Primary Menu">
                            
<ul id="menu-primary" class="menu">
                                
<li class="menu-item">
                                    <a href="#">Home</a>
                                </li>

                                
<li class="menu-item">
                                    <a href="#">Chi siamo</a>
                                </li>

                                
<li class="menu-item">
                                    <a href="#">Blog</a>
                                </li>

                                
<li class="menu-item">
                                    <a href="#">Contatti</a>
                                </li>

                            </ul>

                        </nav>

<!-- .main-navigation -->
                    </div>

<!-- .site-header-menu -->
            </header>

            
<section id="main-app">
            </section>

            
<footer class="site-footer">
                
<ul>
                    
<li>
<h3>Contatti</h3>
</li>

                    
<li>Facebook</li>

                    
<li>LinkedIn</li>

                    
<li>Google+</li>

                </ul>

            </footer>

        </div>

    </body>
</html>

Salva il file appena creato e nella stessa cartella salva i file style.css e foundation.min.css, che hanno il solo scopo di dare uno stile grafico e responsivo al tutto. Se non hai mai utilizzato Foundation 6 non ti preoccupare, ho solo inserito alcune classi per dare un minimo di responsività al layout.
Come puoi vedere, prima della chiusura del tag head abbiamo inserito i link alle librerie jQuery e Vue. Mentre il primo non è indispensabile (ci servirà soltanto in seguito, quando dovremo utilizzare JSON) il secondo è necessario, ovviamente, perchè ci dà accesso al costruttore Vue, che a sua volta ci consente di utilizzare l’oggetto Vue per accedere a tutte le funzionalità del framework.

Come accennato, il codice contiene un tag header ed un tag footer, che hanno solo uno scopo per così dire “decorativo”, sui quali non ci soffermeremo. Quello che devi notare è invece il tag section id=”main-app”, è lì che avviene la magia!
All’interno di questo tag digita questo codice:


<h1>{{messaggio}}<\h1>

poi scrolla verso il basso, prima della chiusura del tag body digita quest’altro codice:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20var%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20el%3A%20'%23main-app'%2C%0A%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20messaggio%3A%20'Ciao%20mondo!!'%0A%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Hai appena creato un’istanza dell’oggetto Vue e lo hai assegnato alla variabile vm (vm sta per view model). Quando inizializzi un’istanza di Vue, le passi un’oggetto contenente una serie di opzioni, che possono essere dati, componenti, metodi ed altro, che vedremo più in dettaglio nel corso della guida.

Gli elementi dell’oggetto Vue

Nel nostro caso abbiamo innanzitutto un elemento el (che sta per element), che identifica l’elemento html che verrà utilizzato da Vue per gestire le viste. Come ho già detto, poichè le applicazioni Vue rimpiazzano un elemento del DOM, el serve proprio a riconoscere qual è l’elemento da rimpiazzare, utilizzando un selettore CSS. Nel nostro caso, stiamo individuando il tag <section id=”main-app”> con il selettore #main-app.
L’elemento successivo è l’oggetto data, che contiene delle proprietà che puoi utilizzare all’interno dell’applicazione. Quando le informazioni contenute all’interno di queste proprietà cambiano, Vue automaticamente verifica se il DOM deve essere modificato di conseguenza, ed in caso affermativo, effettua immediatamente tale modifica. Per questo motivo all’inizio dell’articolo ho parlato di viste HTML reattive. Salva il file e visualizzalo nel browser, dovresti trovare la scritta “Ciao mondo” subito sotto l’header della pagina. In questo caso Vue ha eseguito una interpolazione di testo: ha inserito il valore della proprietà messaggio dell’oggetto data all’interno del tag {{messaggio}}.
Se vuoi testare la reattività della vista, apri la console javascript del tuo browser ad inserisci la seguente riga di codice:

vm.messaggio = "Buongiorno universo!!"

Premi invio e vedrai cambiare all’istante il messaggio a video.

Ricorda che le proprietà reattive sono soltanto quelle contenute nell’oggetto data al momento dell’inizializzazione dell’istanza. Vue ti consente di creare nuove proprietà dopo l’inizializzazione, ma queste non saranno reattive. Pertanto è opportuno dichiarare tutte le proprietà che verranno utilizzate nelle viste reattive al momento dell’inizializzazione dell’istanza Vue, anche con un valore vuoto. Riferendoci all’esempio precedente, se vorrai utilizzare un secondo messaggio dovrai scrivere così:

var vm = new Vue({
   el: '#main-app',
   data: {
      messaggio: 'Ciao mondo!!',
      messaggio_2: ''
   }
})

Successivamente potrai sempre assegnare un valore alla proprietà messaggio_2.

L’interpolazione di testo è la modalità base di passaggio di dati in Vue ed è caratterizzata dalla sintassi con le doppie parentesi graffe. Tieni presente che con questo tipo di sintassi è possibile trasferire i dati in formato testo, non in formato HTML; inoltre questa sintassi non può essere utilizzata all’interno di attributi HTML. Prova ad aggiungere un’altra proprietà all’interno dell’oggetto data, modificando il codice in questo modo:

var vm = new Vue({
   el: '#main-app',
   data: {
      messaggio: 'Ciao mondo!!',
      link: 'https://www.vuejs.org'
   }
})

Inserisci all’interno del tag section, sotto il tag h1 il codice seguente:

<a href="{{link}}">link a vue.js</a>

Salva il file, aprilo nel browser e prova a cliccare sul nuovo link che hai appena creato. Vedrai che il link non funziona perchè la direttiva che abbiamo utilizzato per l’interpolazione non è corretta, nel caso degli attributi HTML occorre utilizzare la direttiva v-bind la cui sintassi è la seguente:
v-bind : attributo = “proprietà”
Modifica il tag <a> che hai creato prima in questo modo:

<a v-bind:href="link">link a vue.js</a>

Adesso il link funzionerà correttamente. La direttiva v-bind ha anche una forma sintetica, formata soltanto dai due punti che precedono l’attributo. Il codice <a v-bind:href=”link”>link a vue.js</a> funziona ugualmente anche se è scritto cosi: <a :href=”link”>link a vue.js</a>.

Siamo arrivati alla fine del primo articolo della guida, nel prossimo post continueremo ad esaminare le principali direttive di Vue.js.