Vue js è un framework JavaScript open source che sta spopolando in rete negli ultimi anni. E’ stato creato da Evan You (ex programmatore in Google) ed è gestito da lui stesso e dal suo core team.

Ha una curva di apprendimento molto più bassa rispetto ad altri framework e librerie come React e Angular e si presta alla progettazione e sviluppo di interfacce web reattive che sfruttano il dual binding tra modello dati e vista.

Come funziona?

Sfrutta il pattern MVVM (Model-View-ViewModel) come altri framework simili, ma ha avuto molto successo nelle app reattive.

Model: rappresenta la modellazione dei dati come nel pattern MVC.

View: rappresenta la vista grafica che viene renderizzata all’utente creata in HTML e CSS.

ViewModel: rappresenta un’aggregazione dei componenti precedenti e fornisce alla View i dati in un formato consono alla vista.

In questo articolo andiamo a realizzare una prima app in Vue che ottiene degli utenti da alcune API in Express e ce li presenta in forma di lista HTML in una view.

Come Installare Vue.js

Innanzitutto bisogna installare Vue.js e per farlo dobbiamo avere installato Node.js che può essere scaricato da questo link (c’é sia per Mac sia per Linux che per Windows).

Occorre tener presente che Vue.js può essere usato in due modi per costruire applicativi: il primo è tramite CDN, cioé può essere importato come una semplice libreria JavaScript; il secondo, che illustreremo in questo articolo, è tramite Vue CLI (Command Line Interface). In questo caso dovremo prima installare la CLI con questo comando:

npm install -g @vue/cli

Una volta conclusa l’installazione di Vue CLI apriamo il terminale, spostiamoci in una directory dove vogliamo creare la nostra app e creiamo il nostro progetto in Vue.js digitando il comando:

vue create progetto-prova

Fatto questo verrà avviato un wizard da terminale che ci guiderà nella creazione del progetto: selezionate l’installazione del router mi raccomando!

Infine nella directory dove eravamo posizionati tramite terminale, ci ritroveremo delle cartelle che conterranno tutti i files di Vue, in particolare le cartelle public ed src. Public è una cartella usata per inserire le risorse publiche, invece in src ci sono tutti i componenti, le routes e le views del nostro applicativo.

A fianco a queste directory ci sono i files App.vue, che è il componente principale dell’app e main.js in cui si istanzia l’oggetto Vue e si inizializza l’applicativo.

I file di Vue hanno estensione .vue perché, tramite tag speciali, in essi vengono racchiusi vari linguaggi differenti (di programmazione e di markup). I file dei singoli linguaggi verranno creati a tempo di compilazione dell’applicativo.

COMPONENT

In questo articolo inizieremo con il definire un component nel file components/Home.vue e con il realizzare una chiamata AJAX in modo da ottenere un JSON e comporre una lista HTML dinamica. Iniziamo con il creare il componente Home.vue all’interno della cartella components in questo modo:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="col-lg-12">
      <ul>
        <li v-for="(user,index) in users" :key="index">{{user.name}} {{user.surname}}</li>
      </ul>
      <button class="btn btn-primary" v-on:click="alert('hi')">Say hi</button>
    </div>
  </div>
</template>

<script>

export default {
  name: "AjaxComponent",
  props: {
    msg: String
  },
  methods: {
    alert : function(message){
      alert(message);
    }
  },
  data (){
    return {
      users: []
    }
    /*
    return {
        users:[{"nome":"Pippo", "cognome":"Disney"},{"nome":"Pluto", "cognome":"Disney"},{"nome":"Pippo", "cognome":"Franco"}]
    }
    */
  },
  beforeCreate(){

  },
  created() {//At this stage DOM has not been mounted or added yet.
    fetch('https://www.jsonplaceholder.com/users/')
      .then(response => response.json())
      .then(json => {
          this.users = json;
      });
  },
  beforeMount(){

  },
  mounted(){//called after the DOM has been mounted or rendered

  },
  beforeUpdate(){

  },
  updated(){

  },
  beforeDestroy(){

  },
  destroyed(){

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

Il component che abbiamo creato è diviso in tre parti:

• la prima è il template in HTML che definisce la struttura visuale del component
• la seconda è il codice JavaScript che definisce la logica dell’applicativo
• la terza è rappresentata dai CSS per formattare l’HTML del component

All’interno dei component di Vue ci sono alcune parole chiave per identificare attributi e alcuni metodi per eseguire delle azioni in un determinato evento del component (che vedremo più avanti).

VIEW

Per richiamare un component in Vue basta inserire il tag con il nome del component all’interno di un file che definisce la view, chiamato ad esempio views/Home.vue:

<template>
  <div class="home">
    <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <HomeComponent msg="Benventi nella mia prima app con Vue" />
          </div>
        </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeComponent from "@/components/Home.vue";

export default {
  name: "Home",
  components: {
    HomeComponent
  }
};
</script>

Notiamo che possiamo passare anche degli attributi all’interno del tag che richiama il component, come in questo caso: abbiamo passato una stringa all’attributo msg del tag che verrà visualizzato tramite l’attributo props nel template del component Home.vue.

ROUTES

Arrivati a questo punto dobbiamo solo creare la route home nel file routes/index.js in modo che quando inseriamo nel browser /home si carichi la view Home.vue e venga eseguito il component Home.vue nel seguente modo:

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

In questo file index.js abbiamo quindi creato una route /home che caricherà la view Home.vue e il component all’interno con il messaggio “Benventi nella mia prima app con Vue” e i dati in JSON presi dall’endpoint inserito. Per compilare l’applicativo e avviare un server di test possiamo eseguire il comando da terminale (posizionandoci nella directory del progetto):

npm run serve

Dopo la compilazione dell’applicazione possiamo aprire la pagina da un browser all’indirizzo http://localhost:8080 (o diversamente a seconda del risultato nel terminale) in modo da visualizzare l’app.

Questo è un ottimo esempio base per iniziare ad operare con Vue: più avanti vedremo come iniziare a creare modelli per i dati, creare form ed eseguire CRUD.