Heim > Artikel > Web-Frontend > So verwenden Sie benutzerdefinierte Direktiven in Vue.JS

So verwenden Sie benutzerdefinierte Direktiven in Vue.JS

php中世界最好的语言Original: 2018-03-07 11:50:331621Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie die benutzerdefinierten Anweisungen von Vue.JS verwenden. Was sind die Vorsichtsmaßnahmen, wenn Sie die benutzerdefinierten Anweisungen von Vue.JS verwenden?

Mit Vue.js können Sie benutzerdefinierte Anweisungen registrieren und Vue im Wesentlichen einige neue Tricks beibringen: wie Sie Datenänderungen dem DOM-Verhalten zuordnen. Sie können die Methode Vue.directive(id, definition) verwenden, um eine globale benutzerdefinierte Direktive zu registrieren, indem Sie die Direktiven-ID und das Definitionsobjekt übergeben. Um das Objekt zu definieren, müssen einige Hook-Funktionen bereitgestellt werden (alle optional):

bind: wird nur einmal aufgerufen, wenn die Anweisung das Element zum ersten Mal bindet.

Aktualisierung: Beim ersten Aufruf unmittelbar nach der Bindung ist der erhaltene Parameter der Anfangswert der Bindung. In Zukunft wird er immer dann aufgerufen, wenn sich der gebundene Wert ändert, und zwar sowohl der neue Wert als auch der alte Werte werden erhalten.

unbind: Wird nur einmal aufgerufen, wenn die Anweisung die Bindung des Elements aufhebt.

Beispiel:

Vue.directive(&#39;my-directive&#39;, {  bind: function () {    // 做绑定的准备工作
    // 比如添加事件监听器，或是其他只需要执行一次的复杂操作
  },  update: function (newValue, oldValue) {    // 根据获得的新值执行对应的更新
    // 对于初始值也会被调用一次
  },  unbind: function () {    // 做清理工作
    // 比如移除在 bind() 中添加的事件监听器
  }
})

Sobald die benutzerdefinierte Direktive registriert ist, können Sie sie wie folgt in der Vue.js-Vorlage verwenden (Sie müssen das Präfix der Vue.js-Direktive hinzufügen, die Standardeinstellung). ist v-):

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

Wenn Sie nur die Update-Funktion benötigen, können Sie einfach eine Funktion anstelle des Definitionsobjekts übergeben:

Vue.directive(&#39;my-directive&#39;, function (value) {  // 这个函数会被作为 update() 函数使用})

Alle Hook-Funktionen werden kopiert in das eigentliche Befehlsobjekt, und dieses Befehlsobjekt wird der this
-Kontext aller Hook-Funktionen sein. Einige nützliche öffentliche Eigenschaften werden für das Direktivenobjekt verfügbar gemacht:

el: das Element, an das die Direktive gebunden ist
vm: der Kontext ViewModel, der die Direktive besitzt
Ausdruck: der -Ausdruck von die Direktive , ausgenommen Parameter und Filter
arg: Parameter des Befehls
raw: ungeparster Rohausdruck
Name: Befehlsname ohne Präfix

Diese Eigenschaften sind schreibgeschützt, ändern Sie sie nicht. Sie können dem Direktivenobjekt auch benutzerdefinierte Eigenschaften hinzufügen. Achten Sie jedoch darauf, vorhandene interne Eigenschaften nicht zu überschreiben.

Beispiel für die Verwendung von Direktivenobjektattributen:

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script></head><body><div id="demo" v-demo-directive="LightSlateGray : msg"></div><script>
    Vue.directive(&#39;demoDirective&#39;, {
        bind: function () {            this.el.style.color = &#39;#fff&#39;
            this.el.style.backgroundColor = this.arg
        },
        update: function (value) {            this.el.innerHTML =                    &#39;name - &#39;       + this.name + &#39;<br>&#39; +                    &#39;raw - &#39;        + this.raw + &#39;<br>&#39; +                    &#39;expression - &#39; + this.expression + &#39;<br>&#39; +                    &#39;argument - &#39;   + this.arg + &#39;<br>&#39; +                    &#39;value - &#39;      + value
        }
    });    var demo = new Vue({
        el: &#39;#demo&#39;,
        data: {
            msg: &#39;hello!&#39;
        }
    })</script></body></html>

Mehrere Klauseln

Innerhalb desselben Attributs werden mehrere durch Kommas getrennte Klauseln als mehrere Direktiveninstanzen gebunden. Im folgenden Beispiel wird die Direktive zweimal erstellt und aufgerufen:

<div v-demo="color: &#39;white&#39;, text: &#39;hello!&#39;"></div>

Wenn Sie eine einzelne Direktiveninstanz zur Verarbeitung mehrerer Parameter verwenden möchten, können Sie Literalobjekte als Ausdrücke verwenden:

<div v-demo="{color: &#39;white&#39;, text: &#39;hello!&#39;}"></div>
Vue.directive(&#39;demo&#39;, function (value) {  console.log(value) // Object {color: &#39;white&#39;, text: &#39;hello!&#39;}})

Literal-Direktive

Wenn isLiteral: true beim Erstellen einer benutzerdefinierten Direktive übergeben wird, wird der Attributwert als direkte Zeichenfolge behandelt und dem Ausdruck der Direktive zugewiesen. Wörtliche Anweisungen versuchen nicht, eine Datenüberwachung einzurichten.
Beispiel:

<div v-literal-dir="foo"></div>
Vue.directive(&#39;literal-dir&#39;, {  isLiteral: true,  bind: function () {    console.log(this.expression) // &#39;foo&#39;
  }
})

Dynamische Literal-Direktive

Wenn die Literal-Direktive jedoch das Mustache-Tag enthält, verhält sich die Direktive wie folgt:

Die Die Direktiveninstanz hat ein Attribut, this._isDynamicLiteral ist auf true gesetzt.

Wenn keine Aktualisierungsfunktion bereitgestellt wird, wird der Mustache-Ausdruck nur einmal ausgewertet und der Wert wird this.expression zugewiesen. Für den Ausdruck wird keine Datenüberwachung durchgeführt.

Wenn die Aktualisierungsfunktion bereitgestellt wird, richtet die Anweisung eine Datenüberwachung für den Ausdruck ein und ruft die Aktualisierung auf, wenn sich das Berechnungsergebnis ändert.

Zwei-Wege-Direktive

Wenn Ihre Direktive Daten zurück in die Vue-Instanz schreiben möchte, müssen Sie twoWay: true übergeben. Diese Option ermöglicht die Verwendung von this.set(value) in Direktiven.

Vue.directive(&#39;example&#39;, {  twoWay: true,  bind: function () {    this.handler = function () {      // 把数据写回 vm
      // 如果指令这样绑定 v-example="a.b.c",
      // 这里将会给 `vm.a.b.c` 赋值
      this.set(this.el.value)
    }.bind(this)    this.el.addEventListener(&#39;input&#39;, this.handler)
  },  unbind: function () {    this.el.removeEventListener(&#39;input&#39;, this.handler)
  }
})

Inline-Anweisung

Die Übergabe von „acceptStatement: true“ kann dazu führen, dass die benutzerdefinierte Direktive Inline-Anweisungen wie „v-on“ akzeptiert:

<div v-my-directive="a++"></div>
Vue.directive(&#39;my-directive&#39;, {  acceptStatement: true,  update: function (fn) {    // the passed in value is a function which when called,
    // will execute the "a++" statement in the owner vm&#39;s
    // scope.
  }
})

Aber seien Sie bitte vorsichtig. Verwenden Sie dies Funktionieren Sie mit Bedacht, da wir im Allgemeinen Nebenwirkungen in Vorlagen vermeiden möchten.

Deep Data Observation

Wenn Sie eine benutzerdefinierte Anweisung für ein Objekt verwenden und die Aktualisierungsfunktion der Anweisung auslösen möchten, wenn sich die verschachtelten Eigenschaften innerhalb des Objekts ändern, müssen Sie „Deep: true“ übergeben die Definition der Richtlinie.

<div v-my-directive="obj"></div>
Vue.directive(&#39;my-directive&#39;, {  deep: true,  update: function (obj) {    // 当 obj 内部嵌套的属性变化时也会调用此函数
  }
})

Befehlspriorität

Sie können optional eine Prioritätsnummer für den Befehl angeben (Standard ist 0). Anweisungen mit höherer Priorität für dasselbe Element werden früher verarbeitet als andere Anweisungen. Anweisungen mit derselben Priorität werden in der Reihenfolge verarbeitet, in der sie in der Elementattributliste erscheinen. Es gibt jedoch keine Garantie dafür, dass diese Reihenfolge in verschiedenen Browsern konsistent ist.

Im Allgemeinen müssen Sie sich als Benutzer nicht um die Priorität der integrierten Anweisungen kümmern. Wenn Sie interessiert sind, können Sie sich den Quellcode ansehen. Die logischen Steueranweisungen v-repeat und v-if gelten als „Terminalanweisungen“ und haben beim Kompilieren immer die höchste Priorität.

Elementanweisungen

Manchmal möchten wir möglicherweise, dass unsere Anweisungen als benutzerdefinierte Elemente und nicht als Funktion verfügbar sind. Dies ist dem Konzept der E-Type-Direktiven von Angular sehr ähnlich. Die Elementdirektive kann als leichte selbstdefinierte Komponente betrachtet werden (wird später besprochen). Sie können einen benutzerdefinierten Elementbefehl wie folgt registrieren:

Vue.elementDirective(&#39;my-directive&#39;, {  // 和普通指令的 API 一致
  bind: function () {    // 对 this.el 进行操作...
  }
})

Wenn Sie ihn verwenden, schreiben wir ihn nicht mehr so:

<div v-my-directive></div>

, sondern schreiben stattdessen:

<my-directive></my-directive>

元素指令不能接受参数或表达式，但是它可以读取元素的特性，来决定它的行为。与通常的指令有个很大的不同，元素指令是终结性的，这意味着，一旦 Vue 遇到一个元素指令，它将跳过对该元素和其子元素的编译 - 即只有该元素指令本身可以操作该元素及其子元素。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen