Direttive in Vue.js

Le direttive in Vue.js sono speciali attributi HTML, che iniziano con prefisso v- e che permettono di aggiungere comportamenti a livello di presentazione. Nell'articolo precedente abbiamo ne abbiamo incontrate alcune (v-text, v-html e v-bind), in questo articolo le analizziamo con maggior dettaglio.

Attributi e modificatori

Molte direttive possono accettare argomenti quando il nome non è sufficente per specificare il loro comportamento ma è necessario un attributo in più. Per esempio la direttiva v-bind richiede anche la presenza del nome dell'attributo HTML al quale il valore deve fare riferimento.

Eventuali attributi vengono definiti grazie alla sintassi:

v-{nomedirettiva}:{nomeargomento}

Un secondo esempio è la direttiva v-on che permette di associare una funzione (un comportamento) a un particolare evento generato dall'interfaccia utente. In questo caso l'attributo ci serve per specificare l'evento. Il più classico degli esempi è v-on:click per associare un particolare funzione all'evento click sul nodo corrente.

Oltre agli attributi, possiamo anche modificare il comportamento delle direttive grazie ai modificatori, particolari attributi che agiscono sulla parte funzionale della direttiva.

Per definire un modificatore utilizziamo la sintassi:

v-{nomedirettiva}:{nomeargomento}

Se abbiamo la presenza contemporanea di attributi e modificatori, questi ultimi vanno definiti dopo.

Uno dei modificatori più comodi è senza dubbio prevent che utilizzato insieme a v-on permette di bloccare il comportamento di default del browser quando un particolare evento viene scatenato (stiamo parlando del celeberrimo event.preventDefault()). Per evitare il comportamento del browser in caso di link, possiamo scrivere:

<a href="#" v-on:click.prevent="goToHomepage">

Filtri

Un'altra caratteristica delle direttive sono i filtri, particolari componenti dedicati alla formattazione del testo utilizzabili utilizzando la direttiva v-bind o la mustache syntax.

I filtri sono identificati dal simbolo del pipe (|) e influenzano la visualizzazione del testo precedente. Inoltre è possibile creare filtri dinamici, che accettano parametri. Ecco un esempio chiarificatore:

<div id="vue-app">
  {{firstname|uppercase|limit(3)}}
</div>

var vm = new Vue({
  el: '#vue-app',
  filters: {
    uppercase: function(text) {
      return text.toUpperCase();
    },
    limit: function(text, length) {
      return text.substring(0, length);
    }
  },
  data: {
    firstname: 'Alberto'
  }
})

Scorciatoie (alias)

L'ultimo aspetto interessante delle direttive è rappresentato dalle scorciatoie, ovvero la possibilità di avere degli alias per velocizzare i tempi di scrittura e per migliorare la comprensione del codice.

La direttiva v-bind:attributo può essere sostituita da :attributo e v-on:click da @click:

<div v-bind:id="customId"></div>

equivale a

<div :id="customId"></div>

e

<div v-on:click="changePage"></div>

equivale a

<div @click="changePage"></div>