VueJS - Istanze

Ciao a tutti, futuri sviluppatori web! Oggi esploreremo il meraviglioso mondo delle istanze Vue.js. Non preoccupatevi se siete nuovi alla programmazione - vi guiderò passo dopo passo, proprio come ho fatto per centinaia di studenti durante gli anni della mia insegnanza. Allora, prendete una tazza di caffè (o tè, se è più il vostro thing), e iniziamo!

VueJS - Instances

Cos'è un'istanza Vue?

Prima di immergerci nel codice, cerchiamo di capire cos'è un'istanza Vue. Immaginate di costruire una casa. L'istanza Vue è come il fondamento di quella casa - è da dove tutto inizia. È il nucleo che controlla l'intera applicazione Vue.

Sintassi

Creare un'istanza Vue è abbastanza semplice. Ecco la sintassi di base:

new Vue({
// opzioni
})

È così facile! Usiamo la parola chiave new seguita da Vue(), e all'interno delle parentesi, passiamo un oggetto con varie opzioni. Queste opzioni sono come i piani della nostra casa - dicono a Vue come vogliamo che il nostro applicazione si comporti.

La vostra prima istanza Vue

Creiamo insieme la nostra prima istanza Vue. Non preoccupatevi se non capite tutto subito - analizzeremo tutto pezzo per pezzo.

Esempio 1

<!DOCTYPE html>
<html>
<head>
<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">
{{ message }}
</div>

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

Output

Ciao, Vue!

Ora, analizziamo questo:

Includiamo la libreria Vue.js nel nostro file HTML.
Creiamo un <div> con un id di "app". Questo è dove vivrà la nostra applicazione Vue.
Dentro il <div>, usiamo {{ message }}. Questo è chiamato interpolazione - è il modo in cui mostriamo i dati in Vue.
Nel nostro tag <script>, creiamo una nuova istanza Vue.
Usiamo el: '#app' per dire a Vue quale elemento dovrebbe controllare (il nostro div con id "app").
Nell'oggetto data, definiamo una proprietà message con il valore 'Ciao, Vue!'.

Quando Vue vede {{ message }} nel nostro HTML, lo sostituisce con il valore della proprietà message dal nostro data. Magia, vero?

Dati e Metodi

Le istanze Vue possono avere più di solo dati. Possono anche avere metodi - funzioni che possono eseguire azioni o calcoli.

Esempio 2

<!DOCTYPE html>
<html>
<head>
<title>Esempio di metodi Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Inverti messaggio</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Ciao, Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

Output

Inizialmente, vedrete "Ciao, Vue!" e un pulsante. Quando cliccate il pulsante, il messaggio si invertirà in "!euV ,olleH".

In questo esempio:

Abbiamo aggiunto un pulsante con v-on:click="reverseMessage". Questo dice a Vue di chiamare il metodo reverseMessage quando il pulsante viene cliccato.
Nella nostra istanza Vue, abbiamo aggiunto un oggetto methods con una funzione reverseMessage.
La funzione divide il messaggio in un array di caratteri, lo inverte e lo riunisce in una stringa.
Usiamo this.message per accedere e modificare la proprietà message del data.

Hook di Ciclo di Vita

Le istanze Vue hanno un ciclo di vita - vengono create, montate nel DOM, aggiornate e alla fine distrutte. Vue fornisce hook che permettono di eseguire codice in specifiche fasi di questo ciclo.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Hook di ciclo di vita Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Ciao, Vue!'
},
created: function() {
console.log('Istanza Vue creata!')
},
mounted: function() {
console.log('Istanza Vue montata nel DOM!')
this.message = 'Benvenuto in Vue!'
}
})
</script>
</body>
</html>

Output

Nel browser, vedrete "Benvenuto in Vue!". Nella console, vedrete due messaggi:

Istanza Vue creata!
Istanza Vue montata nel DOM!

Ecco cosa sta succedendo:

L'hook created viene eseguito quando l'istanza Vue viene creata. Stiamo registrando un messaggio nella console.
L'hook mounted viene eseguito quando l'istanza Vue viene montata nel DOM. Stiamo registrando un altro messaggio e modificando la proprietà message del data.

Questi hook sono estremamente utili per eseguire codice in punti specifici del ciclo di vita della vostra applicazione.

Proprietà e Metodi delle Istanze Vue

Le istanze Vue vengono fornite con proprietà e metodi integrati. Esploriamo alcuni di essi:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Proprietà e metodi delle istanze Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="updateMessage">Aggiorna messaggio</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Ciao, Vue!'
},
methods: {
updateMessage: function() {
this.$data.message = 'Messaggio aggiornato!'
console.log(this.$el)
this.$nextTick(function() {
console.log('DOM aggiornato!')
})
}
}
})

console.log(app.$data)
</script>
</body>
</html>

In questo esempio:

Usiamo this.$data per accedere direttamente all'oggetto data.
Usiamo this.$el per registrare l'elemento DOM radice dell'istanza Vue.
Usiamo this.$nextTick per eseguire una funzione dopo che il DOM è stato aggiornato.
Fuori dall'istanza Vue, possiamo accedere alle sue proprietà usando app.$data.

Ecco una tabella di alcune proprietà e metodi delle istanze Vue comunemente utilizzati:

Proprietà/Metodo	Descrizione
$data	L'oggetto data che l'istanza Vue sta osservando
$el	L'elemento che l'istanza Vue sta gestendo
$watch	Osserva una proprietà dell'istanza Vue per změ
$set	Imposta una proprietà su un oggetto, attivando gli aggiornamenti della vista
$nextTick	Posticipa l'esecuzione del callback al ciclo di aggiornamento DOM successivo

Ricordate, questi sono solo alcuni esempi. Vue.js ha molte altre funzionalità e capacità che esploreremo nelle lezioni future.

Spero che questa introduzione alle istanze Vue vi sia stata utile! Ricordate, imparare a codificare è come imparare una nuova lingua - richiede tempo e pratica. Non demordetevi se non capite tutto subito. Continuate a sperimentare, continuate a programmare e, soprattutto, continuate a divertirvi! Ci vediamo nella prossima lezione!

Credits: Image by storyset