Vue.js
Anpassade direktiv

Syntax

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

parametrar

Grunderna

Förutom standarduppsättningen av direktiven som skickas i kärnan, låter Vue.js också registrera anpassade direktiv. Anpassade direktiv ger en mekanism för att kartlägga dataförändringar till godtyckligt DOM-beteende.

Du kan registrera ett globalt anpassat direktiv med Vue.directive(id, definition) och lämna in ett direktiv-id följt av ett definitionsobjekt. Du kan också registrera ett lokalt anpassat direktiv genom att inkludera det i en komponents directives .

Krokfunktioner

• bind : kallas bara en gång, när direktivet först är bundet till elementet.
• uppdatering : ringde för första gången omedelbart efter bind med initialvärdet, sedan igen när bindningsvärdet ändras. Det nya värdet och det föregående värdet anges som argument.
• lossa : kallas bara en gång, när direktivet är obundet från elementet.

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

När du är registrerad kan du använda den i Vue.js-mallar som detta (kom ihåg att lägga till v- prefixet):

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

När du bara behöver update kan du skicka en enda funktion istället för definitionsobjektet:

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

Direktiv Instansegenskaper

Alla krok funktioner kommer att kopieras i själva direktivet objektet, som du kan komma innanför dessa funktioner som sin this sammanhang. Direktivobjektet visar några användbara egenskaper:

• el : elementet som direktivet är bundet till.
• vm : det sammanhang ViewModel som äger detta direktiv.
• uttryck : uttrycket för bindningen, exklusive argument och filter.
• arg : argumentet, om det finns.
• namn : direktivets namn, utan prefixet.
• modifierare : ett objekt som innehåller modifierare, om några.
• descriptor : ett objekt som innehåller analysresultatet av hela direktivet.
• params : ett objekt som innehåller parametervattribut. Förklaras nedan.

Du bör behandla alla dessa egenskaper som skrivskyddad och aldrig ändra dem. Du kan också fästa anpassade egenskaper till direktivobjektet, men se till att inte oavsiktligt skriva över befintliga interna egenskaper.

Ett exempel på ett anpassat direktiv som använder några av dessa egenskaper:

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

Resultat

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

Objekt bokstavligt

Om ditt direktiv behöver flera värden kan du också skicka ett JavaScript-objekt bokstavligt. Kom ihåg att direktiv kan använda valfritt JavaScript-uttryck:

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

Literal Modifier

När ett direktiv används med den bokstavliga modifieraren tolkas dess attributvärde som en vanlig sträng och skickas direkt in i update . update kommer också att kallas endast en gång, eftersom en vanlig sträng inte kan vara reaktiv.

html

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

JavaScript

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