Italiano

Tutorial VueJS

Tutorial VueJS: Iniziare con Vue.js

Ciao, futuri sviluppatori web! Sono entusiasta di essere il tuo guida in questo emozionante viaggio nel mondo di Vue.js. Come qualcuno che ha insegnato scienze informatiche per più di un decennio, posso dirti che Vue.js è uno dei framework più accessibili per i principianti. Allora, entriamo nel dettaglio e creiamo insieme della magia!

VueJS - Home

Cos'è Vue.js?

Vue.js è un framework JavaScript progressivo per costruire interfacce utente. Ma cosa significa questo in termini semplici? Immagina di costruire una casa. Vue.js è come un set di pareti e stanze prefabbricate che puoi assemblare facilmente per creare la tua casa dei sogni. Rende la costruzione di applicazioni web complesse semplice come assemblare mattoni LEGO!

Perché Vue.js?

  1. Facile da imparare2. Flessibile e scalabile3. Ottima performance4. Fantastica community di supporto

Prerequisiti

Prima di iniziare, assicuriamoci di avere tutto il necessario:

  • Una comprensione di base di HTML e CSS
  • Familiarità con JavaScript (non preoccuparti se non sei un esperto!)
  • Un browser web moderno (raccomando Chrome o Firefox)
  • Un editor di testo (VS Code è il mio preferito personale)

Configurare il Primo Progetto Vue.js

Iniziamo creando una semplice applicazione "Ciao, Vue!". Prima di tutto, dobbiamo includere Vue.js nel nostro progetto. Possiamo farlo aggiungendo un tag script al nostro file 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</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ messaggio }}
</div>

<script>
new Vue({
el: '#app',
data: {
messaggio: 'Ciao, Vue!'
}
})
</script>
</body>
</html>

Spieghiamo questo codice:

  1. Includiamo la libreria Vue.js utilizzando un link CDN.
  2. Creiamo un <div> con un id "app". Questo è dove vivrà la nostra applicazione Vue.
  3. Dentro il div, utilizziamo {{ messaggio }}. Questo è chiamato interpolazione, e così mostriamo i dati in Vue.
  4. Nel nostro tag <script>, creiamo una nuova istanza Vue, dicendole di puntare all'elemento con id "app".
  5. Definiamo un oggetto data con una proprietà messaggio. Questo è i dati che Vue utilizzerà nella nostra app.

Se salvi questo file e lo apri in un browser, dovresti vedere "Ciao, Vue!" visualizzato sulla pagina. Congratulazioni! Hai appena creato la tua prima applicazione Vue.js!

Direttive Vue: Rendere le Cose Interattive

Ora che abbiamo le basi, rendiamo la nostra app un po' più interattiva. Vue ci fornisce direttive - attributi speciali che danno istruzioni a Vue su come comportarsi. Esaminiamo alcuni dei più comuni:

v-model: Bindings bidirezionali dei dati

v-model crea un binding bidirezionale tra input di modulo e lo stato dell'app. Aggiorniamo la nostra app per includere un campo di input:

<div id="app">
<input v-model="messaggio">
<p>Il messaggio è: {{ messaggio }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
messaggio: 'Ciao, Vue!'
}
})
</script>

Ora, mentre scrivi nel campo di input, vedrai il messaggio aggiornarsi in tempo reale. Non è magia?

v-if e v-else: Rendering condizionale

A volte vogliamo mostrare o nascondere elementi in base a una condizione. v-if e v-else vengono in nostro aiuto:

<div id="app">
<button @click="toggleVisibility">Toggle Messaggio</button>
<p v-if="èVisibile">Ora mi vedi!</p>
<p v-else>Ora non mi vedi!</p>
</div>

<script>
new Vue({
el: '#app',
data: {
èVisibile: true
},
methods: {
toggleVisibility() {
this.èVisibile = !this.èVisibile
}
}
})
</script>

In questo esempio, utilizziamo v-if e v-else per alternare tra due messaggi. La direttiva @click è un'abbreviazione per v-on:click, che ascolta gli eventi di clic.

v-for: Rendering di elenchi

Quando dobbiamo visualizzare una lista di elementi, v-for è la nostra direttiva di riferimento:

<div id="app">
<ul>
<li v-for="frutto in frutti">{{ frutto }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
frutti: ['Mela', 'Banana', 'Ciliegia', 'Durian']
}
})
</script>

Questo visualizzerà una lista di frutti. È così semplice!

Metodi in Vue

I metodi sono funzioni che possiamo utilizzare per aggiungere comportamento alle nostre istanze Vue. Creiamo un semplice contatore:

<div id="app">
<p>Contatore: {{ contatore }}</p>
<button @click="incrementa">Incrementa</button>
<button @click="decrementa">Decrementa</button>
</div>

<script>
new Vue({
el: '#app',
data: {
contatore: 0
},
methods: {
incrementa() {
this.contatore++
},
decrementa() {
this.contatore--
}
}
})
</script>

Qui, abbiamo definito due metodi: incrementa e decrementa. Questi metodi vengono chiamati quando si fa clic sui rispettivi pulsanti, aggiornando la proprietà contatore dei dati.

Proprietà calcolate: Calcoli intelligenti

Le proprietà calcolate sono come proprietà dati potenziate. Possono eseguire calcoli complessi e sono memorizzate in base alle loro dipendenze. Vediamo un esempio:

<div id="app">
<input v-model="nome">
<input v-model="cognome">
<p>Nome Completo: {{ nomeCompleto }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
nome: '',
cognome: ''
},
computed: {
nomeCompleto() {
return this.nome + ' ' + this.cognome
}
}
})
</script>

Qui, nomeCompleto è una proprietà calcolata che combina nome e cognome. Aggiornarsi automaticamente ogni volta che una delle sue dipendenze cambia.

Riepilogo dei Metodi Vue.js

Ecco una tabella che riassume i metodi Vue.js che abbiamo coperto:

Metodo Descrizione Esempio
data Contiene i dati per l'istanza Vue data: { messaggio: 'Ciao' }
methods Contiene funzioni per aggiungere comportamento methods: { saluta() { alert('Ciao!') } }
computed Proprietà memorizzate che si aggiornano quando le dipendenze cambiano computed: { nomeCompleto() { return this.nome + ' ' + this.cognome } }
el Specifica l'elemento su cui montare l'istanza Vue el: '#app'

Conclusione

Congratulazioni! Hai fatto i tuoi primi passi nel meraviglioso mondo di Vue.js. Abbiamo coperto le basi della creazione di un'istanza Vue, l'uso delle direttive per l'interattività e l'aggiunta di comportamento con metodi e proprietà calcolate.

Ricorda, imparare a codificare è come imparare una nuova lingua - richiede pratica e pazienza. Non scoraggiarti se tutto non ti viene chiaro subito. Continua a sperimentare, a costruire e, soprattutto, a divertirti!

Nella prossima lezione, esploreremo più a fondo i componenti, i mattoni delle grandi applicazioni Vue. Finché allora, felice programmazione!

Credits: Image by storyset

 
Prossimo tutorial:
VueJS - Panoramica