3. progetto [vuejs-01]: le basi
Per spiegare il codice eseguito in [vuejs-00], lo semplificheremo in [vuejs-01]. Duplichiamo la cartella [vuejs-00] in [vuejs-01]:
Il progetto [vuejs-01] comprende essenzialmente quattro file:
- [main.js] e [2], che costituisce il punto di ingresso del progetto;
- [App.vue, HelloWorld.vue] e [3-4] sono componenti di [Vue.js], che possono includere facoltativamente i seguenti elementi:
- [<template>...</template>]: il codice HTML;
- [<script>...</script>]: il codice JavaScript associato al codice HTML;
- [<style>...</style>]: lo stile CSS associato al codice HTML;
- [public/index.html] [5]: il documento HTML visualizzato dal comando [npm run serve];
Il file [public/index.html] visualizzato all’esecuzione del progetto è il seguente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vuejs</title>
</head>
<body>
<noscript>
<strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- i file generati verranno inseriti automaticamente -->
</body>
</html>
Questo file HTML non visualizza quindi nulla in modo statico. Qui non è presente alcun codice HTML. La visualizzazione è dinamica: il codice jS del progetto genererà il codice HTML, che sostituirà interamente il tag [<div id=’app’>] della riga 14. Il codice HTML, generato dal codice jS del progetto e inserito al posto del tag [<div>] della riga 14, proviene dai tag [template] dei componenti [vue.js], i cui file hanno il suffisso [.vue].
Il codice HTML viene inserito dinamicamente alla riga 14 dallo script [vuejs-01/main.js] seguente:
// importazioni
import Vue from 'vue'
import App from './App.vue'
// configurazione
Vue.config.productionTip = false
// istanza del progetto [App]
new Vue({
render: h => h(App),
}).$mount('#app')
Commenti
- riga 2: l’oggetto [Vue] è fornito dal framework [vue.js];
- riga 3: l'oggetto [App] è fornito dal file [vuejs-01/App.vue];
- riga 6: configurazione dell’oggetto [Vue];
- righe 9-11: sono le righe che:
- generano il codice HTML dell’applicazione. Alla riga 10, è il file [App.vue] a generarlo;
- caricano il codice HTML generato alla riga 10 nella sezione [<div id=’app’></div>] del file [public/index.html];
Qualsiasi progetto [Vue.js] può mantenere il file [index.html] così com’è.
Il file [App.vue] del progetto iniziale [vuejs-00] viene semplificato come segue nel progetto [vuejs-01]:
<template>
<div id="myApp">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Notre première application Vue.js" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
Commenti
- un frammento [.vue] comprende al massimo tre sezioni:
- [<template>...</template>]: codice HTML;
- [<script>...</script>]: il codice JavaScript associato al codice HTML;
- [<style>...</style>]: lo stile CSS associato al codice HTML;
Qui non è presente la sezione [style].
- righe 1-6: il codice HTML del frammento (pagina, componente, vista, ...);
- righe 2-5: la sezione [template] può contenere un solo elemento. In genere si inserisce una sezione [div] che racchiude l'intero HTML del frammento. È possibile inserire anche un tag <template>;
- riga 3: un'immagine;
- riga 4: un componente denominato [HelloWorld]. Il principio di [Vue.js] consiste nel costruire pagine web utilizzando frammenti definiti in file [.vue], come in questo caso [App.vue]. Questo componente è definito dal file [HelloWorld.vue], definito alla riga 9 dello script associato jS;
- riga 4: un componente può accettare parametri. Il parametro in questo caso è l’attributo [msg];
- righe 8-17: lo script jS del frammento (o componente);
- riga 9: per poter utilizzare il componente [HelloWorld] nel componente [App], è necessario importarne la definizione nella parte [script];
- righe 11-16: lo script definisce un oggetto e lo esporta per renderlo disponibile all’esterno;
- riga 12: l’attributo [name] definisce il nome del componente esportato;
- righe 13-15: l’attributo [components] elenca i componenti utilizzati dal componente [App]. Essi vengono esportati insieme ad esso;
Riga 9: non è obbligatorio che il componente [HelloWorld] abbia lo stesso nome del file che lo definisce. Si potrebbe importarlo come [X] ed esportarlo come componente [Bonjour]:
- riga 14: il componente [X] viene esportato con il nome [Bonjour]. Viene quindi utilizzato con questo nome, riga 4;
La prima versione è quella più comune, pertanto definiremo i nostri componenti in questo modo;
<template>
<div id="myApp">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Notre première application Vue.js" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
La riga 14 è una scorciatoia per il codice [HelloWorld : HelloWorld]: il componente [HelloWorld] (a destra, importato alla riga 9) viene esportato con il nome [HelloWorld] (a sinistra).
Semplifichiamo il componente [HelloWorld.vue] nel modo seguente:
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
Commenti
- il componente [HelloWorld] ha la stessa struttura di file del componente principale [App];
- riga 3: qui si ha una valutazione di un'espressione JavaScript, in questo caso l'espressione [msg];
- righe 10-12: definiscono le proprietà del componente, più precisamente i suoi parametri. Quando il componente [App] ha istanziato un componente [HelloWorld], lo ha fatto con la seguente sintassi:
<HelloWorld msg="Notre première application Vue.js" />
Il componente [HelloWorld] viene istanziato assegnando un valore al parametro (attributo) [msg]. Se si segue il [template] del componente [HelloWorld], quest’ultimo diventa:
<div>
<h1>Notre première application Vue.js</h1>
</div>
- righe 7-14: le proprietà del componente definite sotto forma di oggetto che viene esportato;
- riga 9: il componente viene esportato con il nome [HelloWorld];
- righe 10-12: i suoi parametri sono definiti dalla proprietà [props];
Infine, se si uniscono i modelli dei due componenti [App, HelloWorld] utilizzati, il file [index.html] visualizzato sarà il seguente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vuejs</title>
</head>
<body>
<noscript>
<strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="myApp">
<img alt="Vue logo" src="./assets/logo.png" />
<div>
<h1>Notre première application Vue.js</h1>
</div>
</div></body>
</html>
Avviamo l’applicazione modificando il comando [serve] [1] nel file [package.json]:
La pagina visualizzata è quindi [2].
Ora esaminiamo il codice di questa pagina:
- in [1], diventare [clic droit];
- in [2], il codice sorgente della pagina. Si nota che si tratta del codice del file iniziale [index.html] e non è questo che è stato visualizzato. È proprio la pagina [index.html] che è stata caricata inizialmente. Successivamente, in modo dinamico, del codice JavaScript ha modificato questa pagina, ma ciò non ci viene mostrato;
Quando le pagine vengono generate dinamicamente da JavaScript, l’opzione [2] non serve a nulla. È necessario accedere agli strumenti del browser (F12 su Firefox) per visualizzare il codice della pagina attualmente visualizzata:
- in [1], l’ispettore del DOM (Document Object Model) del documento visualizzato;
- in [2], ciò che contiene effettivamente questo DOM;
- [3-4], gli strumenti che useremo per visualizzare gli oggetti JavaScript utilizzati dal framework [Vue.js];
- [4] è un'estensione (in questo caso per Firefox) per il debug delle applicazioni [Vue.js]:
- per Firefox: [https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/];
- per Chrome: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd];
Esaminiamo la scheda [Vue] [4]:
La vista [1-4] ci mostra la struttura [Vue.js] del documento: la radice del documento [2] (index.html) comprende il componente [App] (3), che a sua volta comprende il componente [HelloWorld] (4). Cliccando su [4] vengono visualizzate le proprietà del componente [HelloWorld] [5].
In [4] (a destra) è visibile l’indicatore [$vm0]. Questo è il nome della variabile che è possibile utilizzare nella console JavaScript [6] per indicare l’oggetto [HelloWorld]. Proviamo:
- in [2], si fa valutare l’espressione [$vm0], il che ha l’effetto di visualizzarne la struttura. Normalmente non dovremo utilizzare direttamente questa struttura;
Concludiamo mostrando la capacità di [hot reload] del comando [serve] utilizzato per eseguire il progetto:
- in [App.vue], modificate il messaggio visualizzato da [HelloWorld]:
- in [1], si modifica il messaggio visualizzato;
- in [2-3], la pagina viene aggiornata automaticamente senza alcun intervento da parte nostra;
Ora creeremo diversi progetti [vuejs-xx] per illustrare i punti importanti di [Vue.js]. Per «importanti» si intende «quelli che utilizzeremo nel client [vue.js] del server di calcolo delle imposte». Altri punti “importanti” verranno tralasciati se non vengono utilizzati nel client. Non si tratterà quindi di una presentazione esaustiva di [vue.js].