Primi passi con Vuejs

Primi passi con Vuejs

Vuejs si è affermato nel corso del 2018 come uno dei framework più utilizzati, complice anche l’implementazione default all’interno del framework laravel.

Analizziamo preliminarmente quali sono le percentuali di utilizzo di vuejs rispetto ai concorrenti principali angular e react.

fonte: trends.builtwith.com

Come vedete angular ha avuto durante il periodo 2017-2018 una salita – stabilizzazione e un piccolo incremento.

fonte: trends.builtwith.com

React rimane sicuramente il framework più utilizzato, complice anche l’effettiva curva di apprendimento più lineare rispetto ad Angular (più completo ma molto più complesso). Tuttavia come vedete ha avuto un picco negativo nell’ultima parte del 2018.

fonte: trends.builtwith.com

Se react perde utilizzatori Vuejs ha subito un picco costante verso l’alto in costante incremento che lo porta a essere nel podio dei framework più utilizzati attualmente.

Rispetto ai concorrenti vuejs ha diversi vantaggi che possono apparire chiari anche ai neofiti.

Il primo vantaggio è sicuramente la curva di apprendimento che come nel caso di react è molto veloce.

La documentazione è ben scritta, con tanti esempi e approfondimenti utili.

Non richiede per forza (anche se è consigliato) l’utilizzo di webpack o similari per l’installazione della libreria ma può essere semplicemente embeddato nel progetto tramite semplice script js.

Tramite vue Route è possibile integrare facilmente anche il routing (similarmente a Redux e Angular). Rispetto alle controparti però il routing è dannatamente veloce e semplice da implementare.

Installazione di Vuejs

Per installare e inziare con vuejs vi basterà includere nella pagina un semplice codice js:

<!-- versione per lo sviluppo con console.log dei warning -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- in caso di progetto in produzione-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Ovviamente esiste anche la possibilità di usare npm o vue-cli da riga di comando per avere maggiore controllo e funzionalità aggiuntive.

Primi passi con Vuejs

Una volta aggiunto lo script andiamo a vedere come funziona vuejs nel dettaglio.

Per prima cosa andremo a capire come creare una semplice istanza, e stampare in console il valore di un valore che abbiamo passato dentro vue.

<div id="app"></div>
<script>
// Oggetto data
var data = { a: "Ciao", b:"Come va", c:"Bene" }

// Vue 
var vm = new Vue({
  el: "#app", // dico all'instaza a quale elemento html della pagina fare riferimento
  data: data, // valori dell'oggetto data
  created: function () {
    console.log('Istanza di vue creata')
    // `this` accede all'instanza di vuejs
    console.log('Valore di a: ' + this.data.a)// stampa "ciao" in console
  }
})//Vue
</script>

Nell’esempio qui sotto andremo invece a nascondere dei blocchi in modo condizionale e usare i dati precedentemente inseriti. Andremo poi a vedere una breve introduzione ai metodi e a semplice interazione come un evento al click su un oggetto.

<div id="app">
<button v-on:click="test"></button>
<div v-if="isActive">NASCOSTO FINO A CHE isActive = false</div>

<div class="info">{{ info }}</div>
<!-- nota se usate laravel o un template system lato backend mettete la @ davanti alle graffe di apertura -->
</div><!-- #app -->


<script>
var vm = new Vue({
  el: "#app", // dico all'instaza a quale elemento html della pagina fare riferimento
  data() {
    return {
      info: null,
      isActive:false
    }
  },
  created: function () {
    console.log('Istanza di vue creata')
    // in questo esempio popolo "info" alla creazione dell'istanza
   this.info = "Viva Targetweb";

  },
methods: {
   test () {
     console.log("Hai cliccato su test.");
     //In questo esempio al click setto la variabile isActive su true per far apparire il blocco nascosto.
    this.isActive = true; // il blocco apparirà al click

   }
}
})//Vue
</script>

Se volessimo agire in modo dinamico su un elemento html come le classi? In questo caso possiamo agire su qualsiasi classe o tag html con il metodo v-bind. V-bind permette di triggerare o meno – ad esempio- una determinata classe in base a quello che succederà nella logica dell’instanza Vuejs.

Ecco un esempio:

<div class="hidden" v-bind:class="{ active: isActive }" >

In questo esempio se il valore della variabile vuejs isActive è true verrà aggiunta la classe “.active” al box. Se il valore di isActive è false o null quella classe non verrà aggiunta.

Vuejs – ciclare un array di dati con v-for

Nei primi passi non poteva mancare qualche informazione di base per renderizzare su html il contenuto di un array recuperato dentro l’istanza di Vuejs. Qui sotto un comodo esempio dell’utilizzo della funzionalità v-for di vueJS:

var testfor = new Vue({
  el: '#testfor',
  data: {
    data: [
      { titolo: 'Riccardo' },
      { titolo: 'Mel' }
    ]
  }
})
<ul id="testfor">
<!-- per ciascun elemento (item) dentro l'array da ciclare (data) -->
  <li v-for="item in data">
    {{ item.titolo }}
  </li>
</ul>

<!--Result: Riccardo Mel -->

Come vedete è tutto molto lineare e veloce. Ovviamente nel caso aveste più di un indice dentro l’array oltre a titolo potrete comunque accedervi senza problemi item.NOMEINDICE.

Introduzione al workflow di una istanza Vuejs

Quando ho iniziato ad approcciarmi a Vuejs quello che molti tutorial non fornivano era una panoramica sui vari STATI in cui entra un’instanza Vuejs per il render. Conoscere questi stati ci aprirà un vero e proprio mondo in quanto potremo facilmente manipolare dati o effettuare azioni in tutti i vari step di mounting dell’instanza.

Gli stati principali (ne esistono molti) per chi inizia sono:

  • beforeCreate() : funzione triggerata prima che venga creata l’istanza.
  • created() : funzione triggerata a istanza creata con successo
  • beforeMount() : funzione triggerata prima che vengano “montati” i dati della stessa istanza
  • mounted() : funzione triggerata a dati caricati con successo
  • beforeUpdate() : funzione triggerata quando un elemento o props passata nell’istanza viene cambiata di stato.
  • updated() : funzione triggerata quando l’aggiornamento è andato a buon fine.

Come ben capirete questo vi permette di agire su tutto il lifecycle della vostra istanza in modo piuttosto comodo.

Conclusioni

Ovviamente questa guida si pone l’obbiettivo di dare solamente un’infarinatura generale, data la vastità dell’argomento trattato.

Non abbiamo ancora, ad esempio, toccato articoli fondamentali come il model, componenti, gestione elementi di un form e interazioni avanzate, o più banalmente le chiamate asincrone o il routing.

Spero che questa guida introduttiva vi sia piaciuta, lasciate un commento o un like qui sotto per farmi sapere se vi potrebbe interessare addentravi maggiormente nell’universo di Vuejs con altre guide dedicate.

A questo indirizzo potete trovare tutti gli articoli relativi a Vuejs: guida vuejs italiano

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.