VueJS - Template: A Beginner's Guide

Ciao lì, futuro supereroe di Vue.js! Sono entusiasta di essere il tuo guida in questo emozionante viaggio nel mondo delle template di Vue.js. Come qualcuno che ha insegnato scienze informatiche per anni, posso assicurarti che Vue.js è uno dei framework più facili da usare per i principianti. Allora, metti la cintura e tuffiamoci!

Cos'è una Template Vue.js?

Prima di iniziare a programmare, capiremo cos'è una template in Vue.js. Pensa a essa come lo scheletro della tua pagina web - è dove definisci la struttura del tuo HTML e aggiungi un po' di magia Vue.js per renderla dinamica e interattiva.

Struttura di Base

Ecco una semplice template Vue.js:

<div id="app">
{{ message }}
</div>

In questo esempio, {{ message }} è una sintassi speciale in Vue.js chiamata "interpolazione". È come un segnaposto che Vue.js sostituirà con dati reali.

Vediamo come funziona:

<div id="app">
{{ message }}
</div>

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

Quando esegui questo codice, vedrai "Ciao, Vue!" visualizzato sulla tua pagina. Magia, vero? La {{ message }} nella template è sostituita dal valore di message nell'istanza Vue dei dati.

Direttive: Istruzioni Speciali di Vue

Ora, parliamo delle direttive. Queste sono attributi speciali che iniziano con v- e danno istruzioni a Vue.js su come comportarsi. Sono come piccoli maghi che lanciano incantesimi sul tuo HTML!

v-bind: Attributi Dinamici

La direttiva v-bind viene utilizzata per legare dinamicamente un attributo a un'espressione. È così comune che c'è anche una scorciatoia per essa: :.

<div id="app">
<a v-bind:href="url">Clicca qui!</a>
<!-- Scorciatoia -->
<a :href="url">Clicca qui!</a>
</div>

<script>
new Vue({
el: '#app',
data: {
url: 'https://vuejs.org/'
}
})
</script>

In questo esempio, l'attributo href del tag <a> è impostato dinamicamente sul valore di url nei dati dell'istanza Vue.

v-if, v-else-if, v-else: Renderizzazione Condizionale

Queste direttive ti permettono di rendere elementi in modo condizionale in base alla verità dell'espressione.

<div id="app">
<p v-if="seen">Ora mi vedi</p>
<p v-else>Ora non mi vedi</p>
</div>

<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>

Prova a cambiare seen in false e guarda la magia accadere!

v-for: Renderizzazione di Elenco

La direttiva v-for viene utilizzata per rendere un elenco di elementi basato su un array.

<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Impara JavaScript' },
{ text: 'Impara Vue' },
{ text: 'Crea qualcosa di fantastico' }
]
}
})
</script>

Questo renderizzerà un elenco di todo. Ogni elemento <li> è creato per ogni voce nell'array todos.

Gestione degli Eventi con v-on

La direttiva v-on viene utilizzata per ascoltare eventi DOM e eseguire un po' di JavaScript quando vengono attivati. È così utile che ha anche una scorciatoia: @.

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Inverti Messaggio</button>
<!-- Scorciatoia -->
<button @click="reverseMessage">Inverti Messaggio</button>
</div>

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

Clicca il pulsante e guarda il tuo messaggio fare una capriola!

Bindings Bidirezionali con v-model

La direttiva v-model crea un binding bidirezionale sugli elementi di input del modulo o sui componenti.

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

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

Digita nel campo di input e guarda il messaggio aggiornarsi in tempo reale. È come magia, ma meglio - è Vue.js!

Proprietà Calcolate e Watchers

Proprietà Calcolate

Le proprietà calcolate sono come proprietà superpotenti. Sono proprietà che vengono calcolate in base ad altre proprietà.

<div id="app">
<p>Messaggio originale: "{{ message }}"</p>
<p>Messaggio invertito calcolato: "{{ reversedMessage }}"</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Ciao'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>

La proprietà reversedMessage sarà sempre l'inverso di message, e si aggiorna automaticamente quando message cambia!

Watchers

I watchers sono come guardiani vigilanti per i tuoi dati. Vigilano sui cambiamenti nei dati e eseguono azioni quando quei cambiamenti avvengono.

<div id="app">
<p>
Fai una domanda sì/no:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
question: '',
answer: 'Le domande di solito contengono un punto interrogativo. ;-)'
},
watch: {
question: function (newQuestion, oldQuestion) {
this.answer = 'Aspettando che smetti di scrivere...'
this.debouncedGetAnswer()
}
},
created: function () {
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Le domande di solito contengono un punto interrogativo. ;-)'
return
}
this.answer = 'Riflettendo...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Errore! Impossibile raggiungere l\'API. ' + error
})
}
}
})
</script>

In questo esempio, stiamo osservando la proprietà question. Quando cambia, aggiorniamo answer e chiamiamo un metodo per ottenere una nuova risposta da un'API.

Tabella dei Metodi

Ecco una tabella che riassume i metodi che abbiamo coperto:

Metodo	Descrizione	Esempio
v-bind	Legare dinamicamente attributi	<a v-bind:href="url">
v-if	Renderizzazione condizionale	<p v-if="seen">Ora mi vedi</p>
v-for	Renderizzazione di elenco	<li v-for="item in items">{{ item }}</li>
v-on	Gestione degli eventi	<button v-on:click="doSomething">
v-model	Bindings bidirezionali	<input v-model="message">

Ecco fatti! Hai appena fatto i tuoi primi passi nel meraviglioso mondo delle template Vue.js. Ricorda, la pratica fa la perfezione, quindi non aver paura di sperimentare con questi concetti. Prima di sapere, sarai in grado di costruire fantastiche applicazioni Vue.js. Buon coding!

Credits: Image by storyset