Vue.js
Direttive personalizzate

Sintassi

• Vue.directive(id, definition);
• Vue.directive(id, update); //when you need only the update function.

Parametri

Nozioni di base

Oltre al set predefinito di direttive fornite in core, Vue.js ti consente anche di registrare le direttive personalizzate. Le direttive personalizzate forniscono un meccanismo per mappare le modifiche dei dati al comportamento DOM arbitrario.

È possibile registrare una direttiva personalizzata globale con il Vue.directive(id, definition) , passando un id direttiva seguito da un oggetto definizione. È inoltre possibile registrare una direttiva personalizzata locale includendola nell'opzione delle directives un componente.

Funzioni di aggancio

• bind : chiamato una sola volta, quando la direttiva viene prima associata all'elemento.
• aggiornamento : chiamato per la prima volta immediatamente dopo il bind con il valore iniziale, quindi di nuovo ogni volta che cambia il valore di bind . Il nuovo valore e il valore precedente vengono forniti come argomento.
• unbind : chiamato solo una volta, quando la direttiva non è associata all'elemento.

Vue.directive('my-directive', {
     bind: function () {
       // do preparation work
       // e.g. add event listeners or expensive stuff
       // that needs to be run only once
     },
     update: function (newValue, oldValue) {
       // do something based on the updated value
       // this will also be called for the initial value
     },
     unbind: function () {
       // do clean up work
       // e.g. remove event listeners added in bind()
     }    
})

Una volta registrato, puoi usarlo nei template Vue.js come questo (ricorda di aggiungere il prefisso v- ):

<div v-my-directive="someValue"></div>

Quando hai solo bisogno della funzione di update , puoi passare una singola funzione invece dell'oggetto di definizione:

Vue.directive('my-directive', function (value) {
  // this function will be used as update()
})

Proprietà istanza direttiva

Tutte le funzioni hook verranno copiati nell'oggetto direttiva attuale, che è possibile accedere all'interno di queste funzioni come loro this contesto. L'oggetto direttiva espone alcune proprietà utili:

• el : l'elemento a cui è vincolata la direttiva.
• vm : il contesto ViewModel che possiede questa direttiva.
• espressione : l'espressione del bind, escludendo argomenti e filtri.
• arg : l'argomento, se presente.
• nome : il nome della direttiva, senza il prefisso.
• modificatori : un oggetto contenente modificatori, se presenti.
• descrittore : un oggetto che contiene il risultato di analisi dell'intera direttiva.
• params: un oggetto contenente attributi param. Spiegato di seguito.

È necessario trattare tutte queste proprietà come di sola lettura e non modificarle mai. È possibile allegare anche proprietà personalizzate all'oggetto direttivo, ma attenzione a non sovrascrivere accidentalmente quelle interne esistenti.

Un esempio di una direttiva personalizzata che utilizza alcune di queste proprietà:

HTML

<div id="demo" v-demo:hello.a.b="msg"></div>

JavaScript

Vue.directive('demo', {
  bind: function () {
    console.log('demo bound!')
  },
  update: function (value) {
    this.el.innerHTML =
      'name - '       + this.name + '<br>' +
      'expression - ' + this.expression + '<br>' +
      'argument - '   + this.arg + '<br>' +
      'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
      'value - '      + value
  }
})
var demo = new Vue({
  el: '#demo',
  data: {
    msg: 'hello!'
  }
})

Risultato

name - demo
expression - msg
argument - hello
modifiers - {"b":true,"a":true}
value - hello!

Oggetto letterale

Se la tua direttiva ha bisogno di più valori, puoi anche passare un valore letterale dell'oggetto JavaScript. Ricorda che le direttive possono assumere qualsiasi espressione JavaScript valida:

HTML

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

JavaScript

Vue.directive('demo', function (value) {
  console.log(value.color) // "white"
  console.log(value.text) // "hello!"
})

Modificatore letterale

Quando una direttiva viene utilizzata con il modificatore letterale, il suo valore di attributo verrà interpretato come una stringa semplice e trasmesso direttamente nel metodo di update . Il metodo di update sarà anche chiamato una sola volta, perché una stringa semplice non può essere reattiva.

HTML

<div v-demo.literal="foo bar baz">

JavaScript

Vue.directive('demo', function (value) {
  console.log(value) // "foo bar baz"
})