Componenti Vue.js

I componenti Vue.js sono elementi modulari e riutilizzabili che rappresentano parti specifiche dell’interfaccia utente di un’applicazione. Ogni componente Vue è autonomo, con la propria logica, struttura e stile. Questo approccio semplifica la gestione e la manutenzione del codice, specialmente in progetti complessi.

Definire i componenti in Vue.js

I componenti Vue.js possono essere definiti utilizzando l’estensione .vue, che comprende tre sezioni principali: template, script e stile. Il template contiene il markup HTML che definisce la struttura del componente, lo script contiene la logica JavaScript del componente, e lo stile contiene i CSS associati al componente.

App.vue

App.vue è comunemente considerato il componente principale di un’applicazione Vue.js, ovvero il componente radice, che contiene il layout generale dell’applicazione e coordina altri componenti all’interno di essa.

Nel file App.vue, troviamo il markup HTML, la logica JavaScript e gli stili CSS che definiscono il componente. Questo file viene solitamente utilizzato per strutturare l’intera applicazione, includendo altri componenti al suo interno e gestendo la disposizione globale dell’interfaccia utente.

Quando si crea un nuovo progetto Vue.js utilizzando Vue CLI, il file App.vue viene creato automaticamente come parte della struttura di base del progetto e viene utilizzato come punto di ingresso principale dell’applicazione.

Ecco come si presenta il file App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Ecco una spiegazione delle diverse sezioni:

Template: Questa sezione contiene il markup HTML del componente. Nell’esempio, è presente un’immagine del logo di Vue.js e il componente HelloWorld con un messaggio di benvenuto.
Script: In questa sezione è definita la logica JavaScript del componente. Viene importato il componente HelloWorld e registrato come componente figlio di App. Il componente HelloWorld è quindi disponibile per l’uso nel template. Troviamo poi la sintassi export default, che in un componente Vue.js viene utilizzata per esportare il componente in modo che possa essere importato ed utilizzato in altre parti dell’applicazione. Questo è chiaramente utile quando si lavora con file .vue separati per ciascun componente.
Quando si definisce un componente Vue.js all’interno di un file .vue, spesso si utilizza export default per esportare l’oggetto che rappresenta il componente. Ad esempio:
Style: Questa sezione contiene gli stili CSS del componente. Gli stili qui definiti si applicano specificamente all’elemento con id #app. In questo caso, vengono applicati stili per impostare il font, il colore del testo e l’allineamento del testo.

Quindi, questo file App.vue funge da componente principale dell’applicazione Vue.js e coordina l’aspetto e il comportamento generale dell’applicazione, inclusi altri componenti al suo interno.

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Componenti Vue.js – HelloWorld

Il componente HelloWorld è un componente di esempio incluso automaticamente durante la creazione di un nuovo progetto Vue.js tramite Vue CLI, ma può variare a seconda delle impostazioni del progetto. Anche questo componente presenta uno struttura di questo tipo:

<template>

//qui va il codice html
  <div>{{ msg }}</div>

</template>

<script>
// qui va il codice JavaScript
export default {
  ...
}
</script>

<style scoped>

//qui va il codice CSS


</style>

La direttiva “scoped” (opzionale) all’interno della sezione <style> di un componente Vue.js specifica che gli stili definiti in quel blocco di stile sono validi solo per il componente attuale e non si estendono ai suoi componenti figlio o ad altri elementi dell’interfaccia utente. In altre parole, gli stili definiti all’interno di uno stile “scoped” sono limitati al contesto del componente in cui sono dichiarati e non hanno effetto globale.

Questo è utile per garantire che gli stili di un componente non interferiscano con quelli di altri componenti nell’applicazione, contribuendo a una migliore gestione e isolamento degli stili all’interno del progetto Vue.js.

Conclusione

In questa lezione abbiamo esaminato i componenti di base in Vue.js e il loro ruolo fondamentale nello sviluppo di applicazioni web. Abbiamo appreso che i componenti sono blocchi modulari di codice riutilizzabile, ciascuno con la propria logica, template e stile. Questo approccio permette una suddivisione efficace dell’interfaccia utente in parti più gestibili e modulari, facilitando la manutenzione e la scalabilità del codice.

In pratica, i componenti Vue.js offrono un modo potente e flessibile per organizzare e sviluppare applicazioni web, consentendo ai programmatori di creare interfacce utente dinamiche e reattive con facilità e rapidità. Con una comprensione solida dei concetti dei componenti, siamo pronti per esplorare ulteriormente le potenzialità di Vue.js nel nostro percorso di sviluppo web.

>> Primi passi con Vue.js

Option API >>