Detaillierte Erläuterung der ersten Erfahrungen mit Vue3.0 + TypeScript + Vite

Projekterstellung

npm:

$ npm init vite-app <Projektname>
$ cd <Projektname>
$ npm installieren
$ npm ausführen dev

oder Garn:

$ yarn create vite-app <Projektname>
$ cd <Projektname>
$ Garn
$ Garn-Entwicklung

Projektstruktur

Haupt-JS

Meiner Meinung nach ist createApp() eine Instanz einer Vue-Anwendung, und createApp unterstützt Kettenaufrufe.

App.vue:

Dies ist die mit vue2.0 kompatible Syntax. Das Folgende ist die RFC-Schreibmethode für vue3.0 (noch im experimentellen Stadium).
offizielle RFC-Beschreibung

aufstellen

Daten

Das Setup kombiniert die erstellte Lebenszyklusfunktion von vue2.0 mit Daten und Methoden (siehe später).

Kann Attribute (Daten) und Methoden (Methoden) direkt exportieren

Es ist ersichtlich, dass der aktuelle Name nicht reagiert. Die Reaktionsfähigkeit wird später eingeführt.

Methoden

Methoden sind die gleichen wie Daten, direkt exportieren

Wirkung:

Kompositions-API

Referenz

Stellungnahme:

Ref kann einige grundlegende Eigenschaften responsiv machen

reaktiv

Das obige Bild zeigt die gemischte Verwendung von reaktiv und ref. Um den Effekt zu erleben, kopieren Sie bitte den folgenden Code.

<Vorlage>
 <div id="app">
 <div v-for="(item, index) in Staat.Personen" :key="index">
  {{ item.name }} ist {{ item.age }} Jahre alt</div>
 <div>
  <h3>Zhangsans Alter ändern</h3>
  <Eingabetyp="Text" v-Modell="zAlter" />
 </div>
 </div>
</Vorlage>

<script lang="ts" setup="props, {emit}">
importiere { reaktiv, ref } von 'vue'
exportiere const zAge = ref(12)
export const state = reaktiv({
 Personen:
 {
  Name: 'zhangsan',
  Alter: zAlter
 },
 {
  Name: 'lisi',
  Alter: 20
 }
 ]
})
</Skript>

berechnet

Stellungnahme:

Wirkung:

Uhreffekt

Stellungnahme:

Wirkung:

Komponentensystem

Globale Registrierung

App.vue

Haupt-JS

Teilregistrierung

App.vue

aufstellen

Requisiten

Deklarieren Sie das Props-Objekt. In watchEffect wird console.log(props.msg) verwendet, um den von der übergeordneten Komponente übergebenen Wert anzuzeigen. Standardwerte und Filterung von Requisiten werden untersucht. Informationen zu bestimmten Funktionen finden Sie in der Funktion der vue2.0-Requisiten

Kontext

Komponentenkontext

emittieren

Deklarieren Sie die Emit-Funktion. Schreiben Sie „emitt“ in „setup="props, { emit }“, andernfalls wird ein Fehler gemeldet. Spezifische Funktionen finden Sie in der Emit-Funktion in vue2.0.

Hier sind einige Beispiele zur Verwendung der Emit-Funktion.

Attribute

Recherchieren…

Spielautomaten

Recherchieren…

Vue-Direktiven

Konzentrieren Sie sich auf das V-Modell, andere Vue-Anweisungen sind dieselben wie bei 2.0

V-Modell

Vue3.0 unterstützt nun mehrere bidirektionale Bindungsparameter, was in Vue2.0 nicht möglich war. Wenn nach V-Model keine weiteren Attribute vorhanden sind, ist der Standardwert innerhalb dieser Komponente modelValue. Wenn Sie V-Model aktualisieren möchten, müssen Sie emit('update:modelValue', data) verwenden, um den Standardwert modelValue von V-Model zu aktualisieren. Wenn nach v-model ein Attribut (dragValue) vorhanden ist, dann ist sein Wert innerhalb dieser Komponente dieser Attributname (dragValue). Wenn Sie den Wert von v-model:dragValue aktualisieren möchten, müssen Sie emit('update:dragValue', data) verwenden, um den benutzerdefinierten Wert von v-model zu aktualisieren.

Weitere Informationen zur Verwendung finden Sie in der offiziellen Dokumentation: https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md

Dies ist das Ende dieses Artikels über die ersten Erfahrungen mit Vue3.0 + TypeScript + Vite. Weitere verwandte Inhalte zu Vue3.0 TypeScript Vite finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!