Skip to content

3. Progetto [vuejs-01]: Nozioni di base

Per spiegare il codice eseguito in [vuejs-00], lo semplificheremo in [vuejs-01]. Duplichiamo la cartella [vuejs-00] in [vuejs-01]:

Image

Il progetto [vuejs-01] è costituito essenzialmente da quattro file:

  • [main.js] [2] è il punto di ingresso del progetto;
  • [App.vue, HelloWorld.vue] [3-4] sono componenti [Vue.js], che contengono facoltativamente i seguenti elementi:
    • [<template>...</template>]: codice HTML;
    • [<script>...</script>]: il codice JavaScript associato al codice HTML;
    • [<style>...</style>]: gli stili CSS associati 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 è questo:


<!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>
    <!-- built files will be auto injected -->
  </body>
</html>

Questo file HTML non visualizza quindi nulla in modo statico. Qui non c'è codice HTML. La visualizzazione è dinamica: il codice JavaScript del progetto genererà dell'HTML che sostituirà completamente il tag [<div id=’app’>] alla riga 14. Il codice HTML generato dal JavaScript del progetto e inserito al posto del tag [<div>] alla riga 14 proviene dai tag [template] dei componenti [vue.js], i file con estensione [.vue].

Il codice HTML viene inserito dinamicamente alla riga 14 dallo script [vuejs-01/main.js] seguente:


// imports
import Vue from 'vue'
import App from './App.vue'
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [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: queste sono le righe che:
    • generano il codice HTML dell'applicazione. Riga 10: il file [App.vue] lo genera;
    • 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] è composto da un massimo di tre sezioni:
    • [<template>...</template>] : codice HTML;
    • [<script>...</script>] : codice JavaScript associato al codice HTML;
    • [<style>...</style>]: gli stili CSS associati al codice HTML;

Qui non abbiamo una sezione [style].

  • righe 1–6: il codice HTML del frammento (pagina, componente, vista, ...);
  • righe 2-5: la sezione [template] può contenere un solo elemento. Generalmente inseriamo una sezione [div] che racchiude tutto l'HTML del frammento. Possiamo anche inserire un tag <template>;
  • riga 3: un'immagine;

Image

  • riga 4: un componente denominato [HelloWorld]. Il principio di [Vue.js] consiste nel costruire pagine web utilizzando frammenti definiti in file [.vue], come [App.vue] in questo caso. Questo componente è definito dal file [HelloWorld.vue] definito alla riga 9 dello script JavaScript associato;
  • riga 4: un componente può accettare parametri. Il parametro qui è l'attributo [msg];
  • righe 8–17: lo script JavaScript per il frammento (o componente);
  • riga 9: per utilizzare il componente [HelloWorld] all'interno del componente [App], la sua definizione deve essere importata nella sezione [script];
  • righe 11–16: lo script definisce un oggetto e lo esporta per renderlo disponibile esternamente;
  • 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: il componente [HelloWorld] non deve necessariamente avere lo stesso nome del file che lo definisce. Potrebbe essere importato come [X] ed esportato come componente [Bonjour]:

Image

  • Riga 14: Il componente [X] viene esportato con il nome [Bonjour]. Viene quindi utilizzato con quel nome alla riga 4;

La prima versione è la più comune, quindi 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).

Image

Semplifichiamo il componente [HelloWorld.vue] come segue:


<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: questa riga valuta un'espressione JavaScript, in questo caso l'espressione [msg];
  • righe 10–12: definiscono le proprietà del componente, più specificamente i suoi parametri. Quando il componente [App] ha istanziato un componente [HelloWorld], lo ha fatto utilizzando la seguente sintassi: 

<HelloWorld msg="Notre première application Vue.js" />

Il componente [HelloWorld] viene istanziato assegnando un valore al parametro (attributo) [msg]. Se osserviamo il [template] del componente [HelloWorld], diventa:


<div>
    <h1>Notre première application Vue.js</h1>
</div>
  • righe 7–14: le proprietà del componente definite come un 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];

In definitiva, se combiniamo 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]:

Image

La pagina visualizzata è quindi [2].

Ora diamo un'occhiata al codice di questa pagina:

Image

  • In [1], clicca con il tasto destro del mouse;
  • in [2], il codice sorgente della pagina. Possiamo vedere che si tratta del codice del file iniziale [index.html], e non è quello che è stato visualizzato. In effetti, la pagina [index.html] è stata caricata inizialmente. Poi, in modo dinamico, il codice JavaScript ha modificato questa pagina, ma questo non ci viene mostrato;

Quando le pagine vengono generate dinamicamente da JavaScript, l'opzione [2] è inutile. È necessario accedere agli strumenti del browser (F12 in Firefox) per visualizzare il codice della pagina attualmente visualizzata:

Image

  • in [1], l'ispettore DOM (Document Object Model) per il documento visualizzato;
  • in [2], ciò che questo DOM contiene effettivamente;
  • [3-4], gli strumenti che useremo per visualizzare gli oggetti JavaScript utilizzati dal framework [Vue.js];
  • [4] è un'estensione (qui 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]:

Image

La vista [1-4] mostra la struttura [Vue.js] del documento: la radice del documento [2] (index.html) contiene il componente [App] (3), che a sua volta contiene il componente [HelloWorld] (4). Cliccando su [4] vengono visualizzate le proprietà del componente [HelloWorld] [5].

In [4] (a destra), vediamo l'indicatore [$vm0]. Questo è il nome della variabile che possiamo utilizzare nella console JavaScript [6] per fare riferimento all'oggetto [HelloWorld]. Facciamolo:

Image

  • In [2], valutiamo l'espressione [$vm0], che ne visualizza la struttura. Normalmente, non avremo bisogno di utilizzare direttamente questa struttura;

Concludiamo dimostrando la funzionalità [hot reload] del comando [serve] utilizzato per eseguire il progetto:

  • In [App.vue], modifica il messaggio visualizzato in [HelloWorld]:

Image

  • In [1], modifichiamo il messaggio visualizzato;
  • in [2-3], la pagina viene aggiornata automaticamente senza che dobbiamo fare nulla;

Ora creeremo vari progetti [vuejs-xx] per illustrare le caratteristiche principali di [Vue.js]. Per "principali" intendiamo "le caratteristiche che useremo nel client [Vue.js] del server di calcolo delle imposte". Altre caratteristiche "principali" saranno omesse se non vengono utilizzate nel client. Questa non vuole quindi essere una presentazione esaustiva di [Vue.js].

https://stahe.github.io
Questo tutorial scritto da Serge Tahé è reso disponibile al pubblico secondo i termini della Creative Commons Attribuzione – Non commerciale – Condividi allo stesso modo 3.0 Unported.