VUE3 入門例: シンプルな音楽プレーヤーの構築

VUE3 入門例: シンプルな音楽プレーヤーの構築

Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。他のフレームワークとは異なり、そのコア ライブラリはビュー レイヤーのみに焦点を当てており、他のライブラリやプロジェクトに簡単に統合できます。

この記事では、Vue3 を使用してシンプルな音楽プレーヤーを構築する方法を説明します。このサンプル プロジェクトでは、コンポーネント、状態管理、イベント処理など、Vue3 の基本を理解できます。 ＃＃＃＃＃＃はじめましょう！

Vue3 のインストール

1. まず、Vue3 をインストールする必要があります。 Vue3 をインストールするには、npm または Yarn を使用できます。

npm を使用する場合は、ターミナルに次のコマンドを入力できます:

npm install vue@next

yarn を使用する場合は、ターミナルに次のコマンドを入力できます:

yarn add vue@next

Vue インスタンスの作成

2. 実際のアプリケーションの構築を開始する前に、基本的な Vue インスタンスを作成しましょう。

次のコードをindex.htmlに追加します:

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

この例では、単にメッセージを出力します。次に、app.js で Vue インスタンスを作成し、それを上記の HTML タグに追加する必要があります。

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

app.mount('#app')

このコードは Vue インスタンスを作成し、data オプションを使用してインスタンスにメッセージ属性を追加します。次に、mount メソッドを使用して、HTML 内の id app を持つインスタンスを div 要素にアタッチします。

ブラウザでindex.htmlを開くと、「Hello Vue!」というメッセージが表示されるはずです。

音楽プレーヤー コンポーネントの作成

3. 次に、音楽プレーヤー コンポーネントを作成します。コンポーネントを使用してコードを整理し、再利用します。

app.js に、次のコードを追加します。

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

このコードは、music-player というコンポーネントを作成します。このコンポーネントには、オーディオ要素、2 つのボタン、およびいくつかの応答データが含まれています。

テンプレートでは、v-if ディレクティブを使用して、再生変数に基づいてさまざまなボタンを表示します。

methods オブジェクトでは、オーディオの再生と一時停止を制御するために使用される、play とpause の 2 つのメソッドを定義します。

Vue インスタンスでの音楽プレーヤー コンポーネントの使用

4. 音楽プレーヤー コンポーネントを作成したので、それを Vue インスタンスで使用する必要があります。

次のコードを 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')

Vue インスタンスでは、5492c27c226dabbfadba542a7351706a タグを使用して音楽プレーヤー コンポーネントを追加しました。プレーヤーのタイトルと曲のファイル パスを Vue インスタンスのデータ プロパティとして設定し、それらを音楽プレーヤー コンポーネントに渡すこともできます。

index.html を開くと、音楽プレーヤーが表示されるはずです。 「再生」ボタンをクリックすると音楽の再生が開始され、「一時停止」ボタンをクリックすると音楽が一時停止されます。

結論

この記事では、Vue3 を使用してシンプルな音楽プレーヤーを構築しました。私たちは段階的に開発を進め、コンポーネント、状態管理、イベント処理などの Vue3 の基本を学びました。

実際のアプリケーションでは、より複雑なロジックとより多くのコンポーネントが必要になる場合がありますが、この例は Vue3 の開始点として使用できます。 Vue3 についてさらに詳しく知りたい場合は、Vue3 の公式ドキュメントを参照してください。

以上がVUE3 入門例: シンプルな音楽プレーヤーの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。