Vue.js
Aangepaste richtlijnen

Syntaxis

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

parameters

Basics

Naast de standaardset richtlijnen die in de kern worden verzonden, kunt u met Vue.js ook aangepaste richtlijnen registreren. Aangepaste richtlijnen bieden een mechanisme voor het toewijzen van gegevenswijzigingen aan willekeurig DOM-gedrag.

U kunt een globale aangepaste instructie registreren met de Vue.directive(id, definition) , waarbij u een instructie-ID Vue.directive(id, definition) gevolgd door een definitieobject. U kunt ook een lokale aangepaste richtlijn registreren door deze op te nemen in een component directives optie.

Hook-functies

• binden : slechts één keer aangeroepen, wanneer de richtlijn voor het eerst aan het element is gebonden.
• update : voor de eerste keer opgeroepen onmiddellijk na bind met de initiële waarde en vervolgens opnieuw wanneer de bindende waarde verandert. De nieuwe waarde en de vorige waarde worden als argument opgegeven.
• unbind : wordt slechts één keer aangeroepen, wanneer de richtlijn niet gebonden is aan het element.

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()
     }    
})

Eenmaal geregistreerd, kunt u het gebruiken in Vue.js-sjablonen zoals deze (vergeet niet het v- voorvoegsel toe te voegen):

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

Wanneer u alleen de update nodig hebt, kunt u een enkele functie doorgeven in plaats van het definitieobject:

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

Richtlijninstantie-eigenschappen

Al de haak functies zullen worden gekopieerd naar de werkelijke richtlijn object, dat u kunt openen in deze functies als hun this context. Het richtlijnobject vertoont enkele nuttige eigenschappen:

• el : het element waaraan de richtlijn gebonden is.
• vm : de context ViewModel die eigenaar is van deze richtlijn.
• expressie : de expressie van de binding, exclusief argumenten en filters.
• arg : het argument, indien aanwezig.
• naam : de naam van de richtlijn, zonder het voorvoegsel.
• modifiers : een object met eventuele modifiers.
• descriptor : een object dat het parseerresultaat van de hele richtlijn bevat.
• params : een object met param-attributen. Hieronder uitgelegd.

U moet al deze eigenschappen als alleen-lezen behandelen en ze nooit wijzigen. U kunt ook aangepaste eigenschappen aan het richtlijnobject koppelen, maar pas op dat u niet per ongeluk bestaande interne overschrijft.

Een voorbeeld van een aangepaste instructie die enkele van deze eigenschappen gebruikt:

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!'
  }
})

Resultaat

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

Letterlijk object

Als uw richtlijn meerdere waarden nodig heeft, kunt u ook een letterlijk JavaScript-object doorgeven. Onthoud dat richtlijnen elke geldige JavaScript-expressie kunnen bevatten:

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!"
})

Letterlijke Modifier

Wanneer een richtlijn wordt gebruikt met de letterlijke modificator, wordt de kenmerkwaarde ervan geïnterpreteerd als een gewone tekenreeks en direct doorgegeven aan de update . De update wordt ook slechts één keer aangeroepen, omdat een gewone string niet reactief kan zijn.

HTML

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

JavaScript

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