Erste Schritte mit Vue3

Vue.js ist ein progressives JavaScript-Framework, das hauptsächlich zum Erstellen von Benutzeroberflächen verwendet wird.

Wenn Sie gerade erst anfangen, Vue zu lernen, empfehlen wir nicht, das vue-cli-Kommandozeilenwerkzeug zum Erstellen von Projekten zu verwenden. Ein einfacherer Weg ist, die Datei vue.global.js direkt in die Seite einzubinden, um zu testen und zu lernen.

Eine Anwendung in Vue3 wird mit der Funktion createApp erstellt, das Syntaxformat ist wie folgt:

const app = Vue.createApp({ /* 根组件选项 */ })

Die an createApp übergebenen Optionen werden verwendet, um die Root-Komponente zu konfigurieren.

Die Anwendungsinstanz darf erst gerendert werden, nachdem die.mount()Methode aufgerufen wurde..mount()Die Methode akzeptiert einen Parameter "container", der ein tatsächliches DOM-Element oder eine CSS-Selektor-Zeichenfolge sein kann:

<div id="app"></div>
app.mount('#app')

Ein einfaches Beispiel:

Vue.createApp(HelloVueApp).mount('#hello-vue')

Der Parameter von createApp ist die Root-Komponente (HelloVueApp). Beim Mounten der Anwendung ist diese Komponente der Ausgangspunkt des Renderns.

Eine Anwendung muss an ein DOM-Element gemountet werden. Der obige Code verwendetmount('#hello-vue'), um die Vue-Anwendung HelloVueApp in

das Element zu mounten.

Als Nächstes lernen wir anhand desHello Vue!!Codes.

Vue 3.0 Beispiel

<div id="hello-vue" class="Demo"> {{ message }} </div> ​ <script> const HelloVueApp = { data() { return { message: 'Hello Vue!!' } } } ​ Vue.createApp(HelloVueApp).mount('#hello-vue') </script>

Ausprobieren »

Klicke auf die Schaltfläche „Try it“, um das Online-Beispiel anzuzeigen.

Im obigen Beispiel binden wir zunächst die JS-Datei von Vue in die HTML-Seite ein:

<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>

In der HTML-Seite gibt es ein div-Element:

<div id="hello-vue" class="demo">
  {{ message }}
</div>

mount('#hello-vue')montiert die Vue-Anwendung HelloVueApp in

das Element.

{{ }}Wird verwendet, um Objekteigenschaften und Rückgabewerte von Funktionen auszugeben.

{{ message }}entspricht demmessage-Wert in der Anwendung.

Template der Root-Komponente

Das Template der Root-Komponente ist normalerweise in der Komponentendefinition eingebettet, kann aber auch separat angegeben werden, indem das Template direkt im Container am Mount-Punkt definiert wird.

Beispiel

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

<script>
const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    };
    return { count, increment };
  }
});

app.mount('#app')
</script>

Ausprobieren »

Wenn für die Root-Komponente keine template-Option gesetzt ist, verwendet Vue automatisch den innerHTML des Containers als Template.

Code-Erklärung:

  • Verwendungsetupfunction: In Vue 3 wird die Komponentenlogik normalerweisesetupin der Funktion definiert. Hier verwenden wir diesetupFunktion zum Definieren reaktiver Datencountund Methoden.increment。

  • Verwendungref: ImsetupFunktion verwenden wirrefum reaktive Daten zu erstellen.count。

  • DefiniereincrementMethode: Definiere eineincrementMethode zum Erhöhencountden Wert.

  • Reaktive Daten und Methoden zurückgeben: In dersetupFunktion, gibcountundincrementzurück, damit auf sie zugegriffen und sie im Template verwendet werden können.

data-Option

data-Optionist eine Funktion. Vue ruft diese Funktion während des Prozesses zum Erstellen einer neuen Komponenteninstanz auf. Sie sollte ein Objekt zurückgeben, und dann umschließt Vue es mit dem Reaktivitätssystem und speichert es in der Komponenteninstanz als $data.

Beispiel

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count)       // => 4
document.write("<br>")
// Das Ändern des Werts von vm.count aktualisiert auch $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// und umgekehrt
vm.$data.count = 6
document.write(vm.count) // => 6

Ausprobieren »

Die oben genannten Instanz-Eigenschaften werden nur hinzugefügt, wenn die Instanz zum ersten Mal erstellt wird, daher müssen Sie sicherstellen, dass sie alle in dem von der data-Funktion zurückgegebenen Objekt enthalten sind.

Methoden

Wir können der Komponente Methoden mit dermethods-Option hinzufügen, die ein Objekt der erforderlichen Methoden enthält.

Im folgenden Beispiel haben wir die methods-Option hinzugefügt, die dieincrement()-Methode enthält:

Beispiel

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` verweist auf die Komponenteninstanz
      this.count++
    }
  }
})

const vm = app.mount('#app')

document.write(vm.count) // => 4
document.write("<br>")
vm.increment()

document.write(vm.count) // => 5

Ausprobieren »
Andere Erweiterungen