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, CodeSandbox, JSfiddle ecc… Noi però procederemo usando un editor open-source come VSCode servendoci poi di un package NPM come live-server che crea un semplice server locale in grado di aggiornare il browser ogni volta che viene modificato un file HTML/JS/CSS. In VSCode abbiamo anche installato l’estensione gratuita Vue VS Code Extension Pack che include una serie di altre estensioni che semplificano il processo di sviluppo di un’applicazione in Vue.js.
Proseguendo con il nostro esempio, per prima cosa dobbiamo assicurarci di aver installato Node.js e quindi NPM. Se non l’abbiamo già fatto, possiamo scaricare la versione corrente di Node.js dal sito ufficiale. Chi ha un po’ di dimestichezza con la shell dei comandi, può provare ad installare invece NVM (Node Version Manager) che consente di gestire contemporaneamente diverse versioni di Node.js sullo stesso computer. (È disponibile anche una versione di NVM per Windows).
Eseguiamo il seguente comando per verificare che l’installazione sia andata a buon fine e che tutto funzioni correttamente (È bene accertarsi che la variabile ambientale PATH sia stata aggiornata e che la lista dei percorsi dei comandi eseguibili in una shell comprenda anche la cartella dei package installati globalmente tramite NPM).
echo $PATH
# per esempio
/Users/claudio/.nvm/versions/node/v12.14.1/bin:/usr/local/bin:/usr/binnpm --version
6.13.6Installiamo poi live-server lanciando il comando riportato sotto che aggiunge globalmente il package in modo da poter essere eseguito via linea di comando.
npm i -g live-serverAll’interno di una nuova cartella creiamo successivamente due file index.html e app.js.
tree esempio-1-vue
.
├── app.js
└── index.html
0 directories, 2 filesDi seguito riportiamo il contenuto del file index.html in cui inseriamo, prima del tag di chiusura </body>, due elementi <script>. Il primo serve per scaricare da una CDN il bundle di Vue.js, il secondo per includere il file app.js in cui andiamo a scrivere il codice javascript necessario alla realizzazione della nostra prima applicazione in Vue.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Semplice Applicazione in Vue.js</title>
</head>
<body>
<div id="app">
<p>Hello, {{ name }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>Trascuriamo per un momento l’elemento <div> con attributo id app (il nome dell’id può essere scelto a nostro piacimento) ed il paragrafo discendente in quanto ritorneremo sulla sintassi usata a breve. Spostiamo invece la nostra attenzione sul file app.js il cui contenuto è riportato sotto.
const vm = new Vue({
el: '#app',
data: {
name: 'Vue'
}
});Nel frammento di codice contenuto nel file app.js e riportato sopra, abbiamo creato un’istanza di tipo Vue. Ogni applicazione Vue.js, anche la più semplice, deve infatti avere un’istanza base di tipo Vue che costituisce il punto di avvio dell’applicazione. L’oggetto creato con il costrutto new Vue({}) viene assegnato alla costante che per convenzione abbiamo chiamato vm (abbreviazione di ViewModel) in quanto Vue.js prende in parte ispirazione dal MVVM Pattern. In questo modo avremo una costante con visibilità globale a cui potremo successivamente accedere tramite la console degli strumenti per sviluppatori del browser.
Nel creare l’istanza base abbiamo passato come argomento un oggetto di opzioni (options object) attraverso il quale specifichiamo quale devono essere le proprietà ed il comportamento dell’istanza base.
Nell’immagine riportata sopra abbiamo unito in un’unica istantanea le due porzioni di codice HTML e JS per esaminare la relazione che esiste fra loro. Infatti el è la prima proprietà dell’oggetto di opzioni passato in fase di creazione dell’istanza Vue base. Il suo valore è pari alla stringa "#app" corrispondente al selettore CSS che consente di ottenere un riferimento all’elemento HTML con id pari ad "app" (In alternativa avremmo potuto passare direttamente un oggetto di tipo HTMLElement alla proprietà ‘el’). In questo modo colleghiamo l’elemento <div> all’istanza di Vue base. Quest’ultima assumerà quindi il controllo di tale elemento e degli elementi discendenti.
La proprietà data è un oggetto le cui proprietà vengono aggiunte in fase di creazione dell’istanza Vue al sistema di reattività del framework. Ciò vuol dire che quando i valori di tali proprietà vengono modificati, Vue provvede ad aggiornare automaticamente le informazioni inserite all’interno del codice HTML. In quest’ultimo abbiamo infatti utilizzato una sintassi particolare costituita da una doppia coppia di parentesi graffe ({{ name }}) all’interno delle quali è presente il nome della proprietà name dell’oggetto data. Vue si occuperà di sostiuire le parentesi graffe con il valore della proprietà in esse contenuta.
Per verificare che tutto funzioni correttamente apriamo una shell dei comandi, spostiamoci nella cartella base del nostro esempio e lanciamo il comando live-server (Nel nostro caso useremo il terminale integrato in VSCode). Si avvierà un semplice server locale e verrà aperta la pagina index.html nel browser predefinito (Chrome nel nostro caso) all’indirizzo 127.0.0.1:8080 (live-server accetta comunque numerose opzioni per personalizzare anche il browser, l’indirizzo e la porta da usare).
Nel browser verrà aperta una pagina in cui è presente il paragrafo con testo "Hello, Vue" generato dinamicamente inserendo tramite interpolazione ({{ name }}) il valore della proprietà name che avevamo definito nell’oggetto data in fase di creazione dell’istanza di tipo Vue.
Nell’immagine in alto possiamo notare che abbiamo installato l’estensione Vue.js devtools, disponibile sia per Chrome che per Firefox. Vue.js devtools permette di ispezionare un’applicazione realizzata in Vue.js ed è sicuramente uno strumento indispensabile in fase di debugging. Grazie a quest’ultima possiamo visualizzare, tra le tante cose, l’albero dei componenti dell’applicazione (Parleremo dei componenti nelle prossime lezioni. Per ora ci limitiamo a dire che i componenti rappresentano le unità base in cui viene strutturata un’applicazione).
In ogni caso la struttura di ciascun componente è definita attraverso il linguaggio HTML. Se quindi selezioniamo il pannello Elements degli strumenti per sviluppatori del browser, possiamo visualizzare qual è lo stato attuale del DOM.
Tornando per un momento a parlare di vue-devtools, nell’immagine mostrata sopra possiamo notare che viene anche riportato il valore corrente dell’oggetto data associato all’istanza Vue base.
Nel nostro esempio avevamo esplicitamente salvato un riferimento all’istanza base nella costante vm che è visibile a livello globale e che possiamo modificare tramite la console degli strumenti per sviluppatori.
Una delle proprietà interne di un’istanza di tipo Vue a cui è possibile avere accesso è vm.$data che rappresenta proprio l’oggetto javascript delle proprietà passate in fase di inizializzazione dell’istanza Vue (new Vue({..., data: {...}})).
Se proviamo a modificare la proprietà vm.$data.name, Vue provvederà automaticamente ad aggiornare l’applicazione per riflettere gli ultimi cambiamenti apportati.
Un’altra proprietà che abbiamo incontrato nel corso di questa lezione è vm.$el (i nomi delle proprietà predefinite ed accessibili sull’istanza Vue presentano il carattere ‘$’ come prefisso) che costituisce un riferimento all’elemento base HTML sotto il controllo dell’istanza vm.
