Detaillierte Erläuterung der erweiterten Konstruktionseigenschaften von Vue

1. Richtlinie Zollrichtlinie

Im Code des Vue-Frameworks werden native DOM-Operationen selten verwendet. Das liegt daran, dass native DOM-Operationen in Vue in Anweisungen gekapselt sind. Beispielsweise hat die Anweisung <div v-text="xxx"></div>, die wir zuvor gesehen haben, tatsächlich die folgende interne Operation:

div.innerText = xxx; //Natürlich ist das div hier das erhaltene DOM-Element

Vue kapselt native DOM-Operationen in Anweisungen. Wenn ein Element die Anweisung verwenden möchte, kann es sie direkt als Attribut im Element-Tag in der HTML-Vorlage verwenden. Das ist einfach und praktisch und reduziert Duplikate.

Vue kann jedoch nicht alle DOM-Operationen berücksichtigen und in entsprechende Anweisungen kapseln. Einige DOM-Operationen sind erst bekannt, wenn Entwickler sie in der Praxis verwenden. Daher bietet Vue Benutzern eine Möglichkeit, Anweisungen anzupassen, die grob in die folgenden zwei Typen unterteilt werden können:

Benutzerdefinierte Anweisungen ähneln benutzerdefinierten Komponenten und werden ebenfalls in global und lokal unterteilt. Im Folgenden wird die benutzerdefinierte Anweisung vy zum Drucken des Zeichens y als Beispiel verwendet:

Globale Richtlinien

Globale Eigenschaften werden in bestimmten von Vue bereitgestellten Funktionen registriert:

Vue.direktive("y", {
  eingefügt: function(el) {
    el.addEventListener("klicken", () => console.log("y"));
  }
});

Lokale Anweisungen

Kann nur in der Vorlage verwendet werden, die die Richtlinie definiert

Es kann im Vorlagenattribut der vollständigen Version sein

Haupt-JS

neuer Vue({
  Vorlage:`
    <div vy>
      <button>Klick</button>
    </div>
  `,
  Anweisungen:{
    'y':{
      eingefügt: function(el) {
        el.addEventListener("klicken", () => console.log("y"));
      }
    }
  }
}).$mount("#app");

Oder im Exportstandard{} der unvollständigen Version der .vue-Datei

app.vue

<Vorlage>
    <div>
      <button vy>Klick</button>
    </div>
</Vorlage>
<Skript>
    Standard exportieren {
      Anweisungen:{
        'y':{
          eingefügt: function(el) {
            el.addEventListener("klicken", () => console.log("y"));
          }
        }
      }
    };
</Skript>

DirektiveOptionen

Es gibt 5 Funktionsattribute im Anweisungsobjekt

{
    bind: function (el,info,vnode,oldVnode) {}, //Wird ausgeführt, wenn das Element im Speicher erstellt wird insert: function (Parameter wie oben) {}, //Wird ausgeführt, wenn das Element in die Seite eingefügt wird update: function (Parameter wie oben) {}, 
    componentUpdated: Funktion (Parameter wie oben) {}, 
    unbind: Funktion (Parameter wie oben) {} //Ausführen, wenn das Element verschwindet}

Im Funktionsattributparameter bezieht sich el auf das Element, das die Anweisung aufruft, und info enthält alle Informationen. Suchen Sie bei Bedarf einfach in info danach.

2. Mischen

Der Hauptzweck von Mixins besteht darin, die Duplizierung von Konstruktionsoptionen zu reduzieren. Sie können die wiederholten Konstruktionsoptionen in eine separate *.js-Datei extrahieren, importieren und dann über das Mixins-Attribut in die Konstruktionsoptionen mischen.

minxin ist ein intelligenter Mixin, der auf der Grundlage der hinzugefügten Mixins und der aktuellen Optionen intelligent gemischt wird, anstatt sie einfach zu kopieren.

3. Erweitert die Vererbung

Vererbung und Mixin haben ähnliche Funktionen, aber Extend ist abstrakter. Beide vereinfachen die Wiederholung von Konstruktionsoptionen. Extend kann seine eigenen definierten Eigenschaften als feste Eigenschaften basierend auf der ursprünglichen Vue-Shell hinzufügen und diese dann verwenden, um eine benutzerdefinierte Klasse MyVue zu erstellen, die Vue erbt, wenn ein Vue-Objekt erstellt wird.

MyVue.js

const MyVue = Vue.extend({
    minxins: [Protokoll]
});

Standard-MyVue exportieren;

4. bereitstellen und injizieren

Das übergeordnete Element stellt gemeinsame Daten oder Methoden bereit

{
    //...
    bieten(){
        zurückkehren {
            xx: dies.ändernxx,
            yy: diese.Änderungyy
        }
    },
    Methoden:{
        ändernxx(){
            //...
        },
        ändernyy(){
            //...
        }
    }
}

Nachkommen injizieren Dinge, um Daten zu ändern

{
    einfügen: ["changexx", "changeyy"]
}

Dies funktioniert ähnlich wie der Modifikator .sync, ist aber allgemeiner.

Oben finden Sie eine ausführliche Erläuterung der erweiterten Struktureigenschaften von Vue. Weitere Informationen zu den erweiterten Struktureigenschaften von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!