Vue.js: il primo componente

In un precedente post abbiamo impostato il nostro progetto utilizzando la comoda CLI offerta da Vue.

Ora vediamo come creare il primo componente da visualizzare in luogo dell’Hello World già presente.

Ricordiamo che un componente Vue è costituito da un file con estensione .vue strutturato in tre blocchi delimitati dai seguenti tag

  • <template></template>
  • <script></script>
  • <style></style>

Il nostro obiettivo è di mostrare una lista di calciatori per cui creiamo un file PlayersList.vue nella cartella components, partendo dal template disponibile a questo link.

Nel blocco <script></script> dobbiamo aggiungere solo il nome del componente che per convenzione sarà uguale al nome del file quindi

name: 'PlayersList';

La sezione <template></template> riporta il codice html che verrà visualizzato e nel nostro caso ci limiteremo ad impostare una tabella con un contenuto statico.

In seguito vedremo come modificarla per leggere i dati dinamicamente.

Infine nel blocco <style></style> possiamo aggiungere una classe css da riservare all’header della tabella.

Per utilizzare il nuovo componente al posto dell’Hello World dobbiamo fare alcune modifiche ad App.vue.

  • In particolare nella sezione <template></template>:
  • rimuoviamo il logo di Vue
  • eliminiamo il tag <HelloWorld/> sostituendolo con <players-list/> adottando il formato Kebab Case

Nella sezione <script></script>:

  • importiamo il nuovo componente con import PlayersList from './components/PlayersList.vue'
  • indichiamo il nome del componente nella relativa lista

Ecco il codice definitivo (in Visual Studio Code)

component-vsc

Eseguiamo nuovamente

npm run serve

ed ecco il risultato

lista-calciatori

Niente di che ma abbiamo creato il nostro primo componente.

Il codice è comunque disponibile su GitHub.

Alla prossima!

 

 

 

 

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Utilizzando il sito, accetti l'invio dei cookies da parte nostra. Maggiori informazioni

Questo sito utilizza i cookies per fornire la migliore esperienza di navigazione possibile. Continuando ad utilizzarlo senza modificare le impostazioni o cliccando su "Accetta" acconsenti al loro utilizzo.

Chiudi