VUE3-Erste-Schritte-Beispiel: Erstellen eines einfachen Musik-Players

VUE3-Erste-Schritte-Beispiel: Erstellen eines einfachen Musik-Players

Vue ist ein progressives Framework zum Erstellen von Benutzeroberflächen. Es unterscheidet sich von anderen Frameworks dadurch, dass sich seine Kernbibliothek nur auf die Ansichtsebene konzentriert, was die Integration in andere Bibliotheken oder Projekte erleichtert.

In diesem Artikel zeigen wir, wie man mit Vue3 einen einfachen Musikplayer erstellt. Mit diesem Beispielprojekt können wir die Grundlagen von Vue3 verstehen, einschließlich Komponenten, Statusverwaltung und Ereignisbehandlung.

Lass uns anfangen!

1. Vue3 installieren

Zuerst müssen wir Vue3 installieren. Wir können npm oder Yarn verwenden, um Vue3 zu installieren.

Wenn Sie npm verwenden, können Sie den folgenden Befehl im Terminal eingeben:

npm install vue@next

Wenn Sie Yarn verwenden, können Sie den folgenden Befehl im Terminal eingeben:

yarn add vue@next

2. Erstellen Sie eine Vue-Instanz

Bevor wir mit dem Erstellen beginnen die eigentliche Anwendung. Erstellen wir vorher eine grundlegende Vue-Instanz.

Fügen Sie den folgenden Code in index.html hinzu:

<div id="app">
    {{ message }}
</div>

In diesem Beispiel geben wir einfach eine Nachricht aus. Jetzt müssen wir eine Vue-Instanz in app.js erstellen und sie an das obige HTML-Tag anhängen:

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

app.mount('#app')

Dieser Code erstellt eine Vue-Instanz und fügt ihr mithilfe der Datenoption ein Nachrichtenattribut hinzu. Als nächstes verwenden wir die Mount-Methode, um die Instanz mit der ID-App im HTML an das div-Element anzuhängen.

Öffnen Sie index.html in Ihrem Browser und Sie sollten die Meldung „Hallo Vue!“ sehen.

3. Erstellen Sie eine Musik-Player-Komponente

Als nächstes erstellen wir eine Musik-Player-Komponente. Wir verwenden Komponenten, um unseren Code zu organisieren und wiederzuverwenden.

In app.js fügen wir den folgenden Code hinzu:

app.component('music-player', {
  template: `
    <div>
      <h2>{{ title }}</h2>
      <audio :src="song"></audio>
      <button v-if="!playing" @click="play">Play</button>
      <button v-if="playing" @click="pause">Pause</button>
    </div>
  `,
  data() {
    return {
      title: 'Never Gonna Give You Up',
      song: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
      playing: false
    }
  },
  methods: {
    play() {
      const audioElem = this.$el.querySelector('audio')
      audioElem.play()
      this.playing = true
    },
    pause() {
      const audioElem = this.$el.querySelector('audio')
      audioElem.pause()
      this.playing = false
    }
  }
})

Dieser Code erstellt eine Komponente namens Music-Player. Diese Komponente enthält ein Audioelement, zwei Schaltflächen und einige Reaktionsdaten.

In der Vorlage verwenden wir die v-if-Direktive, um verschiedene Schaltflächen basierend auf der Wiedergabevariablen anzuzeigen.

Im Methodenobjekt definieren wir zwei Methoden, Wiedergabe und Pause, die zur Steuerung der Wiedergabe und Pause von Audio verwendet werden.

4. Verwenden der Musik-Player-Komponente in einer Vue-Instanz

Da wir nun eine Musik-Player-Komponente haben, müssen wir sie in einer Vue-Instanz verwenden.

Fügen Sie den folgenden Code in app.js hinzu:

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

app.component('music-player', {
  template: `
    <div>
      <h2>{{ title }}</h2>
      <audio :src="song"></audio>
      <button v-if="!playing" @click="play">Play</button>
      <button v-if="playing" @click="pause">Pause</button>
    </div>
  `,
  data() {
    return {
      title: 'Never Gonna Give You Up',
      song: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
      playing: false
    }
  },
  methods: {
    play() {
      const audioElem = this.$el.querySelector('audio')
      audioElem.play()
      this.playing = true
    },
    pause() {
      const audioElem = this.$el.querySelector('audio')
      audioElem.pause()
      this.playing = false
    }
  }
})

app.mount('#app')

In der Vue-Instanz haben wir das Tag 5492c27c226dabbfadba542a7351706a verwendet. Wir können auch den Titel und den Songdateipfad des Players als Dateneigenschaften der Vue-Instanz festlegen und sie an die Musik-Player-Komponente übergeben.

Öffnen Sie index.html und Sie sollten den Musikplayer sehen. Durch Klicken auf die Schaltfläche „Play“ wird die Wiedergabe der Musik gestartet, während durch Klicken auf die Schaltfläche „Pause“ die Musik angehalten wird.

Fazit

In diesem Artikel haben wir einen einfachen Musikplayer mit Vue3 erstellt. Wir haben uns Schritt für Schritt weiterentwickelt und die Grundlagen von Vue3 erlernt, einschließlich Komponenten, Zustandsverwaltung und Ereignisbehandlung.

Eine echte Anwendung erfordert möglicherweise eine komplexere Logik und mehr Komponenten, aber dieses Beispiel kann als Ausgangspunkt für Vue3 verwendet werden. Wenn Sie mehr über Vue3 erfahren möchten, schauen Sie sich bitte die offizielle Vue3-Dokumentation an.

Das obige ist der detaillierte Inhalt vonVUE3-Erste-Schritte-Beispiel: Erstellen eines einfachen Musik-Players. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!