Dopo aver analizzato i punti di forza di VueJS, scopriamone il funzionamento costruendo un quickstart avvalendoci di vue-cli. A partire da questo articolo, cercheremo di arrivare a costruire un qualcosa di sempre più complesso.
Vue-cli
Come prima cosa dobbiamo installare vue-cli. Per far questo, necessitiamo di npm e quindi NodeJs installato sul nostro sistema. Per installare vue-cli globalmente sul nostro PC dobbiamo lanciare da console il comando npm install -g vue-cli.
Al termine dell’installazione, avremo disponibile il comando vue, che useremo per creare il nostro progetto in questo modo vue init webpack nome-progetto.
Partirà quindi una procedura che ci guiderà alla creazione del progetto vue. L’esecuzione del comando farà apparire alcune domande sul terminale: puoi rispondere prendendo spunto dal seguente screenshot:
Una volta creato il progetto sarà necessario spostarsi all’interno della root tramite cd nome-progetto e lanciare il comando npm install per installare tutte le dipendenze.
Al termine dell’installazione dei pacchetti sarà possibile lanciare il comando npm run dev. A processo andato a buon fine, scrivendo nell’URL del nostro browser l’indirizzo localhost:8080, dovremmo constatare che l’app funzioni.
Esaminiamo il progetto
Possiamo vedere tramite questo screenshot la struttura del nostro progetto:
Andiamo a esaminare le parti di maggior importanza.
Il package.json contiene tutte le dipendenze installate tramite npm install, queste si trovano dentro la cartella node_modules.
Il file index.html è il punto di partenza della nostra applicazione e contiene il seguente codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-quickstart</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Notiamo che il tag div dentro il body ha un attributo id, che verrà usato per identificare il contenitore dell’output generato da vue.
Ora diamo un’occhiata al file main.js che è il punto in cui viene inizializzata l’app.
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
Vengono importate tre dichiarazioni, “Vue” è la classe principale della libreria, “App” è il componente di partenza della nostra applicazione e “router” è il componente che si occupate di mappare le “rotte” della web app.
Viene anche creata un’istanza della classe principale “Vue”, la quale contiene 4 parametri.
el: '#app' definisce il punto di partenza dell’applicazione, che si trova come abbiamo già visto in index.html.
router vengono passate al framework le routes che analizzeremo a breve.
template: '<App/>' contiene il codice HTML che deve essere usato per generare l’output dell’applicazione.
components: { App } lista dei componenti usati nel template.
Componenti
Analizziamo il componente che abbiamo dichiarato nel file main.ts. Dirigiamoci in src e apriamo il file App.vue. Questo è quello che vediamo:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Possiamo notare subito la separazione tra HTML che si trova all’interno il tag template, JavaScript dentro script e CSS in style. Lo script da in output il template che verrà renderizzato dal browser. Notiamo anche il tag router-view, che è la parte che si occuperà di renderizzare le nostre route.
Routing
Spostiamoci su src/router e apriamo il file index.js.
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
In questo file vengono definite tutte le “rotte” della nostra applicazione.
Ora possiamo notare l’importazione del componente “vue-router”, che ci offre le opzioni per poter gestire il routing della web app e in seguito vengono importati tutti i componenti che hanno bisogno di una route.
Una “rotta” viene definita assegnando all’array routes un oggetto, contenente le proprietà path, name e component.
path viene usato per definire la route.
name bisogna inserire il nome del componente.
component bisogna definire il componente che deve anche essere importato.
Direttiva standard
Per dare un esempio delle direttive standard di Vue, usiamo il componente “HelloWorld” creato da vue-cli. Nella directory src/components troviamo il file HelloWorld.vue che contiene il nostro componente. Cambiamo il contenuto del file con il seguente:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Nazioni</h2>
<ul>
<li v-for="country in countries">{{ country.name }}</li>
</ul>
<div>
<input type="text" v-model="text">
</div>
<b>two-way data binding:</b> <span v-text="text"></span>
<button v-on:click="clearMessage">Pulisci testo</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
countries: [
{name: 'Italia'},
{name: 'Inghilterra'},
{name: 'Spagna'}
],
text: ''
}
},
methods: {
clearMessage: function () {
if (this.text !== '') {
this.text = ''
} else {
alert('nessun testo da cancellare')
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Possiamo notare che nel template del componente abbiamo utilizzato quattro direttive: v-for, v-model, v-text e v-on:click.
v-for
Da la possibilità di renderizzare un elemento più volte, in base al modello dei dati che gli viene passato. Possiamo usare questa direttiva per iterare un array e visualizzarne i dati.
Nel nostro caso iteriamo un array contenente i nomi delle nazioni e ne stampiamo il nome.
v-model
Questa direttiva da la possibilità di utilizzare il two-way data binding. Nel nostro esempio stiamo associando il contenuto dell’input al valore text.
Tramite questa tecnica, ogni volta che l’input viene aggiornato, di conseguenza il valore text si aggiorna. Anche se il valore text viene cambiato dal nostro programma, verrà aggiornato l’elemento lato visualizzazione.
v-text
Agisce come la sintassi “{{ valore }}”, serve per visualizzare un valore di testo. Nel nostro caso lo utilizziamo per visualizzare il valore scritto nell’input, così da notare l’effetto della direttiva v-model.
v-on:click
Serve per far scatenare un metodo al click sull’elemento del DOM. Nel nostro esempio, al click sul bottone “pulisci testo”, scateniamo il metodo clearMessage, che cancellerà il testo scritto dall’input e nel caso il campo sarà vuoto farà uscire un alert.
Abbiamo creato un punto di partenza per una qualsiasi web app. Se siete interessati ad approfondire l’argomento, continuate a seguire le prossime pubblicazioni, nelle quali ci caleremo sempre di più in Vue.
