Installazione di Bootstrap in Vue.js

Installazione di Bootstrap in Vue.js

In questa lezione effettueremo l’installazione di Bootstrap in Vue.js.

Ricordiamo che Bootstrap è un framework front-end open source utilizzato per la progettazione e lo sviluppo di interfacce utente responsive e moderne per siti web e applicazioni web. Questo potente framework offre una vasta gamma di componenti UI predefiniti, come bottoni, form, navbar, cards e molto altro, che possono essere facilmente integrati nelle applicazioni web. Inoltre, fornisce una griglia responsiva basata su un sistema di griglia flessibile che consente di creare layout flessibili e adattabili a diverse dimensioni di schermo e dispositivi.

Installazione di Bootstrap in Vue.js – CDN

Possiamo integrare Bootstrap tramite la CDN (Content Delivery Network) in un progetto Vue.js, seguendo questi passaggi:

  1. Aprire il file public/index.html del progetto Vue.js
  2. Aggiungere il tag <link> per collegare il foglio di stile CSS di Bootstrap.
<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vue Bootstrap Project</title>
  <!-- Aggiungi il foglio di stile di Bootstrap tramite la CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div id="app"></div>
  <!-- Collegamento ai file JavaScript di Bootstrap tramite CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

In alternativa possiamo includere i file in main.js.

Installazione di Bootstrap in Vue.js – npm

Possiamo installare Bootstrap entrando nella directory del progetto:

npm install bootstrap

Quando si esegue questo comando npm install bootstrap nel nostro progetto Vue.js, si sta utilizzando npm (Node Package Manager) per installare Bootstrap come dipendenza del progetto. Ecco cosa succede dietro le quinte:

  1. Download dei pacchetti: npm scarica il pacchetto Bootstrap dal registry npm, che contiene tutte le risorse e i file necessari per utilizzare Bootstrap nel tuo progetto.
  2. Installazione dei file: Una volta scaricato, npm installa il pacchetto Bootstrap nella directory node_modules del tuo progetto Vue.js. All’interno della directory node_modules/bootstrap, troveremo i file CSS, JavaScript e altre risorse di Bootstrap.
  3. Aggiornamento del file package.json: npm aggiorna automaticamente il file package.json del nostro progetto per includere Bootstrap come dipendenza. Troveremo una voce simile a "bootstrap": "^x.x.x" all’interno della sezione "dependencies" del file package.json, dove "^x.x.x" rappresenta la versione specifica di Bootstrap che avete installato.
  4. Gestione delle dipendenze: npm si occupa anche di risolvere le dipendenze di Bootstrap e di installare eventuali altre dipendenze necessarie per il corretto funzionamento di Bootstrap. Ad esempio, potrebbe installare dipendenze come popper.js, richieste da Bootstrap per alcune funzionalità come dropdown e tooltip.

Talvolta può essere necessario correggere automaticamente le vulnerabilità segnalate da npm audit. Il comando npm audit fix tenterà di risolvere le vulnerabilità in modo sicuro aggiornando le versioni delle dipendenze coinvolte.

npm audit fix

Oppure

npm audit fix --force

L’opzione --force indica a npm di applicare automaticamente le correzioni, anche se ciò comporta la modifica diretta dei file package-lock.json o npm-shrinkwrap.json, ignorando eventuali warning.

Ma attenzione, entrmabi i comandi potrebbero non risolvere tutte le vulnerabilità in modo sicuro e potrebbero causare problemi di compatibilità o di stabilità nel progetto, specialmente se si tratta di dipendenze cruciali. Perciò, è consigliabile valutare attentamente le correzioni proposte da npm audit e risolverle manualmente o utilizzare altre strategie per affrontare le vulnerabilità in modo sicuro.

Installazione di Bootstrap in Vue.js – inclusione dei file

Dopo aver installato Bootstrap utilizzando npm install bootstrap, si possono includere i file CSS e JavaScript di Bootstrap andando nel file main.js:

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// Includi il file CSS e JavaScript di Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

createApp(App).mount('#app')

Creare un progetto con Bootstrap in Vue.js

Adesso che abbiamo installato Bootstrap e incluso i file nel file main.js possiamo creare i componenti.

Innanzitutto creiamo un componente Header.vue utilizzando le classi di Bootstrap:

<!-- Header.vue -->
<template>
  <header class="navbar navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">My Website</a>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header'
}
</script>

Dopo creiamo anche un componente per la sezione hero:

<!-- Hero.vue -->
<template>
  <section class="hero">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h1>Benvenuti nel mio sito web</h1>
          <p>Questo sito web integra Bootstrap</p>
          <button class="btn btn-primary">More</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Hero'
}
</script>

<style scoped>
/* Stili specifici per la sezione hero */
</style>

Quindi inseriamo i componenti in App.vue:

<template>
  <div>
    <Header />
    <Hero />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Hero from './components/Hero.vue'

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


Conclusioni

Alcuni link utili

Tutorial JavaScript

Versione rivisitata del gioco dell’impiccato: divertiti ad indovinare le parole ed impara a sviluppare uno dei giochi più famosi.

Slot Machine: segui una guida passo passo per imparare a svilupparne una semplicissima slot machine da zero.

Quiz interattivo: un quiz che permette di testare le conoscenze su determinati argomenti.

Memoria del colore: una sfida divertente che mette alla prova la memoria visiva e la capacità di ricordare sequenze di colori sempre più complesse.

Memory Game: Un’avvincente sfida di concentrazione e memoria!

Slideshow in Vue JS

Slideshow in Vue JS

In questa lezione realizziamo uno slideshow utilizzando Vue JS.

Gli slideshow sono un elemento comune nelle moderne applicazioni web, utilizzati per presentare contenuti in modo dinamico e coinvolgente. Con Vue.js, è possibile creare facilmente uno slideshow interattivo che offre una user experience fluida e piacevole. In questo tutorial, ti guiderò attraverso i passaggi per creare uno slideshow utilizzando Vue.js.

Preparazione dello slideshow in Vue JS

Passo 1: Preparazione del Progetto

Per iniziare, creiamo un nuovo progetto Vue.js utilizzando Vue CLI con il seguente comando:

vue create slideshow-app

Seguiamo le istruzioni di configurazione del nostro progetto slideshow in Vue.js. Una volta completata la configurazione, entriamo nella directory del progetto:

cd slideshow-app

Passo 2: Creazione del Componente Slideshow – script

Ora, creiamo un nuovo componente Vue per gestire lo slideshow. All’interno della directory src/components, creiamo un nuovo file chiamato SlideShow.vue e all’interno della sezione data(), definiamo due attributi:

  • slides: un array di oggetti, ognuno rappresentante una singola diapositiva. Ogni oggetto ha un id, un title, una description e un image.
  • currentSlide: un indice che tiene traccia della diapositiva corrente visualizzata nello slideshow.

Poi utilizziamo il metodo mounted() che viene chiamato quando il componente viene montato nel DOM. In questo caso, viene utilizzato per avviare un intervallo di tempo che cambia la diapositiva ogni 5 secondi, chiamando il metodo nextSlide().

Poi realizziamo i metodi per far funzionare lo slideshow:

  • nextSlide(): Questo metodo avanza alla prossima diapositiva nell’array slides. Se si raggiunge la fine dell’array, la variabile currentSlide viene riportata a 0 per tornare alla prima diapositiva.
  • prevSlide(): Questo metodo retrocede alla diapositiva precedente nell’array slides. Se ci si trova sulla prima diapositiva, la variabile currentSlide viene impostata alla lunghezza dell’array meno 1 per tornare all’ultima diapositiva.
  • goToSlide(index): Questo metodo imposta la variabile currentSlide sull’indice della diapositiva fornito come argomento, consentendo di passare direttamente a una diapositiva specifica.
<script>
  export default {
    name: 'SlideshowComponents',
    data() {
      return {
        slides: [
          { id: 1, title: 'Slide 1', description: 'Description Slide 1', image: '...' },
          { id: 2, title: 'Slide 2', description: 'Description Slide 2', image: '...' },
          { id: 3, title: 'Slide 3', description: 'Description Slide 3', image: '...' }
        ],
        currentSlide: 0
      };
    },
    mounted() {
      setInterval(this.nextSlide, 5000); // Cambia diapositiva ogni 5 secondi
    },
    methods: {
  nextSlide() {
    if (this.currentSlide + 1 < this.slides.length) {
      this.currentSlide++;
    } else {
      this.currentSlide = 0;
    }
  },
  prevSlide() {
    if (this.currentSlide > 0) {
      this.currentSlide--;
    } else {
      this.currentSlide = this.slides.length - 1;
    }
  },
  goToSlide(index) {
    this.currentSlide = index;
  }
}
  }
  </script>

libro javascript

Passo 3: Creazione del Componente Slideshow – template

Sistemiamo anche il template HTML del componente slideshow in Vue JS. Nel dettaglio inseriamo un elemento principale a cui assegniamo la classe hero e all’interno inseriamo un elemento che contiene tutte le diapositive dello slideshow. Utilizziamo una direttiva v-for per iterare attraverso l’array slides e visualizzare dinamicamente ogni diapositiva all’interno di questo contenitore. La classe slide viene assegnata a ciascuna diapositiva. Inoltre utilizziamo questa direttiva :class="{ active: index === currentSlide }" per applicare la classe active solo alla diapositiva corrente. La variabile currentSlide tiene traccia dell’indice della diapositiva corrente.

Dunque utilizziamo questa direttiva :style="{ backgroundImage: 'url(' + slide.image + ')' }" per applicare lo stile di sfondo di ogni diapositiva utilizzando l’immagine specificata nella proprietà image di ogni oggetto slide. Visualizziamo inoltre titolo e descrizione.

Implementiamo poi la parte inerente la freccia sinistra e destra per la navigazione. Utilizziamo due pulsanti con le classi arrow left e arrow right per consentire all’utente di scorrere avanti e indietro tra le diapositive. Ogni pulsante ha un evento @click che chiama i metodi prevSlide e nextSlide rispettivamente.

Utilizziamo infine dei pallini per indicare il numero di diapositive e la diapositiva corrente. Ogni pallino ha la classe dot e la classe active se corrisponde alla diapositiva corrente. Gli utenti possono fare clic su questi pallini per passare direttamente a una specifica diapositiva, tramite l’evento @click che chiama il metodo goToSlide(index).

Ecco dunque come si presenta il template HTML:

<template>
    <section class="hero">
      <!-- SlideShow content -->
      <div class="slideshow">
        <div v-for="(slide, index) in slides" :key="slide.id" class="slide" :class="{ active: index === currentSlide }" :style="{ backgroundImage: 'url(' + slide.image + ')' }">
          <h2>{{ slide.title }}</h2>
          <p>{{ slide.description }}</p>
        </div>
      </div>
      <!-- Freccia sinistra per la navigazione -->
      <button class="arrow left" @click="prevSlide">&#10094;</button>
      <!-- Freccia destra per la navigazione -->
      <button class="arrow right" @click="nextSlide">&#10095;</button>
      <!-- Pallini per indicare il numero di diapositive -->
      <div class="dots">
        <span v-for="(slide, index) in slides" :key="slide.id" class="dot" :class="{ active: index === currentSlide }" @click="goToSlide(index)"></span>
      </div>
    </section>
  </template>

Passo 4: Creazione del Componente Slideshow – template

Infine inseriamo il codice CSS a piacere. Io ad esempio ho inserito questo:

<style scoped>
  /* Stili CSS per lo slideshow */
  .hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px; /* Aggiunto per separare lo slideshow dal contenuto successivo */
  }
  
  .slideshow {
    display: flex;
    transition: transform 0.5s ease;
  }
  
  .slide {
    width: 100%;
    height: 400px;
    background-size: cover;
    display: none; /* Nascondiamo le slide per impostazione predefinita */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 20px;
  }
  
  .slide.active {
    display: flex; /* Visualizziamo solo la slide attiva */
  }
  
  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .arrow:hover {
    background: rgba(0, 0, 0, 0.8);
  }
  
  .arrow.left {
    left: 10px;
  }
  
  .arrow.right {
    right: 10px;
  }
  
  .dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #bbb;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .dot.active {
    background-color: #fff;
  }
  </style>
  

Infine per concludere lo slideshow realizzato in Vue JS, inseriamo questo componente su App.Vue:

<template>
  ...
  <SlideShow />
  ...
</template>
<script>

import SlideShow from "./components/SlideShow.vue";

export default {
  name: "App",
  components: {

    SlideShow,
  },
};
</script>

Conclusioni

In questa lezione, abbiamo esaminato come creare uno slideshow interattivo utilizzando Vue JS. Lo slideshow è stato implementato con una serie di diapositive dinamiche, ciascuna contenente un’immagine, un titolo e una descrizione. Gli utenti possono navigare tra le diapositive utilizzando le frecce sinistra e destra o facendo clic sui pallini di indicazione corrispondenti. Inoltre, abbiamo incluso la funzionalità per passare automaticamente alla successiva diapositiva ogni 5 secondi.

Questo esempio illustra l’uso delle direttive Vue.js come v-for, v-bind, v-on, nonché la gestione degli eventi e lo stile condizionale. È possibile personalizzare ulteriormente lo slideshow aggiungendo effetti di transizione, implementando controlli aggiuntivi o modificando lo stile delle diapositive.

In definitiva, Vue.js offre un modo intuitivo e potente per creare componenti interattivi come uno slideshow, consentendo agli sviluppatori di realizzare esperienze utente coinvolgenti e dinamiche all’interno delle proprie applicazioni web.

Alcuni link utili

Tutorial JavaScript

Versione rivisitata del gioco dell’impiccato: divertiti ad indovinare le parole ed impara a sviluppare uno dei giochi più famosi.

Slot Machine: segui una guida passo passo per imparare a svilupparne una semplicissima slot machine da zero.

Quiz interattivo: un quiz che permette di testare le conoscenze su determinati argomenti.

Memoria del colore: una sfida divertente che mette alla prova la memoria visiva e la capacità di ricordare sequenze di colori sempre più complesse.

Memory Game: Un’avvincente sfida di concentrazione e memoria!

emit in Vue.js

emit in Vue.js

L’emit In Vue.js, è un metodo utilizzato per la comunicazione tra componenti figli e genitori. Infatti, consente ai componenti figli di inviare eventi al loro componente genitore.

Possiamo descrivere il funzionamento di emit attraverso queste fasi.

Emitting (Emissione): Nel componente figlio, si può chiamare il metodo $emit per emettere un evento. All’evento si può passare un nome e anche dei dati (opzionali).

Listening (Ascolto): Nel componente genitore, si possono ascoltare gli eventi emessi dal componente figlio utilizzando direttive come v-on o l’abbreviazione @.

Handling (Gestione): Nel componente genitore, si definisce un metodo per gestire l’evento ricevuto dal componente figlio. Questo metodo viene chiamato quando l’evento è emesso dal componente figlio e riceve eventuali dati associati.

Quindi, l’emit in Vue.js è un meccanismo che consente ai componenti figli di comunicare con il loro componente genitore, inviando eventi che possono contenere anche dati.

Esempio di emit in Vue.js

Creiamo nel componente figlio un pulsante che, quando cliccato, attiva il metodo inviaDati. All’interno di questo metodo, definiamo una variabile data contenente i dati che desideriamo passare al componente genitore. Quindi, utilizziamo il metodo $emit per emettere un evento chiamato 'inviaDati' e passiamo data come parametro dell’evento.

Ecco come si presenta il componente figlio:

<template>
    <div>
      <button @click="inviaDati">Invia Dati</button>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ChildComponent',
    methods: {
        inviaDati() {
        const data = 'Ciao a tutti';
        this.$emit('inviaDati', data);
      }
    }
  };
  </script>
  

Poi creiamo il componente padre doce includiamo il componente figlio ChildComponent utilizzando <ChildComponent @inviaDati ="handleInviaDati" />. In questo modo, il genitore è in grado di ascoltare l’evento 'inviaDati' emesso dal componente figlio. Quando questo evento viene emesso, viene eseguita la funzione handleInviaDati che riceve i dati passati dal componente figlio come parametro. In questo caso, stiamo semplicemente aggiornando la variabile receivedData del componente genitore con i dati ricevuti dal componente figlio. Questa variabile viene poi visualizzata nel template del componente genitore.

Ecco quindi il componente genitore:

<template>
  <div>
    <h1>Parent Component</h1>
    <p>{{ receivedData }}</p>
    <ChildComponent @inviaDati="handleInviaDati" />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleInviaDati(data) {
      this.receivedData = data;
    }
  }
};
</script>

Passare un array con emit in Vue.js

Nel componente figlio, creiamo un pulsante che, quando cliccato, attiva il metodo passArray. All’interno di questo metodo, definiamo un array frutta che contiene alcuni frutti. Quindi, utilizziamo il metodo $emit per emettere un evento chiamato 'arrayEmesso' e passiamo l’array frutta come parametro dell’evento.

<template>
  <div>
    <button @click="passArray">Passa Array</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    passArray() {
      const frutta = ['Mela', 'Pera', 'Banana'];
      this.$emit('arrayEmesso', frutta);
    }
  }
};
</script>

Dopo nel componente padre includiamo il componente figlio utilizzando <ChildComponent @arrayEmesso="handleArray" />. In questo modo, il genitore è in grado di ascoltare l’evento 'arrayEmesso' emesso dal componente figlio ChildComponent. Quando questo evento viene emesso, viene eseguita la funzione handleArray, che riceve l’array passato dal componente figlio come parametro. In questo caso, stiamo semplicemente aggiornando la variabile receivedArray del componente genitore con l’array ricevuto dal componente figlio. Questa variabile viene quindi visualizzata nel template del componente genitore.

Ecco come si presenta dunque il componente figlio:

<template>
  <div>
    <h1>Parent Component</h1>
    <p v-if="receivedArray.length > 0">Array ricevuto dal figlio:</p>
    <ul>
      <li v-for="(item, index) in receivedArray" :key="index">{{ item }}</li>
    </ul>
    <ChildComponent @arrayEmesso="handleArray" />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedArray: []
    };
  },
  methods: {
    handleArray(array) {
      this.receivedArray = array;
    }
  }
};
</script>

Passare un oggetto con emit in Vue.js

Ecco un esempio completo su come passare un oggetto da un componente figlio ad un componente genitore utilizzando l’emit in Vue.js. In questo componente figlio, abbiamo un pulsante che, quando cliccato, attiva il metodo passObject. All’interno di questo metodo, definiamo un oggetto dataObject con alcune proprietà. Quindi, utilizziamo il metodo $emit per emettere un evento chiamato 'objectEmesso' e passiamo l’oggetto dataObject come parametro dell’evento.

<template>
    <div>
      <button @click="passObject">Passa Oggetto Persona</button>
    </div>
</template>
  
<script>
export default {
    name: 'ChildComponent',
    methods: {
      passObject() {
        const persona = {
          name: 'Paperina',
          age: 30,
          email: 'paperina@example.com'
        };
        this.$emit('objectEmesso', persona);
      }
    }
 };
</script>
  

Nel componente genitore poi includiamo il componente figlio utilizzando <ChildComponent @objectEmesso="handleObject" />. In questo modo, il genitore è in grado di ascoltare l’evento 'objectEmesso' emesso dal componente figlio ChildComponent. Quando questo evento viene emesso, viene eseguita la funzione handleObject, che riceve l’oggetto passato dal componente figlio come parametro. In questo caso, stiamo semplicemente aggiornando la variabile receivedObject del componente genitore con l’oggetto ricevuto dal componente figlio. Questo oggetto viene quindi visualizzato nel template del componente genitore.

<template>
  <div>
    <h1>Parent Component</h1>
    <p v-if="receivedObject">Oggetto ricevuto dal figlio:</p>
    <ul v-if="receivedObject">
      <li v-for="(value, key) in receivedObject" :key="key">{{ key }}: {{ value }}</li>
    </ul>
    <ChildComponent @objectEmesso="handleObject" />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedObject: null
    };
  },
  methods: {
    handleObject(object) {
      this.receivedObject = object;
    }
  }
};
</script>

Conclusioni

In conclusione, l’uso di emit in Vue.js è un modo potente per i componenti figli di comunicare con il loro componente genitore. Questo meccanismo consente di trasmettere eventi personalizzati da un componente figlio al suo componente genitore, consentendo una comunicazione bidirezionale all’interno dell’applicazione.

Alcuni punti chiave sull’utilizzo di emit includono:

  1. Comunicazione efficace: emit consente una comunicazione fluida tra i componenti, consentendo loro di scambiarsi informazioni e azioni rilevanti.
  2. Eventi personalizzati: Gli eventi emessi possono essere personalizzati con nomi significativi che descrivono l’azione o l’evento che si verifica nel componente figlio.
  3. Dati opzionali: È possibile includere dati aggiuntivi nell’emissione dell’evento, permettendo al componente genitore di ricevere informazioni utili dal componente figlio.
  4. Gestione degli eventi: Nel componente genitore, è possibile ascoltare gli eventi emessi dal componente figlio e definire le funzioni di gestione degli eventi per elaborare i dati ricevuti.
  5. Aggiornamento dello stato: I dati ricevuti tramite emit possono essere utilizzati per aggiornare lo stato del componente genitore, consentendo una reattività dinamica nell’applicazione.

In conclusione, emit è uno strumento essenziale per la comunicazione tra componenti in Vue.js, che contribuisce a creare un’architettura modulare e flessibile per le applicazioni Vue.js.

Alcuni link utili

Tutorial JavaScript

Versione rivisitata del gioco dell’impiccato: divertiti ad indovinare le parole ed impara a sviluppare uno dei giochi più famosi.

Slot Machine: segui una guida passo passo per imparare a svilupparne una semplicissima slot machine da zero.

Quiz interattivo: un quiz che permette di testare le conoscenze su determinati argomenti.

Memoria del colore: una sfida divertente che mette alla prova la memoria visiva e la capacità di ricordare sequenze di colori sempre più complesse.

Memory Game: Un’avvincente sfida di concentrazione e memoria!

props in Vue 3

props in Vue 3

In questa lezione affronteremo le props in Vue 3 integrando la sintassi della Composition API.

Ricordiamo che le props sono un meccanismo fondamentale per passare dati da un componente genitore a uno figlio.

Come gestire le props in Vue 3 e le Composition API?

Con Vue 3, le props mantengono la loro flessibilità e immutabilità, garantendo che i dati passati da un componente genitore non possano essere modificati dal componente figlio, promuovendo così una migliore gestione dei dati e una maggiore prevedibilità nel comportamento dell’applicazione.

Una delle caratteristiche distintive delle props in Vue 3 è la loro natura reattiva. Ciò significa che se una prop cambia nel componente genitore, il cambiamento sarà riflesso automaticamente nel componente figlio senza la necessità di aggiornamenti manuali. Questo approccio semplifica notevolmente lo sviluppo e migliora l’efficienza, poiché i componenti possono reagire dinamicamente ai cambiamenti dei dati.

Inoltre, Vue 3 offre un’esperienza di sviluppo più intuitiva e potente per la gestione delle props. L’introduzione del Composition API consente di definire le props in modo più chiaro e conciso, migliorando la leggibilità e la manutenibilità del codice.

Esempio props in Vue 3 e la sintassi Composition API

Creiamo un componte padre che passa una semplice variabile al figlio, seguendo la sintassi della Composition API:

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const parentMessage = ref('Ciao da tuo padre');
    
    return {
      parentMessage
    };
  }
};
</script>

Nel componente figlio ChildComponent, utilizziamo defineComponent per definire il componente. Definiamo poi una prop chiamata message di tipo stringa, che è richiesta. Se non viene fornita, verrà generato un avviso.

<template>
    <div>
      <h2>{{ message }}</h2>

    </div>
  </template>
  
  <script>
  
  export default {
    name: 'ChildComponent',
    props: ['message'],
    setup(props) {
      return { message: props.message }; 
     // Restituiamo la prop come variabile locale "message"
    }
  };
  </script>
  

Dunque con la Composition API, introdotta in Vue 3, si ha un approccio alternativo alla strutturazione del codice del componente. Invece di organizzare il codice in base alle opzioni, la Composition API consente di utilizzare funzioni singole (setup) per definire il comportamento e i dati del componente. Questo approccio favorisce una maggiore modularità e riusabilità del codice, consentendo di raggruppare logicamente il codice in base alla funzionalità anziché alla sua natura (ad esempio, dati, metodi, ecc.).

Nel nostro esempio, la prop message viene dichiarata come di tipo stringa, ed è obbligatoria, ciò significa che se non viene specificata il componente sarà un avviso. Se non impostiamo required: false (o non lo inseriamo come proprietà) il componente funzionerà comunque senza generare avvisi. Quest’ultima opzione è utile quando una prop può essere opzionale.

Esempio props in Vue 3 – passare array

Possiamo passare anche un array con le Composition API. Realizziamo dunque il componente padre dove impostiamo una array di nomi. Nel blocco <script>, importiamo la funzione ref dalla Composition API. Stiamo anche importando il componente figlio ChildComponent. All’interno della funzione setup(), creiamo una variabile reattiva nameList utilizzando la funzione ref(). Questa variabile contiene un array di nomi.

Infine, restituiamo l’array nameList in modo che possa essere utilizzato nel template come una proprietà reattiva. Quando il valore di nameList cambia, il componente verrà aggiornato automaticamente per riflettere questi cambiamenti.

Ecco come si presenta dunque il componente padre:

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :names="nameList" />
  </div>
</template>

<script>
import { ref } from 'vue'; // Importiamo ref dalla Composition API
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const nameList = ref(['Paperino', 'Pippo', 'Paperina', 'Pluto']); 
    // Definiamo una ref per l'array di nomi

    return {
      nameList
    };
  }
};
</script>

Realizziamo poi il componente figlio. Nel blocco <script>, definiamo il componente Vue dove inseriamo le props: ['names']. In pratica definiamo names come una prop che il componente riceve dal suo genitore.

Poi realizziamo il blocco della Composition API con setup(props) dove definiamo lo stato reattivo e altre logiche del componente. In questo caso, riceviamo le props come argomento e restituiamo un oggetto che contiene names come variabile locale (possiamo chiaramente restituire più elementi). Questo ci consente di utilizzare names all’interno del template del componente come una variabile locale, rendendola disponibile per la visualizzazione nella lista per il nostro esempio.

Quindi, questo componente figlio ChildComponent riceve un array di nomi come prop dal suo componente genitore e lo visualizza in una lista non ordinata nel template. Utilizzando la Composition API, possiamo gestire le props e altri aspetti del componente in modo più dichiarativo e organizzato.

Ecco come potremmo dunque sviluppare il componente figlio:

<template>
    <div>
      <h2>Child Component</h2>
      <ul>
        <li v-for="name in names" :key="name">{{ name }}</li>
      </ul>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'ChildComponent',
    props: ['names'],
    setup(props) {
      return { names: props.names }; 
      // Restituiamo lae prop come variabile locale "names"
    }
  };
  </script>
  

Esempio props in Vue 3 – passare un oggetto

In questo esempio nel componente genitore ParentComponent, passiamo due props al componente figlio ChildComponent: message e data.

Queste props vengono passate tramite la sintassi :message="parentMessage" e :data="parentData" inserita nel “tag” che rappresenta il componente figlio nella sezione template.

Poi nello script importiamo il componente figlio ChildComponent dalla sua posizione nel progetto. Dopo definiamo il componente genitore con il nome ParentComponent e utilizziamo la Composition API per definire le variabili reactive parentMessage e parentData. Queste variabili rappresentano il messaggio e i dati che vogliamo passare al componente figlio. Infine restituiamo parentMessage e parentData dalla funzione setup(). Questo ci consente di renderle disponibili nel template del componente.

Ecco come si presenta dunque il componente padre:

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :message="parentMessage" :data="parentData" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const parentMessage = ref('Ciao da tuo padre');
    const parentData = ref({
      name: 'Paperina',
      age: 25,
      email: 'paperina@example.com'
    });

    return { parentMessage, parentData };
  }
};
</script>

Realizziamo poi il componente figlio e Nnel blocco props, dichiariamo le props che il componente figlio riceve dal componente genitore. In questo caso, message è una stringa e data è un oggetto. Nel template, stiamo accedendo alle props message e data utilizzando la sintassi di Vue {{ message }} e {{ data }}. Utilizziamo anche una direttiva v-for per iterare attraverso le chiavi e i valori dell’oggetto data e visualizzarli come elenco nel template.

Ecco come si presenta il componente figlio:

<!-- ChildComponent.vue -->
<template>
    <div>
      <h2>Child Component</h2>
      <p>{{ message }}</p>
      <p>Studentessa:</p>
      <ul>
        <li v-for="(value, key) in data" :key="key">{{ key }}: {{ value }}</li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ChildComponent',
    props: {
      message: String,
      data: Object
    }
  };
  </script>
  

Conclusioni

In conclusione, le props in Vue 3 sono un pilastro fondamentale per la comunicazione tra i componenti, offrendo una soluzione robusta, reattiva e intuitiva per passare dati all’interno dell’applicazione. La loro natura immutabile, combinata con le funzionalità avanzate del Composition API, rende Vue 3 un framework potente e versatile per lo sviluppo di applicazioni moderne e scalabili.

Alcuni link utili

Tutorial JavaScript

Versione rivisitata del gioco dell’impiccato: divertiti ad indovinare le parole ed impara a sviluppare uno dei giochi più famosi.

Slot Machine: segui una guida passo passo per imparare a svilupparne una semplicissima slot machine da zero.

Quiz interattivo: un quiz che permette di testare le conoscenze su determinati argomenti.

Memoria del colore: una sfida divertente che mette alla prova la memoria visiva e la capacità di ricordare sequenze di colori sempre più complesse.

Memory Game: Un’avvincente sfida di concentrazione e memoria!

props in Vue.js

props in Vue.js

Le props (abbreviazione di “properties”) sono una caratteristica di Vue.js che consente la comunicazione unidirezionale dei dati tra componenti genitore e figlio. Difatti le props consentono dunque ai componenti figli di accedere ai dati passati loro dal componente genitore.

Come vengono passati i dati con le props da padre a figlio?

Le props sono passate come attributi HTML personalizzati ai componenti figlio e possono contenere qualsiasi tipo di dato JavaScript, come stringhe, numeri, oggetti o array. Una volta passate, le props diventano proprietà del componente figlio e possono essere utilizzate all’interno del suo template o delle sue funzioni JavaScript. Le props sono immutabili, il che significa che il componente figlio non può modificare direttamente i dati ricevuti attraverso le props. Questo consente una chiara separazione delle responsabilità tra i componenti genitore e figlio e facilita la creazione di componenti riutilizzabili e modulari.

In questa lezione ci concentremo sul passaggio dei dati da un componente padre ad un componente figlio attraverso la sintassi Option API. Nella prossima lezione vedremo come implementare le props con la sintassi Composition API.

Esempio di props in Vue.js – passare una variabile

Facciamo dunque un esempio pratico di come utilizzare le props in un componente Vue.

Creiamo il componente padre che vuole passare un messaggio al figlio.

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>


In questo componente genitore (ParentComponent), abbiamo importato il componente figlio (ChildComponent) e lo abbiamo utilizzato nel nostro template. Abbiamo passato una prop chiamata “message” al componente figlio utilizzando la sintassi :message="parentMessage", dove parentMessage è una proprietà definita nei dati del componente genitore. Questo valore viene quindi ricevuto dal componente figlio attraverso la prop “message” e può essere utilizzato all’interno del suo template.

Quindi, quando il componente figlio viene renderizzato all’interno del componente genitore, il testo “Hello from Parent” verrà visualizzato nel componente figlio come parte del messaggio proveniente dal genitore.

Poi creiamo il componente figlio (ChildComponent), dove definiamo una prop chiamata “message“, che arriva dal componente genitore (ParentComponent). All’interno del template del componente figlio, possiamo accedere al valore della prop utilizzando la sintassi di interpolazione {{ message }}.

<template>
  <div>
    <h2>Child Component</h2>
    <p>Message from parent: {{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: ['message'], // Definiamo una prop chiamata "message"
};
</script>

libro javascript

Acquista il libro su JavaScript

Esempio di props in Vue.js – passare un array

Creiamo il componente padre (ParentComponent), dove importiamo il componente figlio (ChildComponent) e lo utilizziamo nel nostro template. Passiamo l’array nameList al componente figlio utilizzando la sintassi :names="nameList". All’interno del componente figlio, questo array sarà accessibile attraverso la prop “names” e verrà visualizzato nell’elenco.

Così, quando il componente figlio viene renderizzato all’interno del componente genitore, visualizzerà l’elenco dei nomi contenuti nell’array.

Ecco come si presenta il componente genitore:

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :names="nameList" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      nameList: ['Paperino', 'Pippo', 'Paperina', 'Pluto'] // Definiamo un array di nomi
    };
  }
};
</script>

Definiamo poi il componente figlio, dove definiamo una prop chiamata “names” per ricevere l’array di nomi dal componente genitore. Utilizziamo poi la direttiva v-for per iterare su ogni nome nell’array e visualizzarlo all’interno di un elenco non ordinato.

Ecco come si presenta il componente figlio:

<template>
  <div>
    <h2>Child Component</h2>
    <ul>
      <li v-for="name in names" :key="name">{{ name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: ['names'], // Definiamo una prop chiamata "names" per ricevere l'array
};
</script>

Esempio di props in Vue.js – passare un oggetto

Passiamo un oggetto dal componente padre al componente figlio. Definiamo un componente genitore (ParentComponent), dove importiamo il componente figlio (ChildComponent) e lo utilizziamo nel nostro template. Passiamo l’oggetto userInfo al componente figlio utilizzando la sintassi :userData="userInfo".

Ecco come si presenta il componente genitore:

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :userData="userInfo" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      userInfo: {
        username: 'paperina',
        email: 'paperina@example.com',
        eta: 28

      }
    };
  }
};
</script>

All’interno del componente figlio, l’oggetto userInfo sarà accessibile attraverso la prop “userData” e verranno visualizzate le varie proprietà dell’oggetto dell’utente. All’interno del template del componente figlio, possiamo accedere alle varie proprietà dell’oggetto user come user.username e user.email, ecc.

Così, quando il componente figlio viene renderizzato all’interno del componente genitore, visualizzerà le informazioni dell’utente come username ed email.

<template>
  <div>
    <h2>Child Component</h2>
    <p>Username: {{ user.username }}</p>
    <p>Email: {{ user.email }}</p>
    <p>Eta: {{ user.eta }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: ['userData'], // Definiamo una prop chiamata "userData" per ricevere l'oggetto
};
</script>

Conclusioni

Dunque le props in Vue offrono un meccanismo flessibile per passare dati da un componente genitore a uno figlio. Questo favorisce una migliore organizzazione del codice e una maggiore modularità. Inoltre le props sono immutabili nel componente figlio, il che significa che non possono essere modificate direttamente dal componente figlio. Questo favorisce una migliore comprensione del flusso dei dati e una maggiore prevedibilità nel comportamento dell’applicazione.

Le props possono essere di diversi tipi di dati, come stringhe, numeri, oggetti, array, funzioni, booleani, ecc. Questo permette una grande flessibilità nel passaggio di dati tra i componenti. Vedremo in seguito che Vue.js offre la possibilità di definire regole di validazione per le props, consentendo di specificare il tipo e altre condizioni che devono essere soddisfatte per accettare una prop.

Alcuni link utili

Tutorial JavaScript

Versione rivisitata del gioco dell’impiccato: divertiti ad indovinare le parole ed impara a sviluppare uno dei giochi più famosi.

Slot Machine: segui una guida passo passo per imparare a svilupparne una semplicissima slot machine da zero.

Quiz interattivo: un quiz che permette di testare le conoscenze su determinati argomenti.

Memoria del colore: una sfida divertente che mette alla prova la memoria visiva e la capacità di ricordare sequenze di colori sempre più complesse.

Memory Game: Un’avvincente sfida di concentrazione e memoria!