Vue.js
Benutzerdefinierte Richtlinien

Syntax

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

Parameter

Grundlagen

Zusätzlich zu den Standardvorgaben, die im Kern ausgeliefert werden, können Sie mit Vue.js auch benutzerdefinierte Anweisungen registrieren. Benutzerdefinierte Anweisungen bieten einen Mechanismus zum Zuordnen von Datenänderungen zu beliebigem DOM-Verhalten.

Sie können eine globale benutzerdefinierte Direktive mit der Methode Vue.directive(id, definition) registrieren und eine Direktive-ID übergeben, auf die ein Definitionsobjekt folgt. Sie können auch eine lokale benutzerdefinierte Direktive registrieren, indem Sie sie in die directives Option einer Komponente aufnehmen.

Hook-Funktionen

• bind : Wird nur einmal aufgerufen, wenn die Direktive zuerst an das Element gebunden wird.
• update : wurde zum ersten Mal unmittelbar nach dem bind mit dem Anfangswert aufgerufen und dann erneut, wenn sich der Bindungswert ändert. Der neue Wert und der vorherige Wert werden als Argument bereitgestellt.
• Unbind : wird nur einmal aufgerufen, wenn die Direktive vom Element getrennt wird.

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

Nach der Registrierung können Sie es wie folgt in Vue.js-Vorlagen verwenden (denken Sie daran, das v- Präfix hinzuzufügen):

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

Wenn Sie nur die update benötigen, können Sie anstelle des Definitionsobjekts nur eine einzige Funktion übergeben:

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

Eigenschaften der Direktiveinstanz

Alle Hook - Funktionen werden in die eigentliche Richtlinie Objekt kopiert, die Sie in diesen Funktionen als ihre zugreifen können this Kontext. Das Direktive-Objekt macht einige nützliche Eigenschaften verfügbar:

• el : das Element, an das die Direktive gebunden ist.
• vm : Der Kontext ViewModel, dem diese Direktive gehört.
• Ausdruck : Der Ausdruck der Bindung, ohne Argumente und Filter.
• arg : das Argument, falls vorhanden.
• name : Der Name der Direktive ohne Präfix.
• Modifikatoren : ein Objekt, das ggf. Modifikatoren enthält.
• Deskriptor : Ein Objekt, das das Analyseergebnis der gesamten Direktive enthält.
• params : ein Objekt, das Parameterattribute enthält. Unten erklärt.

Sie sollten alle diese Eigenschaften als schreibgeschützt behandeln und niemals ändern. Sie können dem Direktive-Objekt auch benutzerdefinierte Eigenschaften hinzufügen. Achten Sie jedoch darauf, vorhandene interne Eigenschaften nicht versehentlich zu überschreiben.

Ein Beispiel für eine benutzerdefinierte Direktive, die einige dieser Eigenschaften verwendet:

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

Ergebnis

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

Objekt-Literal

Wenn Ihre Anweisung mehrere Werte erfordert, können Sie auch ein JavaScript-Objektliteral übergeben. Denken Sie daran, dass Anweisungen jeden gültigen JavaScript-Ausdruck annehmen können:

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

Wörtliche Modifikation

Wenn eine Anweisung mit dem literal-Modifizierer verwendet wird, wird der Attributwert als einfacher String interpretiert und direkt an die update . Die update wird auch nur einmal aufgerufen, da eine einfache Zeichenfolge nicht reaktiv sein kann.

HTML

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

JavaScript

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