Anmeldung
Anmelden

Vue3

Es stellt die Syntax und die gängigen Erweiterungs-Plug-Ins von vue3 ausführlich vor, was zum Lernen und Abfragen geeignet ist. Interessierte Freunde können darauf verweisen.

Bearbeitet um 2024-02-04 00:46:16

Deu-Martina

Aktuelle Werke Weitere Werke anzeigen>>

Hundert Jahre Einsamkeit Charakter-Beziehungsdiagramm
Einhundert Jahre Einsamkeit ist das Meisterwerk von Gabriel Garcia Marquez. Die Lektüre dieses Buches beginnt mit der Klärung der Beziehungen zwischen den Figuren. Im Mittelpunkt steht die Familie Buendía, deren Wohlstand und Niedergang, interne Beziehungen und politische Kämpfe, Selbstvermischung und Wiedergeburt im Laufe von hundert Jahren erzählt werden.
Hundert Jahre Einsamkeit Charakter-Beziehungsdiagramm
Einhundert Jahre Einsamkeit ist das Meisterwerk von Gabriel Garcia Marquez. Die Lektüre dieses Buches beginnt mit der Klärung der Beziehungen zwischen den Figuren. Im Mittelpunkt steht die Familie Buendía, deren Wohlstand und Niedergang, interne Beziehungen und politische Kämpfe, Selbstvermischung und Wiedergeburt im Laufe von hundert Jahren erzählt werden.
Projektmanagement-Prozess-Vorlage
Projektmanagement ist der Prozess der Anwendung von Fachwissen, Fähigkeiten, Werkzeugen und Methoden auf die Projektaktivitäten, so dass das Projekt die festgelegten Anforderungen und Erwartungen im Rahmen der begrenzten Ressourcen erreichen oder übertreffen kann. Dieses Diagramm bietet einen umfassenden Überblick über die 8 Komponenten des Projektmanagementprozesses und kann als generische Vorlage verwendet werden.

Vue3

Deu-Martina

Aktuelle Werke Weitere Werke anzeigen>>

Für Sie empfohlen
Gliederung

Python-Grundlagen
- 7
- 1
Deu-Martina
JS-Grundlagen Tag1
- 1
Deu-Martina
JS-Grundlagen Tag2
- 1
Deu-Martina
JS-Grundlagen Tag3
- 2
Deu-Martina
JS-Grundlagen Tag4
- 2
Deu-Martina
JS-Grundlagen Tag5
- 2
Deu-Martina
Python-Wissenspunkte
- 2
Deu-Martina
Stückliste
- 1
Deu-Martina
Web-Worker
- 1
Deu-Martina
HTML-Tag-Typen
- 2
Deu-Martina

Projekt erstellen

vue erstellen A

Vorlagensyntax

Text

Überall

Entspricht $A.text() in JS

Im Allgemeinen wird es zum Festlegen von Daten mit data() in js verwendet.

Alte Version

Standard exportieren { Name: '123', Daten(){ zurückkehren{ msg: „Nachricht-Eingabeaufforderung“ } } }

neue Version

ref definiert eine Variable, die mithilfe des Attributs .value neu zugewiesen werden kann. ref ist eine Neuverpackung von reactive

reaktiv definiert Objekte, kann keine grundlegenden Datentypen definieren und kann nicht neu zugewiesen werden

Rohes HTML

Bei der dynamischen Darstellung von HTML mit Variablen interpretieren doppelte geschweifte Klammern die Daten als normalen Text und nicht als HTML

v-html=""

Entspricht $A.html() in JS

Attribute

Verwenden Sie Variablen, um attr dynamisch darzustellen

v-bind:id=""

Entspricht $('div').attr('id', 'ID') in JS

v-bind:id kann als:id abgekürzt werden

Wenn wir möchten, dass B in A="B" eine Variable ist, fügen Sie einfach: vor A hinzu.

Einfache JS-Ausdrücke können in Vorlagen unterstützt werden

Kann

NEIN

Dies ist eine Aussage, kein Ausdruck

{{ if (ok) {Rückmeldung} }}

Die Prozesssteuerung wird nicht wirksam, bitte verwenden Sie ternäre Ausdrücke

Bedingtes Rendern

v-wenn

Wird nur gerendert, wenn der Wert wahr ist

v-sonst

V-Show

Wird gerendert, aber nicht angezeigt

Listenwiedergabe

v-für

(x,index) in Elementen

Dieser Befehl führt eine Schleife von len(items) durch und jedes Mal wird das darin enthaltene x verwendet, um den Wert in items abzurufen

:key="item.id"

Aktualisierung zur Verbesserung der Effizienz

Handhabung des Events

Ereignis hinzufügen

Schreiben Sie direkt

@click="Zähler = 1"

Aufruffunktionen

@click="clickHandle(123)"

Alte Version

Methoden: { clickHandle(data){ console.log(data); } }

Dadurch kann der Wert von Daten in Methoden geändert werden.A

neue Version

Sie können ein Parameterereignis hinzufügen, bei dem es sich um ein natives JS-Ereignis handelt.

Beachten

Der Klick kann für jedes angeklickte Objekt ausgelöst werden, z. B. <li>

Zwei-Wege-Bindung

V-Modell

Kann <input>, <textarea> und <select> bidirektional binden

Durch Ändern des Werts in den Daten kann sich der Wert in <Eingabe> ändern. Durch Ändern des Werts in <Eingabe> kann sich auch der Wert in den Daten ändern

Konvertieren Sie ein Attribut in einen Modelltyp

v-model:current-page="nowpage"

v-model.lazy

Ändert sich nur, wenn <Eingabe> den Fokus verliert

v-model.trim

Entfernen Sie beim Abrufen führende und nachfolgende Leerzeichen

Komponenten

Suffix

.vue

Inhalt

Vorlage

Skript

Standardobjekteigenschaften exportieren

Name: der Name der Komponente

Daten: Daten übergeben

Methoden: Schreibfunktionen

Komponenten: speichert alle in <template> verwendeten Komponenten

Requisiten: Speichert die von der übergeordneten Komponente an die untergeordnete Komponente übergebenen Daten

watch(): wird ausgelöst, wenn sich bestimmte Daten ändern

Berechnet: Bestimmte Daten dynamisch berechnen

setup(props, context): Variablen und Funktionen initialisieren

ref definiert eine Variable, die mithilfe des Attributs .value neu zugewiesen werden kann

Reaktives Definitionsobjekt kann nicht neu zugewiesen werden

context.emit(): Funktion, die die Bindung der übergeordneten Komponente auslöst

return kann Daten an untergeordnete Komponenten übergeben

Stil

umfangreich

Wenn dieses Attribut vorhanden ist, wird dieser Stil nur in der aktuellen Komponente wirksam.

Belastung

Komponenten vorstellen

Importieren Sie A aus ./components/A.vue

hängt am Bauteil

Komponenten:{A}

Anzeigekomponente

<A/>

Komponenteninteraktion

Die übergeordnete Komponente wird an die untergeordnete Komponente übergeben

Übergeben Sie HTML

<el-main>Liste</el-main>

Übergeben Sie Variablen

Versandart

Durch Requisiten im Exportstandard im Skript

Vorübergehende Schritte

übergeordnete Komponente

Schreiben Sie das Tag der untergeordneten Komponente in die Vorlage

:A=B :C=D

Wenn Sie einen komplexen Parameter B übergeben möchten, können Sie ihn in setup() schreiben

Hier ist B Benutzer

Unterbaugruppe

Skript

Standard exportieren { Name: „MyComponent“, Requisiten: { A:{ Typ: Zeichenfolge, Standard: "" }, }, }

Wählen Sie im Allgemeinen eine der Optionen „required:true“ und „default:““ aus.

Beachten

Standardwerte für Arrays und Objekte müssen Funktionen sein

default:function(){ zurückkehren []; }

default:function(){ zurückkehren {}; }

Im Setup können Sie über Requisiten auf die Informationen der übergeordneten Komponente verweisen.

Vorlage

{{}} Zitat

Typ übergeben

Zeichenfolge

Nummer

Boolescher Wert

Array

Objekt

Funktion

Untergeordnete Komponente, die an die übergeordnete Komponente übergeben wird

Versandart

Übergeben Sie Daten über benutzerdefinierte Ereignisse

Vorübergehende Schritte

Unterbaugruppe

Schreiben Sie ein Ereignis A in die Vorlage

Ereignisquelle

Implementieren Sie dieses Ereignis A in Methoden

Alte Version

this.$emit("B",this.message)

neue Version

context.emit("B"): Funktion, die die Bindung der übergeordneten Komponente auslöst

übergeordnete Komponente

Schreiben Sie das Tag der untergeordneten Komponente in die Vorlage

@B="C"

Implementieren Sie dieses Ereignis C in Methoden. Das Ereignis verfügt über einen Parameter, der der übergebene Wert ist.

C(Daten){}

Komponentenlebenszyklus

Beim Erstellen: beforeCreate, erstellt Beim Rendern: beforeMount, gemountet Beim Aktualisieren: beforeUpdate, aktualisiert Beim Aushängen: beforeUnmount, aushängen

Die acht periodischen Funktionen liegen auf der gleichen Ebene wie Daten

Stellen Sie Dritte vor

Swiper

Karussell

Axios

Netzwerkanfrage

Verkapselung

Erstellen Sie den Ordner „utils“ in src und erstellen Sie darin die Datei „request.js“.

Spezifische Verwendung

https://www.bilibili.com/video/BV1Y84y1B7Tz?p=14&vd_source=048c7bdfe54313b8b3ee1483d9d07e38

10:16

Domänenübergreifende Lösung für Netzwerkanfragen

Abfragezeichenfolge

In String konvertieren

Routenführung

Seitensprung

Schreiben Sie die URL, die übersprungen werden soll, in die Routen im Router

<Router-Ansicht>

zeigen

<router-link to="...">

Springen

Parameter tragen

Pfad:"/list/:A/:B"

to="/list/Baidu/1"

const route = useRoute(); {{route.params.userID}}

Verschachteltes Routing

Umleiten

{ Pfad: '/:catchAll(.*)/', Weiterleitung: „/404“, }

Aktualisierung

Standardmäßig wird bestimmt, ob die Aktualisierung anhand des Namens erfolgen soll.

Sie können die Beurteilungsmethode anpassen, indem Sie den Schlüsselwert neu schreiben

vuex

Komposition

Zustand: Inhalte in Vuex verwenden

Getter: Daten in Vuex filtern und berechnen

Mutation: Ändern Sie den Status im Vuex-Store

Alte Version

neue Version

import { useStore } aus „vuex“;

const store = useStore();

aufstellen(){ store.dispatch("login", {paras}) }

Commit ist eine Methode zum Senden und Ausführen von Mutationen, die Daten ändern und synchronisiert werden müssen.

Dispatch ist eine Methode zum Senden und Ausführen von Aktionen, bei denen es sich um asynchrone Vorgänge handeln kann.

Aktion: Ähnlich wie Mutation, unterstützt asynchrone Vorgänge, kann den Speicher jedoch nicht ändern

Module: Submodule, die den Zustand definieren

überweisen

extern

Zustand

store.state.user.access

Aktion

store.dispatch("Funktionsname", Parameter)

Mutation

store.commit("Funktionsname", Parameter)

intern

Mutationen passen den Zustand an

state.id

Aufruffunktion

Ändern Sie den Speicher in den Kontext

JWT

Öffentlicher Passwortschlüssel -> neuer String. Wenn Sie den öffentlichen Schlüssel haben, können Sie damit überprüfen, ob das Passwort korrekt ist zurück.

npm und JWT-Dekodierung

jwt_decode aus 'jwt-decode' importieren;

Hinweis: Nach Bearer steht ein Leerzeichen

Ajax

Wenn Sie Ajax auf der Vue-Seite verwenden möchten, können Sie es direkt im Setup schreiben und es wird direkt beim Generieren der Seite aufgerufen. Natürlich kann es auch in einer Funktion geschrieben werden

Wenn Sie es in Vuex verwenden möchten, müssen Sie es in die Funktion einfügen, um es auszulösen.

andere

aufstellen()

Fragment ohne Wurzelknoten

Element installieren

npm install element-plus --save

npm install -D unplugin-vue-components unplugin-auto-import

vue.config.js

const { defineConfig } = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { Plugins: [ AutoImport({ Resolver: [ElementPlusResolver()] }), Komponenten({ Resolver: [ElementPlusResolver()] }) ] } })