In questa breve guida voglio farti vedere cos’è e come utilizzare Vue.js, o più semplicemente, Vue, per lo sviluppo di applicazioni web (client).
Già dalla presenza del suffisso js è evidente che abbiamo a che fare con qualcosa all’interno del mondo JavaScript.
Ed è proprio così, infatti Vue è un framework Javascript open-source utilizzato per lo sviluppo di applicazioni web. Il framework prevede la creazione di componenti, ovvero delle istanze di Vue che possono essere riutilizzate a seconda delle necessità.
Come utilizzare Vue?
Includere ed utilizzare Vue all'interno dell'applicazione
<script src="https://unpkg.com/vue"></script>Oppure se usiamo npm ci basterà semplicemente digitare il comando:
npm install vueFatto questo siamo pronti per vedere come utilizzare Vue.
Per prima cosa potremmo elaborare un semplice Hello World!
Creare un nuovo componente
Per la creazione del nostro esempio iniziamo con la creazione del componente principale:
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>
Ci basterà inserire il componente nella nostra pagina
<html>
<body>
<div id="app">
{ message }
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>
</body>
</html>Abbiamo così ottenuto un semplice div contentente una stringa. Chiaramente questo è solo l’incipit per l’utilizzo di questo framework, vogliamo ad esempio aggiungere una funzione che ci popoli una lista di stringhe da visualizzare
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app" style="display: grid;">
{{ message }}
<span v-for="mess in messagesList" v-html="mess"></span>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
messagesList: []
},
methods: {
createMessage: function() {
for (var i = 1; i <= 5; i++) {
this.messagesList.push("Message number " + i);
}
}
},
mounted() {
this.createMessage();
}
});
</script>
</body>
</html>
Con queste modifiche il nostro esempio ha finalmente la forma di un componente. Abbiamo data, ovvero la definizione dei dati utilizzati dal componente, nel nostro caso abbiamo message che è una stringa definita già alla creazione dell’elemento, mentre abbiamo messagesList che altro non è che un’array vuoto inizialmente.
Abbiamo anche methods, qui dentro definiremo tutti i metodi che serviranno al componente, nel nostro caso contiene soltanto createMessage, che aggiunge al nostro array, definito precedentemente, una stringa per volta.
Infine abbiamo mounted, anche lui è un metodo che viene eseguito non appena è creato il componente, quindi al caricamento della pagina.
Mentre come vediamo all’interno del div, abbiamo aggiunto un tag span che per ogni valore contenuto in messagesList deve visualizzarlo.
Il risultato del nostro esempio è:
Come primo esempio su come utilizzare Vue credo possa bastare così!
Ti consiglio di visitare la pagina ufficiale di Vue dove troverai tutta la documentazione e anche qualche esempio un pò più articolato, sicuramente tratterremo ancora questo argomento e nelle prossime guide faremo altri esempi su come utilizzare una libreria grafica da associare a Vue.
Ti ringrazio per l’attenzione e spero di esserti stato d’aiuto in qualche modo, per qualsiasi dubbio o informazione ti prego di scrivere un commento!
Alla prossima!
Se hai voglia di imparare qualcos’altro ti consiglio di seguire le altre risorse presenti su lateralecloud.it, ad esempio:
Buona lettura!
No comment yet, add your voice below!