Vue.js per Principianti: La Guida Completa per Iniziare a Costruire Interfacce Reattive

Principiante
JavaScript Vue.js

Scopri Vue.js da zero con questa guida completa per principianti. Impara le basi, le direttive, i componenti e costruisci la tua prima applicazione web reattiva.

Pubblicato
Tag
Web Development framework javascript frontend tutorial Vue.js SPA Reattività

Vue.js per Principianti: La Guida Completa per Iniziare a Costruire Interfacce Reattive

Benvenuti nel mondo entusiasmante dello sviluppo web moderno! Se sei un principiante e cerchi un framework JavaScript progressivo, facile da imparare e incredibilmente potente per costruire interfacce utente, allora Vue.js è la scelta perfetta per te. In questa guida completa, ti accompagneremo passo dopo passo attraverso i concetti fondamentali di Vue.js, mostrandoti come configurare il tuo ambiente, comprendere le sue direttive chiave e costruire la tua prima applicazione interattiva.

Cosa è Vue.js e Perché Dovresti Impararlo?

Vue.js (spesso semplicemente chiamato "Vue") è un framework JavaScript open source per la costruzione di interfacce utente e single-page applications (SPA). Creato da Evan You, si distingue per la sua semplicità, flessibilità e prestazioni elevate. A differenza di altri framework più "opinionated" come Angular, Vue è progettato per essere adottato in modo incrementale. Questo significa che puoi usarlo per potenziare piccole parti di un'applicazione esistente o per costruire intere applicazioni complesse da zero. È un "framework progressivo" nel vero senso della parola.

Perché scegliere Vue.js?

  1. Facilità di Apprendimento: Vue ha una curva di apprendimento molto dolce. Se hai già familiarità con HTML, CSS e JavaScript di base, sarai in grado di iniziare a costruire applicazioni Vue in pochissimo tempo. La sua API è intuitiva e ben documentata, rendendolo ideale per i principianti.
  2. Reattività: Vue è intrinsecamente reattivo. Questo significa che quando i tuoi dati cambiano, la tua interfaccia utente si aggiorna automaticamente per riflettere tali cambiamenti, senza che tu debba manipolare manualmente il DOM (Document Object Model). Questo semplifica enormemente lo sviluppo e rende le applicazioni più efficienti.
  3. Flessibilità: Puoi usare Vue in vari modi: da un semplice script incluso via CDN per aggiungere interattività a una pagina HTML, fino a un'applicazione complessa costruita con strumenti di build moderni come Webpack e Vite.
  4. Component-Based Architecture: Vue incoraggia la costruzione di applicazioni tramite componenti riutilizzabili e isolati. Questo approccio modulare rende il codice più organizzato, facile da mantenere e da testare.
  5. Ottime Performance: Vue è leggero e ottimizzato per le prestazioni. Utilizza un Virtual DOM per minimizzare le manipolazioni dirette del DOM, rendendo le tue applicazioni veloci e fluide.
  6. Ampia Comunità e Documentazione: Vue vanta una comunità di sviluppatori in rapida crescita e una documentazione eccellente e completa, rendendo facile trovare aiuto e risorse.

In sintesi, Vue.js ti permette di concentrarti sulla logica della tua applicazione piuttosto che sulla manipolazione manuale del DOM, risparmiando tempo e fatica e permettendoti di costruire applicazioni robuste e performanti in modo efficiente.

Configurazione dell'Ambiente di Sviluppo

Per iniziare a lavorare con Vue.js, hai diverse opzioni. Per i principianti, la più semplice è includere Vue direttamente nel tuo file HTML tramite una CDN (Content Delivery Network). Per progetti più grandi e strutturati, si utilizza la Vue CLI (Command Line Interface).

Opzione 1: Inclusione tramite CDN (Consigliato per i Principianti)

Questo metodo è il più rapido per iniziare e non richiede alcuna installazione di strumenti di build. È perfetto per prototipi, piccole integrazioni o per imparare le basi.

Crea un semplice file index.html:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La Mia Prima App Vue.js</title>
    <!-- Inclusione di Vue.js tramite CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ messaggio }}
    </div>

    <script>
        // Qui scriveremo il nostro codice Vue.js
        const app = new Vue({
            el: '#app',
            data: {
                messaggio: 'Ciao, mondo da Vue.js!'
            }
        });
    </script>
</body>
</html>

Salva questo file e aprilo nel tuo browser. Dovresti vedere il testo "Ciao, mondo da Vue.js!". Congratulazioni, hai appena creato la tua prima applicazione Vue!

Analizziamo cosa è successo:

  • Abbiamo incluso Vue.js tramite la riga <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>. Questo rende disponibile la libreria Vue nel nostro browser.
  • Abbiamo definito un elemento div con id="app". Questo sarà l'elemento radice della nostra applicazione Vue.
  • All'interno dell'elemento div, abbiamo usato la sintassi {{ messaggio }}. Questa è chiamata interpolazione o data binding e serve a visualizzare il valore della variabile messaggio definita nel nostro codice Vue.
  • Nel tag <script> finale, abbiamo creato una nuova istanza di Vue con new Vue({}).
    • el: '#app' indica a Vue di "montare" la sua applicazione sull'elemento con id="app".
    • data: { messaggio: 'Ciao, mondo da Vue.js!' } definisce i dati della nostra applicazione. messaggio è una proprietà reattiva.

Opzione 2: Vue CLI (per Progetti Più Grandi)

Per progetti più complessi, Vue CLI (Command Line Interface) è lo strumento raccomandato. Ti fornisce un ambiente di sviluppo completo con hot-reloading, linting, build optimization e molto altro. Richiede Node.js e npm (o Yarn) installati sul tuo sistema.

  1. Installa Node.js: Se non lo hai già, scarica e installa Node.js dal sito ufficiale (nodejs.org). Questo include npm.
  2. Installa Vue CLI globalmente: Apri il tuo terminale o prompt dei comandi ed esegui: 
    npm install -g @vue/cli
# OPPURE
yarn global add @vue/cli
  3. Crea un nuovo progetto Vue: 
    vue create il-mio-progetto-vue
    Segui le istruzioni nel terminale per scegliere le opzioni del progetto (es. Vue 2 o Vue 3, TypeScript, Router, Vuex, ecc.). Per i principianti, le opzioni predefinite vanno bene o scegli "Manually select features" e seleziona solo le basi.
  4. Naviga nella directory del progetto ed avvia il server di sviluppo: 
    cd il-mio-progetto-vue
npm run serve
# OPPURE
yarn serve
    Questo avvierà un server di sviluppo locale, solitamente su http://localhost:8080, e aprirà la tua applicazione nel browser.

Per questa guida, ci concentreremo sull'approccio CDN per mantenere la massima semplicità, ma è fondamentale sapere che Vue CLI è lo standard per lo sviluppo professionale.

I Fondamentali di Vue.js: Data Binding e Direttive

Ora che abbiamo il nostro ambiente pronto, tuffiamoci nei concetti chiave di Vue.js.

L'Istanza Vue

Ogni applicazione Vue inizia con una nuova istanza di Vue. Questa istanza funge da "viewmodel" per la tua applicazione. Si occupa di collegare i dati (data) con il template (el).

const vm = new Vue({
    el: '#app',
    data: {
        nome: 'Alice',
        eta: 30,
        mostraEtà: true
    },
    methods: {
        saluta: function() {
            alert('Ciao, ' + this.nome + '!');
        }
    },
    computed: {
        messaggioCompleto: function() {
            return this.nome + ' ha ' + this.eta + ' anni.';
        }
    }
});

Le proprietà più comuni che puoi passare all'oggetto options di new Vue() sono:

  • el: L'elemento DOM a cui Vue si aggancerà (il "punto di montaggio").
  • data: Un oggetto contenente le proprietà reattive che saranno disponibili nel tuo template.
  • methods: Un oggetto contenente le funzioni che puoi chiamare dal tuo template (es. per gestire eventi).
  • computed: Un oggetto contenente proprietà calcolate che dipendono da altre proprietà reattive. Vedremo questo in dettaglio.

Data Binding: Visualizzare i Dati

Vue rende molto semplice legare i dati JavaScript all'HTML. Abbiamo già visto l'interpolazione con le doppie parentesi graffe {{ }}.

Interpolazione di Testo ({{ }})

<div id="app">
    <p>{{ messaggio }}</p>
    <p>Il risultato di 2 + 2 è: {{ 2 + 2 }}</p>
    <p>Il messaggio in maiuscolo: {{ messaggio.toUpperCase() }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            messaggio: 'Benvenuto in Vue.js!'
        }
    });
</script>

Binding di Attributi (v-bind)

L'interpolazione di testo funziona solo per il contenuto di testo. Per legare i dati agli attributi HTML (come src, href, class, id), dobbiamo usare la direttiva v-bind. La forma abbreviata di v-bind è :.

<div id="app">
    <a v-bind:href="urlSito">Visita il nostro sito</a>
    <!-- Forma abbreviata -->
    <img :src="immagineUrl" :alt="descrizioneImmagine">
    <button :disabled="isDisabled">Premi qui</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            urlSito: 'https://www.esempio.com',
            immagineUrl: 'https://via.placeholder.com/150',
            descrizioneImmagine: 'Immagine di esempio',
            isDisabled: true
        }
    });
</script>

Quando isDisabled diventa false (magari dopo un'azione dell'utente), il pulsante si abiliterà automaticamente.

Direttive di Vue.js: Controllare il DOM

Le direttive sono attributi speciali con il prefisso v- che applicano un comportamento reattivo al DOM. Ne abbiamo già vista una, v-bind.

v-if, v-else-if, v-else: Rendering Condizionale

Queste direttive permettono di mostrare o nascondere elementi in base a una condizione.

<div id="app">
    <button @click="mostra = !mostra">Toggle Messaggio</button>
    <p v-if="mostra">Questo messaggio è visibile!</p>
    <p v-else>Questo messaggio è nascosto!</p>

    <div v-if="punteggio > 90">
        Ottimo lavoro!
    </div>
    <div v-else-if="punteggio > 70">
        Buon lavoro!
    </div>
    <div v-else>
        Continua ad esercitarti.
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            mostra: true,
            punteggio: 85
        }
    });
</script>

Nota su v-show: Esiste anche v-show, che funziona in modo simile a v-if ma con una differenza chiave. v-if rimuove o aggiunge l'elemento dal DOM, mentre v-show semplicemente alterna la proprietà CSS display dell'elemento. v-if ha un costo maggiore in termini di switching (creazione/distruzione), v-show ha un costo maggiore in termini di rendering iniziale (l'elemento è sempre nel DOM). Scegli v-if per elementi che cambiano raramente, v-show per elementi che cambiano frequentemente.

v-for: Rendering di Liste

La direttiva v-for è usata per renderizzare una lista di elementi basandosi su un array o un oggetto.

<div id="app">
    <h2>Lista Frutta:</h2>
    <ul>
        <li v-for="frutto in frutta" :key="frutto.id">
            {{ frutto.nome }}
        </li>
    </ul>

    <h2>Oggetto Utente:</h2>
    <ul>
        <li v-for="(valore, chiave) in utente" :key="chiave">
            {{ chiave }}: {{ valore }}
        </li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            frutta: [
                { id: 1, nome: 'Mela' },
                { id: 2, nome: 'Banana' },
                { id: 3, nome: 'Ciliegia' }
            ],
            utente: {
                nome: 'Mario',
                cognome: 'Rossi',
                eta: 30
            }
        }
    });
</script>

Importante: Quando usi v-for, devi sempre fornire una key univoca per ogni elemento. Questo aiuta Vue a tracciare l'identità di ogni nodo e a riutilizzare e riordinare gli elementi in modo efficiente quando la lista cambia. Senza key, Vue potrebbe avere comportamenti inaspettati o meno performanti.

v-on: Gestione degli Eventi

La direttiva v-on (abbreviata @) è usata per ascoltare gli eventi DOM e eseguire codice JavaScript quando si verificano. È fondamentale per rendere le tue applicazioni interattive.

<div id="app">
    <button v-on:click="incrementaContatore">Incrementa</button>
    <p>Contatore: {{ contatore }}</p>

    <!-- Forma abbreviata -->
    <button @click="decrementaContatore">Decrementa</button>

    <button @click="saluta('Alice')">Saluta Alice</button>
    <button @click="saluta('Bob')">Saluta Bob</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            contatore: 0
        },
        methods: {
            incrementaContatore: function() {
                this.contatore++;
            },
            decrementaContatore: function() {
                this.contatore--;
            },
            saluta: function(nome) {
                alert('Ciao, ' + nome + '!');
            }
        }
    });
</script>

Puoi anche usare i modificatori di eventi, come .prevent per chiamare event.preventDefault() o .stop per chiamare event.stopPropagation().

<form @submit.prevent="inviaForm">
    <input type="text" v-model="testoInput">
    <button type="submit">Invia</button>
</form>

v-model: Data Binding Bidirezionale (Form Input)

La direttiva v-model crea un binding bidirezionale tra un input di un form e una proprietà data. Questo significa che se l'input cambia, la proprietà data si aggiorna, e se la proprietà data cambia, l'input si aggiorna.

<div id="app">
    <input type="text" v-model="nomeUtente">
    <p>Ciao, {{ nomeUtente }}!</p>

    <textarea v-model="messaggioTesto"></textarea>
    <p>Hai scritto: {{ messaggioTesto }}</p>

    <input type="checkbox" id="accettoTermini" v-model="accettato">
    <label for="accettoTermini">Accetto i termini e condizioni</label>
    <p v-if="accettato">Grazie per aver accettato!</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            nomeUtente: '',
            messaggioTesto: 'Scrivi qui qualcosa...', 
            accettato: false
        }
    });
</script>

v-model è un potente strumento per la gestione dei form in Vue.js.

Computed Properties e Watchers

Computed Properties

Le computed properties sono funzioni che vengono trattate come proprietà data. Il loro valore viene calcolato in base ad altre proprietà reattive e viene memorizzato nella cache. Si aggiornano solo quando una delle dipendenze reattive cambia.

Sono perfette per:

  • Manipolare o combinare dati esistenti.
  • Eseguire calcoli complessi che dipendono da data.
  • Filtrare o ordinare liste.
<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <p>Nome completo: {{ fullName }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            firstName: 'John',
            lastName: 'Doe'
        },
        computed: {
            fullName: function() {
                console.log('Calcolo fullName...'); // Vedrai questo solo quando firstName o lastName cambiano
                return this.firstName + ' ' + this.lastName;
            }
        }
    });
</script>

Nel codice sopra, fullName verrà ricalcolato solo se firstName o lastName cambiano. Se accedi a fullName più volte nello stesso ciclo di rendering senza che le dipendenze siano cambiate, il valore memorizzato nella cache verrà restituito, rendendolo molto efficiente.

Watchers

I watchers (osservatori) ti permettono di eseguire codice asincrono o costoso in risposta a un cambiamento di una specifica proprietà data o computed property. Sono più generici delle computed properties e sono utili quando hai bisogno di eseguire effetti collaterali (es. fare una richiesta API, manipolare il DOM direttamente, eseguire logiche complesse).

<div id="app">
    <input type="text" v-model="domanda">
    <p>{{ risposta }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            domanda: '',
            risposta: 'Sto aspettando la tua domanda...'
        },
        watch: {
            // Il watcher si chiama come la proprietà che vogliamo osservare
            domanda: function(nuovaDomanda, vecchiaDomanda) {
                if (nuovaDomanda.indexOf('?') > -1) {
                    this.rispondiAllaDomanda();
                } else {
                    this.risposta = 'Sto aspettando la tua domanda...';
                }
            }
        },
        methods: {
            rispondiAllaDomanda: function() {
                this.risposta = 'Sto pensando...';
                setTimeout(() => {
                    if (Math.random() > 0.5) {
                        this.risposta = 'Sì, sicuramente!';
                    } else {
                        this.risposta = 'No, non credo.';
                    }
                }, 1000);
            }
        }
    });
</script>

In questo esempio, il watcher domanda reagisce ogni volta che la proprietà domanda cambia, controllando se contiene un punto interrogativo e chiamando una funzione asincrona per fornire una risposta. Questo dimostra l'utilità dei watchers per logiche che vanno oltre il semplice calcolo di un valore.

Quando usare cosa?

  • Computed Properties: Per derivare un nuovo valore basato su dati esistenti. Sono sincrone e memorizzate nella cache. Usale quando vuoi semplicemente mostrare un valore calcolato.
  • Watchers: Per eseguire effetti collaterali o logiche asincrone in risposta a cambiamenti di dati. Sono più potenti ma anche più costosi. Usali quando hai bisogno di fare qualcosa in reazione a un cambiamento, non solo calcolare un nuovo valore.

Class & Style Binding

Vue offre modi molto flessibili per gestire le classi CSS e gli stili inline in modo dinamico. Puoi passarli come stringhe, oggetti o array.

Binding di Classi

<div id="app">
    <div :class="{ 'active': isActive, 'text-danger': hasError }">Testo condizionale</div>
    <div :class="classArray">Classi da array</div>
    <button @click="toggleActive">Toggle Active</button>
    <button @click="toggleError">Toggle Error</button>
</div>

<style>
    .active { color: blue; font-weight: bold; }
    .text-danger { color: red; }
    .highlight { background-color: yellow; }
</style>

<script>
    new Vue({
        el: '#app',
        data: {
            isActive: true,
            hasError: false,
            classArray: ['highlight', 'extra-class']
        },
        methods: {
            toggleActive: function() {
                this.isActive = !this.isActive;
            },
            toggleError: function() {
                this.hasError = !this.hasError;
            }
        }
    });
</script>

Binding di Stili Inline

<div id="app">
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Testo stilizzato</div>
    <div :style="styleObject">Stile da oggetto</div>
    <div :style="[baseStyle, overridingStyle]">Stile da array di oggetti</div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            activeColor: 'green',
            fontSize: 20,
            styleObject: {
                backgroundColor: 'lightgray',
                padding: '10px'
            },
            baseStyle: {
                border: '1px solid black'
            },
            overridingStyle: {
                color: 'purple'
            }
        }
    });
</script>

Componenti Vue: Costruire Interfacce Modulari

I componenti sono il cuore di Vue.js (e di molti altri framework frontend moderni). Un componente è un'istanza Vue riutilizzabile e auto-contenuta con il proprio template, script e stile. Rendono le applicazioni modulari, facili da gestire e scalabili.

Registrazione di un Componente Globale

Per i progetti più piccoli o per imparare, puoi registrare i componenti globalmente. Questo li rende disponibili ovunque nell'istanza Vue principale.

<div id="app">
    <saluto-componente></saluto-componente>
    <saluto-componente></saluto-componente>
</div>

<script>
    // Registrazione globale del componente
    Vue.component('saluto-componente', {
        template: '<div>Ciao da un componente!</div>'
    });

    new Vue({
        el: '#app'
    });
</script>

Quando l'applicazione cresce, è preferibile la registrazione locale dei componenti per evitare collisioni di nomi e migliorare l'ottimizzazione del bundle.

Props: Passare Dati ai Componenti (Padre -> Figlio)

I componenti sono utili solo se possono comunicare tra loro. Le props (proprietà) sono il modo principale per passare dati da un componente padre a un componente figlio.

<div id="app">
    <benvenuto-utente nome="Alice" messaggio="Siamo felici di averti qui!"></benvenuto-utente>
    <benvenuto-utente nome="Bob"></benvenuto-utente>
</div>

<script>
    Vue.component('benvenuto-utente', {
        props: {
            nome: {
                type: String,
                required: true,
                default: 'Ospite'
            },
            messaggio: {
                type: String,
                default: 'Benvenuto!'
            }
        },
        template: '<div>Ciao {{ nome }}, {{ messaggio }}</div>'
    });

    new Vue({
        el: '#app'
    });
</script>

Nel componente benvenuto-utente, abbiamo definito le props nome e messaggio. required: true significa che il padre deve passare questa prop. default fornisce un valore predefinito se la prop non viene passata. È buona pratica definire il type delle props per una migliore validazione e leggibilità.

Eventi Personalizzati: Comunicazione Figlio -> Padre ($emit)

Per inviare dati o notificare eventi da un componente figlio a un componente padre, usiamo gli eventi personalizzati con $emit.

<div id="app">
    <p>Contatore globale: {{ contatoreGlobale }}</p>
    <pulsante-contatore @incrementa="handleIncrementa"></pulsante-contatore>
    <pulsante-contatore @incrementa="handleIncrementa"></pulsante-contatore>
</div>

<script>
    Vue.component('pulsante-contatore', {
        data: function() {
            return { contatoreLocale: 0 };
        },
        template: `
            <button @click="incrementaLocale">
                Incrementa (locale: {{ contatoreLocale }})
            </button>
        `,
        methods: {
            incrementaLocale: function() {
                this.contatoreLocale++;
                this.$emit('incrementa', this.contatoreLocale); // Emette un evento 'incrementa' al padre
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            contatoreGlobale: 0
        },
        methods: {
            handleIncrementa: function(valoreLocale) {
                this.contatoreGlobale += valoreLocale; // Aggiunge il valore locale al contatore globale
            }
        }
    });
</script>

Quando il pulsante nel componente pulsante-contatore viene cliccato, viene emesso un evento incrementa con il valore del contatore locale. Il componente padre (#app) ascolta questo evento con @incrementa e chiama il metodo handleIncrementa, aggiornando il suo contatoreGlobale.

Esempi Pratici: Costruire una Semplice To-Do List

Costruiamo ora una semplice applicazione To-Do List per mettere in pratica quanto appreso. Questa app ci permetterà di aggiungere, marcare come completati ed eliminare elementi dalla lista.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista To-Do con Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; }
        #app { max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #333; }
        .input-section { display: flex; margin-bottom: 20px; }
        .input-section input { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 16px; }
        .input-section button { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 16px; }
        .input-section button:hover { background-color: #45a049; }
        ul { list-style: none; padding: 0; }
        li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; }
        li:last-child { border-bottom: none; }
        li.completed span { text-decoration: line-through; color: #888; }
        .task-content { display: flex; align-items: center; flex-grow: 1; }
        .task-content input[type="checkbox"] { margin-right: 10px; transform: scale(1.2); }
        .delete-button { background-color: #f44336; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
        .delete-button:hover { background-color: #da190b; }
        .empty-message { text-align: center; color: #888; margin-top: 20px; }
    </style>
</head>
<body>
    <div id="app">
        <h1>La Mia Lista To-Do</h1>

        <div class="input-section">
            <input type="text" v-model="nuovoTodoText" @keyup.enter="addTodo" placeholder="Aggiungi una nuova attività...">
            <button @click="addTodo">Aggiungi</button>
        </div>

        <ul v-if="todos.length > 0">
            <li v-for="(todo, index) in todos" :key="todo.id" :class="{ completed: todo.completed }">
                <div class="task-content">
                    <input type="checkbox" v-model="todo.completed">
                    <span>{{ todo.text }}</span>
                </div>
                <button class="delete-button" @click="removeTodo(index)">Elimina</button>
            </li>
        </ul>
        <p v-else class="empty-message">Nessuna attività da mostrare. Aggiungine una!</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                nuovoTodoText: '',
                todos: []
            },
            methods: {
                addTodo: function() {
                    if (this.nuovoTodoText.trim() !== '') {
                        this.todos.push({
                            id: Date.now(), // ID univoco per la key di v-for
                            text: this.nuovoTodoText.trim(),
                            completed: false
                        });
                        this.nuovoTodoText = ''; // Resetta il campo input
                    }
                },
                removeTodo: function(index) {
                    this.todos.splice(index, 1);
                }
            }
        });
    </script>
</body>
</html>

Spiegazione del codice:

  • HTML e CSS: Abbiamo un layout semplice con un campo di input, un pulsante e una lista non ordinata. Ho aggiunto un po' di CSS per renderla più gradevole.
  • #app: Il nostro contenitore Vue.
  • data:
    • nuovoTodoText: Lega il valore del campo input per la nuova attività (v-model).
    • todos: Un array di oggetti, dove ogni oggetto rappresenta un'attività con id, text e completed (booleano).
  • input-section:
    • <input type="text" v-model="nuovoTodoText" @keyup.enter="addTodo" ...>: L'input per aggiungere nuove attività. v-model crea il binding bidirezionale. @keyup.enter è un modificatore di evento che chiama addTodo quando si preme Enter.
    • <button @click="addTodo">Aggiungi</button>: Il pulsante che chiama il metodo addTodo al click.
  • ul e li:
    • <ul v-if="todos.length > 0">: La lista viene mostrata solo se ci sono attività.
    • <li v-for="(todo, index) in todos" :key="todo.id" :class="{ completed: todo.completed }">:
      • v-for itera sull'array todos.
      • :key="todo.id": Fondamentale per le performance e la stabilità della lista.
      • :class="{ completed: todo.completed }": Aggiunge dinamicamente la classe completed all'elemento li se todo.completed è true, applicando lo stile text-decoration: line-through.
    • <input type="checkbox" v-model="todo.completed">: Una checkbox che, grazie a v-model, aggiorna automaticamente la proprietà completed dell'oggetto todo corrispondente. Questo è un esempio perfetto di reattività.
    • <span>{{ todo.text }}</span>: Visualizza il testo dell'attività.
    • <button class="delete-button" @click="removeTodo(index)">Elimina</button>: Il pulsante per eliminare un'attività, che chiama removeTodo passando l'indice dell'attività nella lista.
  • methods:
    • addTodo(): Controlla che l'input non sia vuoto, crea un nuovo oggetto todo con un id univoco (usando Date.now() per semplicità, ma in un'app reale useresti un generatore di ID più robusto), lo aggiunge all'array todos e poi svuota il campo input.
    • removeTodo(index): Utilizza splice per rimuovere l'attività dall'array todos all'indice specificato.

Questa applicazione dimostra l'uso di v-model, v-for, v-if, v-on:click, v-on:keyup.enter, v-bind:class e la gestione dello stato reattivo in Vue.js.

Errori Comuni per i Principianti e Suggerimenti

Quando si inizia con Vue, è facile incorrere in alcuni errori comuni. Esserne consapevoli può aiutarti a evitarli.

  1. Manipolare il DOM Direttamente: Il principio fondamentale di Vue è la reattività. Non dovresti mai manipolare il DOM direttamente (es. con document.querySelector o jQuery) all'interno di un'applicazione Vue per aggiornare l'interfaccia. Invece, modifica i dati nella tua istanza Vue (this.myVariable = 'nuovo valore') e lascia che Vue aggiorni il DOM per te. Questo è il "perché" della reattività.
  2. Dimenticare this: All'interno dei methods, computed properties e watchers di un'istanza Vue, devi usare this per accedere alle proprietà data o ad altri methods (es. this.messaggio, this.myMethod()). Se lo dimentichi, JavaScript cercherà una variabile globale con quel nome e fallirà.
  3. Mutare le Props in un Componente Figlio: Le props sono pensate per essere unidirezionali (padre -> figlio). Non dovresti modificare una prop direttamente all'interno di un componente figlio. Se un componente figlio ha bisogno di modificare una prop, dovrebbe emettere un evento ($emit) al padre, e il padre dovrebbe aggiornare la prop. Questo mantiene il flusso di dati chiaro e prevedibile.
  4. Dimenticare le key in v-for: Come menzionato, la direttiva :key è cruciale per le performance e il corretto funzionamento delle liste con v-for. Assicurati sempre di fornire una key univoca e stabile per ogni elemento nella lista (idealmente un ID del dato stesso, non l'indice dell'array, a meno che la lista non sia statica e non cambi mai).
  5. Non Capire la Reattività di Vue: Vue traccia le dipendenze dei dati quando vengono acceduti per la prima volta. Se aggiungi una nuova proprietà a un oggetto data dopo che l'istanza Vue è stata creata, Vue potrebbe non essere in grado di rilevarne i cambiamenti. Per aggiungere nuove proprietà reattive, usa Vue.set(object, key, value) o this.$set(object, key, value) se sei all'interno di un componente.
  6. Errore nella Sintassi dei Template: Un errore comune è dimenticare le doppie parentesi graffe per l'interpolazione {{ }}, o usare v-bind per il testo e viceversa.

Ricorda, la documentazione ufficiale di Vue.js è una risorsa fantastica e molto ben scritta. Non esitare a consultarla per dubbi o approfondimenti!

Prossimi Passi e Risorse per Approfondire

Complimenti! Hai completato questa guida introduttiva a Vue.js e ora hai una solida base per continuare il tuo percorso. Lo sviluppo web è un campo in continua evoluzione, e c'è sempre qualcosa di nuovo da imparare. Ecco alcuni argomenti e risorse che ti consigliamo di esplorare per portare le tue competenze Vue al livello successivo:

  1. Vue CLI e Componenti Single-File (.vue): Per progetti reali, userai quasi sempre Vue CLI e i componenti Single-File. Questi file .vue ti permettono di definire template, script e stili di un componente in un unico file, rendendo il codice estremamente organizzato e leggibile. Questo è il prossimo passo fondamentale per lo sviluppo professionale con Vue.
  2. Vue Router: Man mano che le tue applicazioni crescono, avrai bisogno di gestire la navigazione tra diverse "pagine" o "viste". Vue Router è la libreria ufficiale per il routing nelle applicazioni Vue. Ti permette di creare Single-Page Applications (SPA) con URL puliti e navigazione lato client.
  3. Vuex (Gestione dello Stato): Per applicazioni complesse, la gestione dello stato può diventare difficile. Vuex è un pattern di gestione dello stato centralizzato e una libreria per le applicazioni Vue.js. Ti aiuta a gestire lo stato condiviso in modo prevedibile e debuggabile, rendendolo indispensabile per applicazioni di grandi dimensioni.
  4. Lifecycle Hooks: Ogni componente Vue attraversa un ciclo di vita (creazione, montaggio, aggiornamento, distruzione). I lifecycle hooks sono funzioni che puoi definire per eseguire codice in momenti specifici di questo ciclo (es. created, mounted, updated, beforeDestroy). Sono fondamentali per eseguire operazioni come il recupero dati all'avvio del componente o la pulizia di risorse.
  5. API Composition (Vue 3): Con Vue 3, è stata introdotta la Composition API, un nuovo modo per organizzare la logica dei componenti. Offre maggiore flessibilità e riusabilità della logica rispetto all'Options API (quella che abbiamo usato in questa guida). Sebbene più complessa per i principianti, è cruciale conoscerla per lo sviluppo moderno con Vue 3.
  6. Testing: Imparare a testare le tue applicazioni Vue (unit test, integration test, end-to-end test) è una competenza preziosa che garantisce la qualità e la manutenibilità del tuo codice.
  7. Documentazione Ufficiale di Vue.js: La risorsa più autorevole e completa è sempre la documentazione ufficiale. È aggiornata, chiara e ricca di esempi.

Continua a praticare, a costruire piccoli progetti e a esplorare la documentazione. La programmazione web è un viaggio di apprendimento continuo, e Vue.js è uno strumento fantastico per iniziare il tuo percorso nel frontend moderno. In bocca al lupo!

Continua a leggere