VUE3 시작하기 예: 간단한 비디오 플레이어 만들기
- PHPz원래의
- 2023-06-15 21:42:262422검색
신세대 프런트엔드 프레임워크가 지속적으로 등장하면서 VUE3는 빠르고 유연하며 사용하기 쉬운 프런트엔드 프레임워크로 사랑받고 있습니다. 다음으로 VUE3의 기본을 배우고 간단한 동영상 플레이어를 만들어 보겠습니다.
1. VUE3 설치
먼저 VUE3를 로컬에 설치해야 합니다. 명령줄 도구를 열고 다음 명령을 실행합니다.
npm install vue@next
그런 다음 새 HTML 파일을 만들고 VUE3을 도입합니다.
<!doctype html>
<html>
<head>
<title>VUE3视频播放器</title>
</head>
<body>
<div id="app">
<video src="" controls></video>
</div>
<script type="module">
import {createApp} from 'vue';
const app = createApp({
data() {
return {
videoSrc: ''
};
},
methods: {
playVideo() {
this.$refs.video.play();
},
pauseVideo() {
this.$refs.video.pause();
}
}
});
app.mount('#app');
</script>
</body>
</html>이 코드는 먼저 VUE3을 도입하고 "app"이라는 루트 노드를 생성합니다. 그 중
- videoSrc는 비디오의 경로를 저장하는 데 사용됩니다.
- playVideo 메서드는 비디오를 재생하는 데 사용됩니다.
- pauseVideo 메서드는 비디오를 일시 중지하는 데 사용됩니다.
2. 데이터 바인딩
이 예에서는 v-model을 사용하여 `` 태그의 값은 videoSrc에 바인딩되므로 입력 상자의 값을 설정하여 비디오 경로를 변경할 수 있습니다. 또한 v-bind를 사용하여 video 태그의 src 속성을 videoSrc에 바인딩할 수 있습니다.
<div>
<input v-model="videoSrc" type="text" placeholder="在这里输入视频地址" />
<br />
<br />
<video ref="video" v-bind:src="videoSrc" controls></video>
</div>여기에서는 데이터를 입력 상자에 바인딩하고 비디오 경로를 video 태그에 바인딩합니다.
3. 컨트롤 버튼 추가
다음으로 페이지에 컨트롤 버튼을 추가할 수 있는 두 개의 이벤트 리스너를 추가합니다. 하나는 비디오를 재생하고 다른 하나는 비디오를 일시 중지합니다.
<div>
<input v-model="videoSrc" type="text" placeholder="在这里输入视频地址" />
<br />
<br />
<video ref="video" v-bind:src="videoSrc" controls></video>
<br />
<br />
<button v-on:click="playVideo()">播放</button>
<button v-on:click="pauseVideo()">暂停</button>
</div>4. 요약
이제 간단한 VUE3 비디오 플레이어를 만들었습니다. 이 간단한 예제를 통해 VUE3의 기본 데이터 바인딩과 비디오 태그 바인딩 및 제어 방법에 대해 배웠습니다. 여기에서 VUE3에 대해 더 깊이 탐구하고 이를 더 풍부한 애플리케이션에 적용할 수 있습니다.
VUE3의 등장으로 프런트엔드 엔지니어는 지루한 작업과 프로세스를 없애고 개발 효율성을 크게 높일 수 있습니다. 이 기사가 도움이 되기를 바랍니다.
위 내용은 VUE3 시작하기 예: 간단한 비디오 플레이어 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!