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('my-directive', { 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('my-directive', 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('demoDirective', {
bind: function () { this.el.style.color = '#fff'
this.el.style.backgroundColor = this.arg
},
update: function (value) { this.el.innerHTML = 'name - ' + this.name + '<br>' + 'raw - ' + this.raw + '<br>' + 'expression - ' + this.expression + '<br>' + 'argument - ' + this.arg + '<br>' + 'value - ' + value
}
}); var demo = new Vue({
el: '#demo',
data: {
msg: 'hello!'
}
})</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: 'white', text: 'hello!'"></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: 'white', text: 'hello!'}"></div>
Vue.directive('demo', function (value) { console.log(value) // Object {color: 'white', text: 'hello!'}}) 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('literal-dir', { isLiteral: true, bind: function () { console.log(this.expression) // 'foo'
}
})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('example', { 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('input', this.handler)
}, unbind: function () { this.el.removeEventListener('input', 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('my-directive', { acceptStatement: true, update: function (fn) { // the passed in value is a function which when called,
// will execute the "a++" statement in the owner vm'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('my-directive', { 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('my-directive', { // 和普通指令的 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中文网其它相关文章！
相关阅读：
一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器
Das obige ist der detaillierte Inhalt vonSo verwenden Sie benutzerdefinierte Direktiven in Vue.JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Python vs. JavaScript: Entwicklungsumgebungen und ToolsApr 26, 2025 am 12:09 AMSowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.
Ist JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AMJa, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.
JavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AMJavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.
C und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AMC und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.
Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AMJavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.
Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichenApr 21, 2025 am 12:01 AMPython eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.
Die Rolle von C/C bei JavaScript -Dolmetschern und CompilernApr 20, 2025 am 12:01 AMC und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.
JavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AMDie Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
Dreamweaver CS6
Visuelle Webentwicklungstools
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
