Template e data binding

Vue utilizza un sistema di template basato su HTML e su particolari attributi (chiamati direttive) che permettono di definire il comportamento del layer di presentazione. Il framework è in grado di interpretare il template e di compilarlo in un Virtual DOM che permette a Vue non solo di offrire reattività dei contenuti, ma anche di effettuare cambiamenti alla pagina (attività particolarmente onerose da un punto di vista computazionale) solo se davvero necessari, evitando quindi sprechi di risorse e di tempo.

Una delle funzionalità più interessanti di Vue è il cosiddetto data-binding, ovvero la possibilità di associare un elemento presentazionale con una particolare variabile o oggetto Javascript e di essere certi che eventuali cambiamenti vengano propagati alla view esclusivamente agendo sulla variabile. In questo articolo analizziamo le principali modalità di data-binding offerte da Vue e alcune direttive.

Interpolation di testi

L'interpolazione è la tipologia di data-binding più semplice che è possibile realizzare: data una variabile contenente un testo, è possibile visualizzare il testo all'interno di un particolare nodo HTML. Il binding è effettuato tramite la cosiddetta Mustache Syntax, ovvero utilizzando le doppie parentesi graffe ({{...}}):

<div id="vue-app">
  My firstname is {{firstname}} and my lastname is {{lastname}}
</div>

var vm = new Vue({
  el: '#vue-app',
  data: {
    firstname: 'Alberto',
    lastname: 'Bottarini'
  }
})

La sintassi "coi baffi" può essere sostituita dalla direttiva v-text con la differenza che quest'ultima modalità ci obbliga a creare un nodo HTML per ospitare il nostro testo:

<div id="vue-app">
  My firstname is <span v-text="firstname"></span"> and my lastname is <span v-text="lastname"></span">
</div>

Interpolazione di HTML raw

In automatico Vue, quando deve mostrare un testo, effettua l'escape di eventuali caratteri HTML (in primis i caratteri > e <) per evitare possibili corruzioni della pagina o attacchi XSS.

Quando fosse necessario mostrare tag HTML in modo dinamico, è possibile utilizzare la direttiva v-html esattamente come abbiamo prima utilizzato v-text:

<div id="vue-app">
  My firstname is <span v-html="firstname"></span"> and my lastname is <span v-html="lastname"></span">
</div>

var vm = new Vue({
  el: '#vue-app',
  data: {
    firstname: '<b>Alberto</b>',
    lastname: '<i>Bottarini<i>'
  }
})

Attributi HTML

Vue permette di effettuare il dual-binding anche per attributi HTML grazie alla direttiva v-bind e il nome dell'attributo come argomento della direttiva:

<div id="vue-app">
  <button v-bind:disabled="button1Disabled">
    Button 1
  </button>
  <button v-bind:disabled="button2Disabled">
    Button 2
  </button>
</div>

var vm = new Vue({
  el: '#vue-app',
  data: {
    button1Disabled: true,
    button2Disabled: false
  }
})

In questo esempio lo stato di un bottone (disabilitato o meno), è controllato, tramite l'attributo disabled, da due booleani dati in gestione a Vue.