Detaillierte Erklärung der Vue-Optionen

1. Was sind Optionen?

Unabhängig davon, ob es sich um jQuery.js oder Vue.js handelt, handelt es sich um Bibliotheken, die basierend auf js neu gekapselt werden, und alle müssen entsprechende Instanzen erstellen, um entsprechende Vorgänge zu kapseln. Beispielsweise können Sie über $('div'), auch jQuery-Objekt genannt, eine Instanz eines jQuery-Div-Elements abrufen. Das jQuery-Objekt enthält verschiedene Operations-APIs für das ausgewählte Div-Element, sodass die jQuery-Instanz verschiedene Operationen für das ausgewählte Element kapselt.

Vue.js geht noch einen Schritt weiter und kapselt alle Operationen an der Ansicht, darunter das Lesen und Schreiben von Daten, das Überwachen von Datenänderungen, das Aktualisieren von DOM-Elementen usw. Eine Vue-Instanz, auch Vue-Objekt genannt, wird über new Vue(options) erstellt. Die Vue-Instanz kapselt alle Operationen zum Bedienen von Elementansichten, und die Ansicht des entsprechenden Bereichs kann problemlos über die Vue-Instanz bedient werden.

2. Welche Attribute sind enthalten

Es gibt viele spezifische optionale Eigenschaften des Optionsobjekts, die in fünf Kategorien unterteilt werden können, die auf der offiziellen Website von vue.js wie folgt angezeigt werden können:

3. Eintragsattribute

el

Das el-Attribut wird auch als Einhängepunkt bezeichnet, was als Abkürzung für Element betrachtet werden kann. Um eine Vue-Instanz zu erstellen, müssen Sie wissen, auf welchem ​​Element die Vue-Instanz erstellt werden soll und mit welcher Ansicht gearbeitet werden soll.

Es gibt zwei Möglichkeiten, einen Einhängepunkt zu definieren.

1. Legen Sie die el-Eigenschaft fest

neuer Vue({
  el: "#app",
  rendern: h => h(App)
})

2. Verwenden Sie die $mount-Schnittstelle

neuer Vue({
  rendern: h => h(App)
}).$mount("#app");

Daten

Das Datenattribut wird auch als interne Daten bezeichnet. Der Attributwert kann ein Objekt oder eine Funktion sein, es wird jedoch empfohlen, eine Funktion zu verwenden. Die Funktion in einem Objekt wird auch als Methode bezeichnet. Und wenn es sich um Daten in einer Komponente handelt, muss eine Funktion verwendet werden.

Der Grund, warum die Funktion empfohlen wird, ist, dass beim Verwenden desselben Optionsobjekts als Parameter zum Erstellen mehrerer Vue-Instanzen der Datenattributwert ein Objekt ist und beim Verwenden von new Vue(options) zum Erstellen einer Vue-Instanz der Wert des Options.data-Attributs direkt dem Vue-Instance.data-Attribut zugewiesen wird. Da die Objektzuweisung eine kopierte Adresse ist, verweisen die Datenattributwerte mehrerer Instanzen alle auf die Adresse desselben Objekts. Mehrere Instanzen teilen sich ein Datenobjekt. Wenn eine Instanz das Datenobjekt ändert, wird auch das Datenobjekt einer anderen Instanz geändert.

Wenn der Datenattributwert eine Funktion ist, führt Vue beim Erstellen einer Instanz die Funktion data() aus und weist das von der Funktionsausführung zurückgegebene Objekt dem .data-Attribut der Vue-Instanz zu. Bei jeder Ausführung der Funktion ist das zurückgegebene Objekt ein anderes Objekt. Daher entsprechen die Datenattributwerte mehrerer Instanzen unterschiedlichen Objekten. Eine Änderung an einem hat keine Auswirkungen auf ein anderes und sie sind voneinander unabhängig.

1. Nutzungsgegenstände

Daten:{
    n: 0
}

2. Funktionen nutzen

Daten(){
    zurückkehren {
      n: 0
    }
}

Methoden

Das Methodenattribut wird auch Methode genannt. Der Attributwert ist ein Objekt. Die Attribute im Objekt sind alle Funktionen. Diese Funktionen können Rückruffunktionen für die Ereignisverarbeitung oder normale Funktionen sein. Die Besonderheit besteht darin, dass bei jedem Rendern der Seite folgende Methoden ausgeführt werden:

Methoden:{
    hinzufügen(){
      dies.n +=1
    }
}

Komponenten

Komponenten bedeutet Komponenten, die ebenfalls Vue-Instanzen sind, die auf der Grundlage des Konzepts der Modularität zur einfachen Wiederverwendung entwickelt wurden. Es gibt drei Möglichkeiten, sie zu verwenden:

1. Globale Registrierung

Definieren Sie eine Komponente global, damit sie jederzeit im gesamten Projekt verwendet werden kann. Die Definitionsmethode ist wie folgt

Vue.component('mein-Komponentenname', {  

    // ... Optionen ... Dieser Teil ist derselbe wie die Optionen zum Erstellen einer Vue-Instanz, schließlich ist eine Komponente eine Vue-Instanz})
neues Vue({ el: '#app' })

<div id="app">
    <mein-Komponentenname></mein-Komponentenname>
</div>

2. Lokale Registrierung

//Definiere die Komponente durch ein normales JavaScript-Objekt var ComponentA = { options }

//Definieren Sie dann die Komponente, die Sie verwenden möchten, in der Komponentenoption new Vue({ 
    el: '#app',
    Komponenten:
        Komponente-A: KomponenteA //oder definiere das Objekt direkt darin Komponente-B: {
            //Gleicher Inhalt wie Optionen, aber Daten müssen eine Funktion sein}
    } 
})

<div id="app">
    <Komponente-a></Komponente-a>
</div>

3. Modulsystem

Indem Sie die Komponente in eine *.vue-Datei trennen und sie dann wie folgt importieren und durch Import referenzieren
Haupt-JS

importiere ComponentA aus './ComponentA.vue'
neuer Vue({ 
    el: '#app',
    Komponenten: {
        KomponenteA: KomponenteA
        //In der ES6-Syntax können Sie nur eine Komponente schreiben, wenn Attribut und Attributwert identisch sind. //ComponentA
    }
})

<div id="app">
    <KomponenteA></KomponenteA>
</div>

Zusammenfassen

Es empfiehlt sich, den letzten Modulsystembaustein zu verwenden, da dieser modularer und übersichtlicher aufgebaut ist.
Eine vollständige Einführung finden Sie auf der offiziellen Website von vuejs - Komponenten

Requisiten

Props, auch als externe Daten bekannt, werden im Allgemeinen in Komponenten verwendet, um externe Daten zu akzeptieren. Wenn die Komponente verwendet wird, werden sie über die globalen Attribute des Tags übergeben. Nachfolgend finden Sie ein Beispiel für die Einführung der Vollversion von vue.js

HalloWelt.vue

<Vorlage>
  <div Klasse="hallo">
    <h1>{{ msg }}</h1>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Hallo Welt",
  Requisiten: {
    msg: Zeichenfolge
  }
};
</Skript>

Datenübertragung

Haupt-JS

importiere HelloWorld aus ./HelloWorld.vue
neuer Vue({
    Vorlage:`
        <HelloWorld msg="hallo meine Welt"/> //Hier können nur Strings übergeben werden <HelloWorld :msg="ms"/> //Hiermit werden Variablen übergeben, d.h. this.ms
        //Auch verfügbar: Übergeben Sie den Funktionsnamen <HelloWorld :msg="fn"/>
    `,
    Daten:{
        ms: „Hallo meine Welt“
    },
    Methoden:{
        fn(){
            ...
        }
    }
})

Lebenszyklus-Hooks

In Vue wird jeder Zustandsübergangspunkt als Hook bezeichnet, z. B. nachdem die Instanz erstellt wurde und bevor die Instanz erstellt wurde. Die Instanzerstellung ist ein Hook, der den beiden Phasen davor und danach entspricht, d. h. beforeCreate vor der Erstellung der Instanz und created nach der Erstellung der Instanz. Die folgenden treten paarweise auf, sodass Sie sich nur einen merken müssen.

Bei dieser Eigenschaft handelt es sich um eine Funktion, die zum entsprechenden Zeitpunkt aufgerufen wird.

• erstellte Instanz erscheint im Speicher
• gemountet (an diesem Hook können Daten abgefragt werden) Die Instanz erscheint auf der Seite
• aktualisiert Die Instanz wird aktualisiert
• zerstört Die Instanz wird von der Seite und aus dem Speicher gelöscht

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