Exemple de démarrage de VUE3 : création d'un lecteur de musique simple

Exemple de démarrage de VUE3 : créer un lecteur de musique simple

Vue est un framework progressif pour la création d'interfaces utilisateur. Il diffère des autres frameworks en ce sens que sa bibliothèque principale se concentre uniquement sur la couche de vue, ce qui facilite son intégration dans d'autres bibliothèques ou projets.

Dans cet article, nous montrerons comment créer un lecteur de musique simple à l'aide de Vue3. Cet exemple de projet nous permettra de comprendre les bases de Vue3, y compris les composants, la gestion des états et la gestion des événements.

Commençons !

1. Installer Vue3

Tout d'abord, nous devons installer Vue3. Nous pouvons utiliser npm ou Yarn pour installer Vue3.

Si vous utilisez npm, vous pouvez saisir la commande suivante dans le terminal :

npm install vue@next

Si vous utilisez fil, vous pouvez saisir la commande suivante dans le terminal :

yarn add vue@next

2. Créer une instance Vue

Avant de commencer à construire l'application réelle Avant cela, créons une instance de base de Vue.

Ajoutez le code suivant dans index.html :

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

Dans cet exemple, nous générons simplement un message. Nous devons maintenant créer une instance Vue dans app.js et l'attacher à la balise HTML ci-dessus :

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

app.mount('#app')

Ce code crée une instance Vue et y ajoute un attribut de message à l'aide de l'option data. Ensuite, nous utilisons la méthode mount pour attacher l'instance à l'élément div avec l'application id dans le HTML.

Ouvrez index.html dans votre navigateur et vous devriez voir le message "Bonjour Vue !"

3. Créer un composant de lecteur de musique

Ensuite, nous créerons un composant de lecteur de musique. Nous utiliserons des composants pour organiser et réutiliser notre code.

Dans app.js, nous ajoutons le code suivant :

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
    }
  }
})

Ce code crée un composant appelé music-player. Ce composant contient un élément audio, deux boutons et des données réactives.

Dans le modèle, nous utilisons la directive v-if pour afficher différents boutons en fonction de la variable de lecture.

Dans l'objet méthodes, nous définissons deux méthodes, play et pause, qui sont utilisées pour contrôler la lecture et la pause de l'audio.

4. Utiliser le composant lecteur de musique dans une instance Vue

Maintenant que nous avons un composant lecteur de musique, nous devons l'utiliser dans une instance Vue.

Ajoutez le code suivant dans app.js :

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')

Dans l'instance Vue, nous avons utilisé la balise Nous pouvons également définir le titre du lecteur et le chemin du fichier de chanson comme propriétés de données de l'instance Vue et les transmettre au composant lecteur de musique.

Ouvrez index.html et vous devriez voir le lecteur de musique. Cliquer sur le bouton « Play » lancera la lecture de la musique, tandis que cliquer sur le bouton « Pause » mettra la musique en pause.

Conclusion

Dans cet article, nous avons construit un lecteur de musique simple en utilisant Vue3. Nous avons développé étape par étape et appris les bases de Vue3, notamment les composants, la gestion des états et la gestion des événements.

Une application réelle peut nécessiter une logique plus complexe et plus de composants, mais cet exemple peut être utilisé comme point de départ pour Vue3. Si vous souhaitez en savoir plus sur Vue3, veuillez consulter la documentation officielle de Vue3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!