new Vue({
    el: '#app',
    template: ''
})

Vue.component('todo-app', {
    template: `
        
 
            
 
                
 Todo App 
 
            
 
             
            
 
             
        
    `,
    data: function() {
        return {
            todos: []
        }
    },
    methods: {
        addTodo: function(todo) {
            this.todos.push(todo)
        },
        deleteTodo: function(index) {
            this.todos.splice(index, 1)
        }
    }
})

Vue.component('custom-component', {
    data() { 
      return { 
        message: 'Hello World!' 
      } 
    },
    template: '
 {{ message }} 
'
})

Vue.component('custom-component', {
    data() { 
      return { 
        message: 'Hello World!' 
      } 
    },
    template: `
        

          {{ message }}
        
    `,
})

Vue.component('custom-component', {
    data() { 
      return { 
        message: 'Hello World!' 
      } 
    },
    template: '#custom-component-template'
})

disaccoppiamento tra logica e template in file differenti, il primo in un file .js e l’altro nel file .html principale.

render

Vue.component('custom-component', {
  data() { 
    return { 
      message: 'Hello World!' 
    } 
  }
  render(h) {
    return h('div', this.message) 
  }
})

intera definizione del template mediante codice Javascript.

JSX 

Vue.component('custom-component', {
  data() {
    return {
      message: 'Hello World!'
    }
  }
  render(h) {
    return (
 { this.message } 
)
  }
})

sintassi cara a chi proviene dal mondo React.

Single File Component

export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}

la più utilizzata e si compone di un file con estensione .vue (richiede un tool di transpiling) nel quale si dichiara il proprio markup all’interno del tag template, la logica all’interno del tag script e opzionalmente il proprio stile all’interno del tag style.

Tornando al nostro componente noterete la sintassi :[nome_attributo] che è una scorciatoia di v-bind:[nome_attributo] che serve a fare il binding tra un attributo di un tag o una prop di un componente figlio con una variabile dello stato del componente; discorso analogo per @[nome_evento] che è una una scorciatoia di v-on:[nome_evento] atto a fare il binding tra un evento e un’azione (metodo) del componente.

Ogni cambiamento di stato provocherà un aggiornamento nel ciclo render delle parti interessate dell’applicazione in maniera automatica e trasparente.

Del concetto di props e nello specifico di :todos ne parleremo più avanti.

Vue.component('todo-form', {
    template: `
        

Il componente todo-form ha il compito di mostrare il form per l’inserimento del Todo e notificarlo al componente padre in ascolto mediante l’evento add.

Qui possiamo notare come viene implementato il two-way binding tra il componente input e una variabile dello stato del componente; mediante la direttiva v-model tutti i cambiamenti dal componente input vengono sincronizzati con la variabile in tempo reale e viceversa.

Nota su questa importante direttiva:

questa è la forma equivalente di ciò che effettivamente accade ovvero l’aggiornamento avviene tramite l’ascolto dell’evento input che va ad aggiornare la variabile che a sua volta è associata all’attributo value dell’input.

Detto questo, è possibile avere un binding ritardato mediante direttiva v-model.lazy (.lazy è un esempio di quello che viene chiamato modifier, ve ne sono già  definiti alcuni nativamente  e possono essere applicati a direttive, props e eventi) che, per analogia come detto sopra, vede nella sua forma equivalente:

Faccio questa premessa perché i propri componenti custom (immaginate di dover fare un componente che fa da wrapper a un input o di realizzare componente di input non nativo) possono utilizzare la direttiva v-model ma eventuali modifier non possono essere applicati e quindi è bene tenere a mente la forma equivalente per realizzare un binding lazy. Nota: $event.target.value si riferisce al fatto che il binding è stato fatto su eventi input/change nativi ma per un proprio componente custom l’emissione di questi eventi è a carico dello sviluppatore e quindi potrà passare qualsiasi valore (coerentemente con il type del proprio v-model).

Vue.component('todo-list', {
    template: `
        

Il componente todo-list ha il compito di mostrare l’elenco dei Todo e notificare al componente padre quando viene finalizzato mediante evento done. Per realizzare tutto ciò, viene utilizzato il concetto di props ovvero il modo di passare un dato da un componente padre a un componente figlio; una singola prop oltre che dal nome può essere descritta dal vincolo di obbligatorietà (required), da un valore di default e da una funzione di validazione.

E’ importante sapere che di norma non è possibile modificare il valore di una prop dal componente figlio ma è tuttavia in alcuni casi utile che il componente padre possa ricevere in tempo reale eventuali aggiornamenti su una prop passata al figlio e nello specifico è possibile nel seguente modo:

this.$emit('update:nomeProp', valoreProp)

il figlio emette un evento che inizia per update:

e il padre riceve gli aggiornamenti nella variabile associata alla prop mediante il modifier sync.

Da notare anche @click.prevent (discorso analogo anche per il componente todo-form per l’evento @submit.prevent) che associa il metodo done ma prima di eseguirlo, in modo trasparente, effettua la funzione prevent dell’evento stesso; la sua forma equivalente e comunque utilizzabile sarebbe:

 Done 

Ovviamente i componenti sono una caratteristica, in generale e di Vue, molto importante ma per onor di cronaca tutto l’esempio poteva essere realizzato all’interno della index con stato e azioni gestiti dall’istanza Vue e il template HTML dei vari componenti all’interno del div wrapper.

Vue.js Todo App

Conclusioni

Questo post ha lo scopo di dimostrare quanto possa essere intuitivo e immediato iniziare a lavorare con Vue senza considerare che non sono stati utilizzati e menzionati concetti, quali computed property, watch,  ecc, che possono risultare importanti nella costruzione di applicazioni con complessità maggiore.

Come per altri competitor, come React, si parla di libreria e non di framework anche se a contorno sono nate altre librerie/plugin ufficiali e non, per una migliore gestione di un’intera applicazione quali vue-router (per il route di un’applicazione), vuex (gestione centralizzata dello stato) ecc.

A conferma di quanto detto in fase di introduzione, ovvero il sempre più interesse della community, vi segnala questo link che contiene un riepilogo di qualsiasi cosa che gira attorno a Vue.

Nel prossimo post introdurremo concetti più avanzati e utilizzeremo vue-cli per la creazione di un progetto e nello specifico configurato con template webpack.

Potete trovare il sorgente di questa applicazione su questo repository GitHub.