VUE3 시작하기 예: 간단한 뮤직 플레이어 구축

VUE3 시작하기 예: 간단한 음악 플레이어 구축

Vue는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 핵심 라이브러리가 뷰 계층에만 집중하므로 다른 라이브러리나 프로젝트에 쉽게 통합할 수 있다는 점에서 다른 프레임워크와 다릅니다.

이 기사에서는 Vue3를 사용하여 간단한 음악 플레이어를 구축하는 방법을 보여줍니다. 이 샘플 프로젝트를 통해 구성 요소, 상태 관리 및 이벤트 처리를 포함한 Vue3의 기본 사항을 이해할 수 있습니다.

시작해 보세요!

1. Vue3 설치

먼저 Vue3을 설치해야 합니다. npm이나 Yarn을 사용하여 Vue3을 설치할 수 있습니다.

npm을 사용하는 경우 터미널에 다음 명령을 입력할 수 있습니다.

npm install vue@next

yarn을 사용하는 경우 터미널에 다음 명령을 입력할 수 있습니다.

yarn add vue@next

2. Vue 인스턴스 만들기

빌드를 시작하기 전에 실제 애플리케이션 그 전에 기본 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라는 구성 요소를 생성합니다. 이 구성 요소에는 오디오 요소, 두 개의 버튼 및 일부 반응형 데이터가 포함되어 있습니다.

템플릿에서는 v-if 지시문을 사용하여 재생 변수에 따라 다양한 버튼을 표시합니다.

메소드 객체에서는 오디오 재생 및 일시 중지를 제어하는 ​​데 사용되는 재생 및 일시 중지라는 두 가지 메서드를 정의합니다.

4. Vue 인스턴스에서 음악 플레이어 구성 요소 사용

이제 음악 플레이어 구성 요소가 있으므로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!