Detaillierte Erläuterung der benutzerdefinierten Anweisungen für die Vue.js-Direktive

Vue.direktive(id, definition)

<div id="app">
	<!-- Eingabefeld erhält Fokus-->
	<Eingabetyp="Text" v-Fokus/>
</div>

<Skript>
	// Registriere eine globale benutzerdefinierte Direktive v-focus
	Vue.direktive("Fokus", {
		// Wenn das gebundene Element in das DOM eingefügt wird.
		eingefügt(el, Bindung) {
			// Fokuselement el.focus();
		}
	})
</Skript>

<div id="app">
    <p v-demo:red="msg">{{msg}}</p>
</div>

<Skript>
	// Globale Direktive Vue.directive('demo', function (el, binding) {
        console.log(el) //p tag console.log(binding) //Die Ausgabe ist ein Objekt obj
        console.log('Befehlsname:'+binding.name) //Befehlsnameconsole.log('Befehlsbindungswert:'+binding.value) //Befehlsbindungswertconsole.log('Zeichenfolgenform des Bindungswerts:'+binding.expression) //Zeichenfolgenform des Bindungswertsconsole.log('An den Befehl übergebener Parameter:'+binding.arg) //An den Befehl übergebener Parameter})
    var vm = neuer Vue({
        el: "#app",
        Daten: {
            Nachricht: 'Hallo!'
        },
        // Lokale Anweisungen:{
			Demo:{
				eingefügt: Funktion (el) {
					console.log(el)
				}      
			}
		}
    })
</Skript>

<div id="app">
    <p v-demo="Farben">{{Farben.text}}</p>
</div>

<Skript>
    Vue.Direktive('demo', Funktion (el, Bindung) {
        console.log(el) // p-Tag console.log(Bindung) // Die Ausgabe ist ein Objekt obj
        console.log(Bindung.Wert) // {Farbe: 'blau',Text: 'Hallo!'}
        console.log(Bindung.Wert.Farbe) // 'blau'
        console.log(binding.value.text) // 'Hallo!'
        el.style = 'Farbe:' + Bindung.Wert.Farbe  
    })
    var vm = neuer Vue({
        el: "#app",
        Daten: {
            Farben:
                Farbe: 'blau',
                Text: „Hallo!“
            }
        }
    })
</Skript>

<div id="app">
    <p v-demo="Farbe">{{Anzahl}}</p>
    <button @click="add">Hinzufügen</button>
    <button onclick='unbind()'>Bindung aufheben</button>
</div>

<Skript>
    Funktion unbind() {
        vm.$destroy(); //Starte eine andere Methode zum Aufheben der Bindung}
    Vue.directive('demo', { //Fünf Hook-Funktionen zum Registrieren von Direktiven bind: function () { //1. Gebunden werden //Für die Bindung vorbereiten. Zum Beispiel Ereignis-Listener oder andere komplexe Operationen hinzufügen, die nur einmal ausgeführt werden müssen console.log('1 - bind');
        },
        eingefügt: Funktion () { //2. An den Knoten binden console.log('2 - eingefügt');
        },
        update: function () { //3. Komponentenaktualisierung//Führen Sie entsprechende Aktualisierungen basierend auf den neu erhaltenen Werten durch. Für den Initialwert wird zusätzlich einmal console.log('3 - update'); aufgerufen.
        },
        componentUpdated: function () { //4. Komponentenaktualisierung abgeschlossen console.log('4 - componentUpdated');
        },
        unbind: function () { //5. Unbind//Bereinigungsvorgänge durchführen. Wenn Sie beispielsweise den durch Bind gebundenen Ereignis-Listener entfernen, console.log('5 - bind');
        }
    })
    var vm = neuer Vue({
        el: "#app",
        Daten: {
            Zahl: 10,
            Farbe: 'rot'
        },
        Methoden: {
            hinzufügen: Funktion () {
                diese.num++;
            }
        }
    })
</Skript>