Corso Vue.js 3 in italiano

Vue HOME

Vue.js è un framework JavaScript progressivo per costruire interfacce utente reattive. È leggero, facile da apprendere e si integra in qualsiasi progetto.

Perché scegliere Vue?

• 🚀 Reattività automatica: i dati cambiano, la UI si aggiorna da sola
• 📦 Progressivo: aggiungilo a un progetto esistente o usalo come SPA completa
• 📖 Facile da imparare: sintassi vicina a HTML e JavaScript puro
• 🔧 Ricco di strumenti: router, store, devtools già pronti

Vue Intro

Vue.js è stato creato da Evan You nel 2014. È open source e oggi è uno dei framework JavaScript più usati al mondo, con milioni di sviluppatori.

Come funziona Vue

Vue collega il DOM HTML a un oggetto JavaScript reattivo. Quando i dati cambiano, Vue aggiorna automaticamente solo le parti della pagina che ne hanno bisogno.

Versione CDN (senza installazione)

Per iniziare subito basta includere lo script CDN nell'HTML:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Il tag <div id="app"> è il punto di montaggio dell'applicazione Vue.

Vue Directives

Le direttive Vue sono attributi speciali che iniziano con v-. Aggiungono comportamenti reattivi all'HTML.

Le direttive principali

Vue v-bind

v-bind collega dinamicamente un attributo HTML a un valore del componente Vue. La shorthand è il due punti :.

<!-- Forma estesa -->
<img v-bind:src="urlImmagine">
<a v-bind:href="link">Clicca</a>

<!-- Shorthand -->
<img :src="urlImmagine">
<a :href="link">Clicca</a>

Con v-bind si possono collegare src, href, class, style, disabled e qualsiasi altro attributo.

Vue v-if

v-if mostra o nasconde un elemento in base a una condizione. Se la condizione è falsa, l'elemento viene rimosso completamente dal DOM.

<p v-if="loggato">Benvenuto!</p>
<p v-else-if="guest">Sei un ospite</p>
<p v-else>Accedi per continuare</p>

Vue v-show

v-show mostra o nasconde un elemento usando display:none. L'elemento rimane nel DOM, ma viene reso invisibile.

<!-- v-show: usa display:none, l'elemento resta nel DOM -->
<div v-show="visibile">Sono qui!</div>

<!-- v-if: rimuove/aggiunge l'elemento al DOM -->
<div v-if="visibile">Sono qui!</div>

Quando usare v-show: quando l'elemento si alterna frequentemente, perché evita di ricostruire il DOM ogni volta.

Vue v-for

v-for renderizza una lista di elementi iterando su un array o un oggetto. Richiede sempre :key per aiutare Vue a tracciare gli elementi.

<!-- Array -->
<li v-for="(item, index) in lista" :key="index">
  {{ index }}. {{ item }}
</li>

<!-- Array di oggetti -->
<li v-for="corso in corsi" :key="corso.id">
  {{ corso.nome }}
</li>

Vue Events

Vue gestisce gli eventi del browser tramite la direttiva v-on (shorthand: @). Si collega un evento HTML a un metodo Vue.

<!-- click -->
<button @click="saluta">Clicca</button>

<!-- mouseover -->
<div @mouseover="evidenzia">Passa sopra</div>

<!-- submit form -->
<form @submit.prevent="invia">...</form>

Il modificatore .prevent chiama automaticamente event.preventDefault().

Vue v-on

v-on è la direttiva per ascoltare eventi. La shorthand @ è la forma più usata.

<!-- Forma estesa -->
<button v-on:click="metodo">Click</button>

<!-- Shorthand (preferita) -->
<button @click="metodo">Click</button>

<!-- Inline con espressione -->
<button @click="contatore++">+1</button>

<!-- Con argomento dell'evento -->
<input @input="gestisci($event)">

Vue Methods

I methods sono funzioni definite all'interno dell'opzione methods del componente. Vengono chiamati tramite eventi o template.

<script>
createApp({
  data() {
    return { conta: 0 }
  },
  methods: {
    incrementa() { this.conta++ },
    decrementa() { this.conta-- },
    reset() { this.conta = 0 }
  }
}).mount('#app')
</script>

All'interno dei methods si usa this per accedere ai dati del componente.

Vue Event Modifiers

I modificatori di evento si aggiungono dopo l'evento con un punto. Rendono il codice più leggibile evitando chiamate esplicite a metodi come preventDefault().

Vue v-model

v-model crea un binding bidirezionale tra un elemento del form e i dati Vue. Quando l'utente cambia il valore, Vue aggiorna i dati e viceversa.

<input v-model="testo">
<textarea v-model="nota"></textarea>
<input type="checkbox" v-model="accettato">
<input type="radio" value="A" v-model="scelta">
<select v-model="selezionato">...</select>

Modificatori utili: v-model.trim (rimuove spazi), v-model.number (converte in numero), v-model.lazy (aggiorna al blur).

Vue CSS Binding

Vue permette di collegare dinamicamente classi CSS e stili inline tramite :class e :style.

<!-- Oggetto: aggiunge la classe se il valore è true -->
<div :class="{ attivo: isAttivo, errore: hasErrore }"></div>

<!-- Array: applica più classi -->
<div :class="[classeBase, classeExtra]"></div>

<!-- Stile inline -->
<div :style="{ color: colore, fontSize: dimensione + 'px' }"></div>

Vue Computed Properties

Le computed properties sono valori derivati dai dati del componente. Vengono messe in cache: si ricalcolano solo quando i loro dati cambiano.

<script>
computed: {
  // Ricalcolato solo se 'lista' cambia
  totale() {
    return this.lista.reduce((s, i) => s + i.prezzo, 0)
  }
},
methods: {
  // Eseguito ogni volta che il template viene rivalutato
  getTotale() {
    return this.lista.reduce((s, i) => s + i.prezzo, 0)
  }
}
</script>

Vue Watchers

I watcher eseguono una funzione ogni volta che un dato specifico cambia. Sono utili per effetti collaterali come chiamate API o validazioni.

<script>
watch: {
  // Osserva 'nome', viene chiamato a ogni modifica
  nome(nuovoValore, vecchioValore) {
    console.log(`da ${vecchioValore} a ${nuovoValore}`)
    this.validato = nuovoValore.length >= 3
  }
}
</script>

Vue Templates

Il template Vue è l'HTML del componente arricchito con la sintassi reattiva. Vue compila il template in una funzione di rendering ottimizzata.

Interpolazione di testo

<!-- Interpolazione testo -->
<p>{{ messaggio }}</p>

<!-- HTML grezzo (attenzione agli XSS!) -->
<p v-html="htmlContent"></p>

<!-- Espressioni JavaScript -->
<p>{{ numero * 2 }}</p>
<p>{{ ok ? 'Sì' : 'No' }}</p>
<p>{{ testo.split(' ').reverse().join(' ') }}</p>

Vue Why, How and Setup

Quando l'app cresce, Vue offre un sistema a componenti e gli SFC (Single File Components) con estensione .vue. Richiedono una build con Vite.

Installazione con Vite

npm create vue@latest mio-progetto
cd mio-progetto
npm install
npm run dev

Vite avvia un server locale su http://localhost:5173 con hot-reload automatico.

Vue First SFC Page

Un SFC (Single File Component) è un file .vue con tre sezioni: template, script e style.

<!-- MioComponente.vue -->
<template>
  <h2>{{ titolo }}</h2>
  <button @click="conta++">Cliccato {{ conta }} volte</button>
</template>

<script>
export default {
  data() {
    return { titolo: 'Il mio SFC', conta: 0 }
  }
}
</script>

<style scoped>
h2 { color: #42b883; }
</style>

L'attributo scoped limita i CSS solo a quel componente, evitando conflitti.

Vue Components

I componenti sono blocchi di UI riutilizzabili. Si registrano globalmente o localmente e si usano come tag HTML personalizzati.

<!-- In un progetto Vite, importeresti il file .vue -->
const app = createApp(App)

// Registrazione globale
app.component('MioBottone', {
  template: '<button>Click!</button>'
})

app.mount('#app')

Con CDN si definiscono i componenti come oggetti e si registrano con app.component().

Vue Props

I props permettono al componente padre di passare dati ai figli. Sono come i parametri di una funzione per i componenti.

<!-- Nel componente figlio -->
export default {
  props: ['titolo', 'colore'],
  // oppure con validazione:
  props: {
    titolo: { type: String, required: true },
    colore: { type: String, default: 'blue' }
  }
}

<!-- Nel componente padre -->
<carta titolo="HTML" colore="red"></carta>
<carta :titolo="dinamico" :colore="c"></carta>

Vue v-for Components

Si può usare v-for direttamente su un componente personalizzato per renderizzare una lista di componenti.

<lista-item
  v-for="item in items"
  :key="item.id"
  :testo="item.testo"
></lista-item>

Vue $emit()

$emit() permette a un componente figlio di comunicare eventi al padre. È il meccanismo per il flusso dati dal basso verso l'alto.

<!-- Figlio -->
export default {
  emits: ['aumenta'],
  methods: {
    clicca() {
      this.$emit('aumenta', 5) // passa un valore
    }
  }
}

<!-- Padre -->
<figlio @aumenta="totale += $event"></figlio>

Vue Fallthrough Attributes

Quando passi attributi a un componente che non sono dichiarati come props, Vue li applica automaticamente all'elemento radice del template del componente. Si chiama fallthrough.

<!-- Padre -->
<mio-bottone class="grande" id="btn1"></mio-bottone>

<!-- Figlio (template) -->
<button>Click</button>
<!-- Risultato: <button class="grande" id="btn1">Click</button> -->

Per disabilitare questo comportamento: inheritAttrs: false e v-bind="$attrs" manualmente.

Vue Scoped Styling

Con gli SFC, l'attributo scoped limita i CSS solo al componente corrente, evitando conflitti con altri componenti.

<style scoped>
/* Questo stile vale SOLO per questo componente */
h2 { color: green; }
.card { border: 1px solid #e2e8f0; }
</style>

Vue aggiunge un attributo unico come data-v-f3f3eg9 a ogni elemento e al selettore CSS, isolando gli stili.

Vue Local Components

I componenti possono essere registrati localmente all'interno di un solo componente, invece che globalmente con app.component().

<script>
import CardCorso from './CardCorso.vue'
import BtnAzione from './BtnAzione.vue'

export default {
  components: {
    CardCorso,
    BtnAzione
  }
}
</script>

La registrazione locale è preferita perché riduce il bundle finale: un componente non usato non viene incluso.

Vue Slots

Gli slot permettono al componente padre di iniettare contenuto HTML dentro un componente figlio, rendendolo molto flessibile.

<!-- Componente Card -->
<template>
  <div class="card">
    <slot>Contenuto di default</slot>
  </div>
</template>

<!-- Uso nel padre -->
<card>
  <h2>Titolo personalizzato</h2>
  <p>Testo personalizzato</p>
</card>

Vue v-slot

Con gli slot con nome si possono definire più zone di inserimento in un componente. Si usano con v-slot.

<!-- Componente con slot multipli -->
<div class="card">
  <header><slot name="header"></slot></header>
  <main><slot></slot></main>
  <footer><slot name="footer"></slot></footer>
</div>

<!-- Uso nel padre -->
<card>
  <template v-slot:header>Titolo</template>
  <p>Corpo principale</p>
  <template #footer>Footer</template>
</card>

Vue Scoped Slots

Gli scoped slot permettono al componente figlio di passare dati al contenuto dello slot del padre, invertendo il normale flusso.

<!-- Figlio: espone 'item' tramite lo slot -->
<slot v-for="item in lista" :item="item"></slot>

<!-- Padre: riceve 'item' e decide come renderizzarlo -->
<lista-componente v-slot="{ item }">
  <span>{{ item.nome }}</span>
</lista-componente>

Vue Dynamic Components

Il tag speciale <component :is="..."> permette di cambiare componente dinamicamente in base a un valore.

<component :is="componenteCorrente"></component>

<!-- Con keep-alive: mantiene lo stato quando si cambia -->
<keep-alive>
  <component :is="tab"></component>
</keep-alive>

Vue Teleport

<Teleport> sposta il contenuto di un componente in un altro punto del DOM, pur mantenendolo logicamente nel componente padre.

<!-- Il contenuto viene renderizzato in body,
     ma la logica rimane in questo componente -->
<Teleport to="body">
  <div class="modal" v-if="modale">
    Sono una modale fuori dal normale flusso DOM!
  </div>
</Teleport>

Utile per modali, tooltip e notifiche che devono stare in cima allo stack (z-index) senza problemi di overflow.

Vue HTTP Request

Vue non include un client HTTP: si usa fetch() nativo o la libreria Axios. Le chiamate API si fanno tipicamente in mounted().

<script>
export default {
  data() {
    return { utenti: [], caricamento: false }
  },
  async mounted() {
    this.caricamento = true
    const res = await fetch('https://jsonplaceholder.typicode.com/users')
    this.utenti = await res.json()
    this.caricamento = false
  }
}
</script>

Vue Template Refs

I template refs danno accesso diretto a un elemento DOM o a un'istanza di un componente figlio tramite l'attributo ref.

<input ref="mioInput">

<script>
mounted() {
  // Accesso diretto all'elemento DOM
  this.$refs.mioInput.focus()
}
</script>

I ref sono disponibili solo dopo che il componente è montato (mounted()). Prima il valore è null.

Vue Lifecycle Hooks

I lifecycle hooks sono metodi chiamati automaticamente nei diversi momenti della vita di un componente.

Vue Provide/Inject

provide e inject permettono a un componente antenato di condividere dati con tutti i discendenti, senza passarli manualmente come props a ogni livello.

<!-- Antenato -->
export default {
  provide() {
    return { temaColore: 'blue', utente: this.utente }
  }
}

<!-- Discendente (qualsiasi livello) -->
export default {
  inject: ['temaColore', 'utente']
}

È utile per evitare il prop drilling (passare props attraverso molti livelli di componenti).

Vue Routing

Vue Router è la libreria ufficiale per la navigazione tra pagine in un'app Vue SPA (Single Page Application).

npm install vue-router@4

<script>
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import Corsi from './views/Corsi.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/corsi', component: Corsi },
    { path: '/corso/:id', component: DettaglioCorso }
  ]
})
export default router
</script>

Vue Form Inputs

Vue gestisce tutti i tipi di input con v-model. Ecco come si collega ciascun tipo di campo a dati reattivi.

<input type="text" v-model="testo">
<input type="number" v-model.number="numero">
<input type="checkbox" v-model="check">
<input type="radio" value="a" v-model="radio">
<select v-model="selezione">...</select>
<textarea v-model="area"></textarea>

Vue Animations

Vue include il componente <Transition> per animare l'ingresso e l'uscita di elementi.

<Transition name="sfuma">
  <p v-if="visibile">Testo animato</p>
</Transition>

<style>
/* Entrata */
.sfuma-enter-active { transition: opacity .5s; }
.sfuma-enter-from { opacity: 0; }
/* Uscita */
.sfuma-leave-active { transition: opacity .5s; }
.sfuma-leave-to { opacity: 0; }
</style>

Vue Animations con v-for

<TransitionGroup> anima gli elementi di una lista gestita con v-for.

<TransitionGroup name="lista" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.testo }}
  </li>
</TransitionGroup>

<style>
.lista-enter-active, .lista-leave-active { transition: all .3s; }
.lista-enter-from, .lista-leave-to { opacity:0; transform:translateX(30px); }
.lista-move { transition: transform .3s; }
</style>

Vue Build

Per il deploy in produzione si esegue la build con Vite, che produce file ottimizzati e minificati.

# Avvia il server di sviluppo
npm run dev

# Build per produzione
npm run build

# Anteprima del build
npm run preview

La build produce una cartella dist/ con HTML, CSS e JS ottimizzati, pronti per essere caricati su qualsiasi hosting statico.

Vue Composition API

La Composition API è un'alternativa alla Options API che usa funzioni invece di oggetti. Rende più facile riutilizzare la logica tra componenti.

<!-- Options API -->
export default {
  data() { return { conta: 0 } },
  methods: { incrementa() { this.conta++ } }
}

<!-- Composition API (setup) -->
import { ref } from 'vue'
export default {
  setup() {
    const conta = ref(0)
    const incrementa = () => conta.value++
    return { conta, incrementa }
  }
}

Vue Built-in Attributes

Vue ha attributi speciali built-in che aggiungono comportamenti alle direttive e ai componenti.

Vue Built-in Components

Vue include alcuni componenti speciali integrati che non è necessario registrare.

Vue Directives Reference

Riepilogo completo di tutte le direttive built-in di Vue.

Conclusione

Complimenti! 🎉 Hai completato il corso di Vue.js completo e gratuito in italiano: dalle direttive e il data binding, ai componenti e le props, fino a Vue Router, Pinia, la Composition API e le performance. Ora sai costruire SPA moderne con Vue 3.

Il modo migliore per consolidare Vue.js è costruire un progetto reale: crea un'app con routing, store globale e chiamate API. Rifai gli esempi interattivi, esplora la documentazione ufficiale e sperimenta con Nuxt.js per il SSR.

E ora?

Dopo Vue.js il passo successivo naturale è esplorare Angular per scoprire un approccio più strutturato ai framework enterprise, oppure approfondire React per confrontare le tre grandi librerie JavaScript. Se vuoi un percorso guidato personalizzato, posso seguirti con ripetizioni di informatica in presenza a Roma.