Contoh Permulaan VUE3: Membina Pemain Muzik Mudah

VUE3 Contoh Bermula: Membina Pemain Muzik Mudah

Vue ialah rangka kerja progresif untuk membina antara muka pengguna. Ia berbeza daripada rangka kerja lain kerana perpustakaan terasnya hanya memfokuskan pada lapisan paparan, menjadikannya mudah untuk menyepadukannya ke dalam perpustakaan atau projek lain.

Dalam artikel ini, kami akan menunjukkan cara membina pemain muzik mudah menggunakan Vue3. Projek sampel ini akan membolehkan kami memahami asas Vue3, termasuk komponen, pengurusan negeri dan pengendalian acara.

Jom mulakan!

1. Pasang Vue3

Mula-mula, kita perlu memasang Vue3. Kita boleh menggunakan npm atau benang untuk memasang Vue3.

Jika anda menggunakan npm, anda boleh memasukkan arahan berikut dalam terminal:

npm install vue@next

Jika anda menggunakan benang, anda boleh memasukkan arahan berikut dalam terminal:

yarn add vue@next

2. Buat contoh Vue

Sebelum kita mula membina aplikasi sebenar, mari buat tika Vue asas.

Tambah kod berikut dalam index.html:

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

Dalam contoh ini, kami hanya mengeluarkan mesej. Sekarang, kita perlu mencipta tika Vue dalam app.js dan melampirkannya pada teg HTML di atas:

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

app.mount('#app')

Kod ini mencipta tika Vue dan menambahkan atribut mesej padanya menggunakan pilihan data. Seterusnya, kami menggunakan kaedah pelekap untuk melampirkan contoh pada elemen div dalam HTML dengan apl id.

Buka index.html dalam penyemak imbas anda dan anda akan melihat mesej "Hello Vue!"

3. Buat komponen pemain muzik

Seterusnya, kami akan mencipta komponen pemain muzik. Kami akan menggunakan komponen untuk menyusun dan menggunakan semula kod kami.

Dalam app.js, kami menambah kod berikut:

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

Kod ini mencipta komponen yang dipanggil music-player. Komponen ini mengandungi elemen audio, dua butang dan beberapa data responsif.

Dalam templat, kami menggunakan arahan v-if untuk memaparkan butang berbeza berdasarkan pembolehubah main.

Dalam objek kaedah, kami mentakrifkan dua kaedah, main dan jeda, yang digunakan untuk mengawal main balik dan jeda audio.

4. Menggunakan komponen pemain muzik dalam tika Vue

Sekarang kita mempunyai komponen pemain muzik, kita perlu menggunakannya dalam tika Vue.

Tambahkan kod berikut dalam 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')

Dalam contoh Vue, kami menggunakan teg Kami juga boleh menetapkan tajuk pemain dan laluan fail lagu sebagai sifat data bagi contoh Vue dan menyerahkannya kepada komponen pemain muzik.

Buka index.html dan anda sepatutnya melihat pemain muzik. Mengklik butang "Main" akan mula memainkan muzik, manakala mengklik butang "Jeda" akan menjeda muzik.

Kesimpulan

Dalam artikel ini, kami membina pemain muzik ringkas menggunakan Vue3. Kami membangunkan langkah demi langkah dan mempelajari asas Vue3, termasuk komponen, pengurusan negeri dan pengendalian acara.

Aplikasi sebenar mungkin memerlukan logik yang lebih kompleks dan lebih banyak komponen, tetapi contoh ini boleh digunakan sebagai titik permulaan untuk Vue3. Jika anda ingin mengetahui lebih lanjut tentang Vue3, sila lihat dokumentasi rasmi Vue3.

Atas ialah kandungan terperinci Contoh Permulaan VUE3: Membina Pemain Muzik Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!