Detaillierte Analyse der benutzerdefinierten Vue-Anweisungen und Anweisungsdefinitionsfunktionen (Code)

Benutzerdefinierte Vue-Anweisungen können global oder lokal definiert werden, während Vue-Anweisungen eine erweiterte Wiederverwendung von DOM sind. Schauen wir uns die Anpassung in Vue genauer an.

1. Benutzerdefinierte Vue-Anweisungen: Verwenden Sie Vue.directive(id,definition), um globale benutzerdefinierte Anweisungen zu registrieren, und verwenden Sie die Option „directives“ der Komponente, um lokale benutzerdefinierte Anweisungen zu registrieren.

2. Vue-Hook-Funktion:

Die Anweisungsdefinitionsfunktion stellt mehrere Hook-Funktionen bereit (optional):

binden: Nur einmal aufgerufen, die Anweisung wird zum ersten Mal gebunden Diese Hook-Funktion wird beim Erreichen eines Elements aufgerufen und kann zum Definieren einer Initialisierungsaktion verwendet werden, die einmal während der Bindung ausgeführt wird.

eingefügt: Wird aufgerufen, wenn das gebundene Element in den übergeordneten Knoten eingefügt wird (es kann aufgerufen werden, solange der übergeordnete Knoten vorhanden ist und nicht im Dokument vorhanden sein muss).

Aktualisierung: Beim ersten Aufruf unmittelbar nach der Bindung ist der erhaltene Parameter der Anfangswert der Bindung und wird später aufgerufen, wenn die Vorlage, in der sich das gebundene Element befindet, aktualisiert wird, unabhängig davon, ob die verbindliche Wertänderungen. Durch den Vergleich der Bindungswerte vor und nach der Aktualisierung können unnötige Vorlagenaktualisierungen ignoriert werden (detaillierte Parameter der Hook-Funktion siehe unten).

componentUpdated: Wird aufgerufen, wenn die Vorlage, in der sich das gebundene Element befindet, einen Aktualisierungszyklus abschließt.

unbind: wird nur einmal aufgerufen, wird aufgerufen, wenn die Anweisung vom Element gelöst wird.

3. Parameter der Vue-Hook-Funktion: (el, binding, vnode, oldVnode)

el: Das durch die Anweisung gebundene Element kann zur direkten Manipulation des DOM verwendet werden.

Bindung: ein Objekt, das die folgenden Attribute enthält:

Name: der Anweisungsname, ohne das Präfix von v-;

Wert: der Bindungswert der Anweisung; : v- my-directive="1+1", der Wert von value ist 2;

oldValue: der vorherige durch die Anweisung gebundene Wert, nur in den Hook-Funktionen update und ComponentUpdated verfügbar, unabhängig davon, ob der Wertänderungen;

Ausdruck: die Zeichenfolgenform des Bindungswerts, zum Beispiel: v-my-directive="1+1", der Wert von Ausdruck ist '1+1'; > arg: an die Anweisung übergeben Parameter; zum Beispiel: v-my-directive:foo, der Wert von arg ist 'foo'; .a.b, der Wert der Modifikatoren ist {'a':true,'b':true}

vnode: generierter virtueller Knoten, kompiliert von Vue

oldVnode: nur der letzte virtuelle Knoten in den Hook-Funktionen „update“ und „componentUpdated“ verfügbar.

<p id="app" v-demo:foo.a.b="message"></p>

Vue.directive(&#39;demo&#39;, {
  bind: function (el, binding, vnode) {
      console.log(&#39;bind&#39;);
    var s = JSON.stringify
    el.innerHTML =
      &#39;name: &#39;       + s(binding.name) + &#39;<br>&#39; +
      &#39;value: &#39;      + s(binding.value) + &#39;<br>&#39; +
      &#39;expression: &#39; + s(binding.expression) + &#39;<br>&#39; +
      &#39;argument: &#39;   + s(binding.arg) + &#39;<br>&#39; +
      &#39;modifiers: &#39;  + s(binding.modifiers) + &#39;<br>&#39; +
      &#39;vnode keys: &#39; + Object.keys(vnode).join(&#39;, &#39;)
  }
});
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;hello!&#39;
  }
});

4. Funktionsabkürzung: In den meisten Fällen möchten wir möglicherweise wiederholte Aktionen an den Binde- und Aktualisierungs-Hooks ausführen und uns nicht um andere Hook-Funktionen kümmern. Sie können es so schreiben:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

5. Objektliteral: Wenn die Anweisung mehrere Werte erfordert, können Sie ein JavaScript-Objektliteral übergeben. Denken Sie daran, dass Direktivenfunktionen alle zulässigen Arten von Javascript-Ausdrücken akzeptieren.

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

Vue.directive(&#39;demo&#39;, function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

Beispielanalyse:

<p id="app">
    <my-comp v-if="msg" :msg="msg"></my-comp>
    <button @click="update">更新</button>
    <button @click="uninstall">卸载</button>
    <button @click="install">安装</button>
</p>
<script type="text/javascript">
    Vue.directive(&#39;hello&#39;, {
        bind: function (el){
            console.log(&#39;bind&#39;);
        },
        inserted: function (el){
            console.log(&#39;inserted&#39;);
        },
        update: function (el){
            console.log(&#39;update&#39;);
        },
        componentUpdated: function (el){
            console.log(&#39;componentUpdated&#39;);
        },
        unbind: function (el){
            console.log(&#39;unbind&#39;);
        }
    });

    var myComp = {
        template: &#39;<h1 v-hello>{{msg}}</h1>&#39;,
        props: {
            msg: String
        }
    }

    new Vue({
        el: &#39;#app&#39;,
        data: {
            msg: &#39;Hello&#39;
        },
        components: {
            myComp: myComp
        },
        methods: {
            update: function (){
                this.msg = &#39;Hi&#39;;
            },
            uninstall: function (){
                this.msg = &#39;&#39;;
            },
            install: function (){
                this.msg = &#39;Hello&#39;;
            }
        }
    })
</script>

a. Beim Laden der Seite: binden eingefügt

b. Komponente aktualisieren: Komponente aktualisieren

c. unbind

d. Installieren Sie die Komponente neu: bind inserted

Beachten Sie den Unterschied: bind und insert: Beim Binden ist der übergeordnete Knoten null, beim Einfügen ist der übergeordnete Knoten vorhanden update und KomponenteAktualisiert: „update“ erfolgt vor der Aktualisierung der Daten. „componentUpdated“ erfolgt nach der Aktualisierung der Daten.

6. Schließlich die letzte tatsächlich entwickelte Implementierung der Befehlskapselung

Grundidee

import store from '@/store'

export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const roles = store.state.permission.pagePermission
    if (value && typeof value === 'string' && value.length > 0) {
      const hasPermission = roles.some(role => {
        return role.permission == value
      })
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`need roles! Like v-permission="'button'"`)
    }
  }
}

Die API nach außen zeigen

import permission from './permission'

const install = function(Vue) {
  Vue.directive('permission', permission)
}

if (window.Vue) {
  window['permission'] = permission
  Vue.use(install) // eslint-disable-line
}

permission.install = install
export default permission

Verwandte Empfehlungen:

Benutzerdefinierte Vue-Anweisungen implementieren das V-Tap-Plug-in

So verwenden Sie die benutzerdefinierten Anweisungen von Vue, um ein Dropdown-Menü zu vervollständigen

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der benutzerdefinierten Vue-Anweisungen und Anweisungsdefinitionsfunktionen (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!