Home > Article > Web Front-end > VUE3 Getting Started Example: Making a Simple Video Player
With the continuous emergence of new generation front-end frameworks, VUE3 is highly loved as a fast, flexible, and easy-to-use front-end framework. Next, let's learn the basics of VUE3 and make a simple video player.
1. Install VUE3
First, we need to install VUE3 locally. Open the command line tool and execute the following command:
npm install vue@next
Then, create a new HTML file and introduce 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>
This code first introduces VUE3 and creates an app named "app" root node. Among them,
2. Binding data
In this example, we will use v-model to bind the value of the `` tag to videoSrc so that we can change the video path by setting the value of the input box. We can also use v-bind to bind the src attribute of the video tag to videoSrc:
<div> <input v-model="videoSrc" type="text" placeholder="在这里输入视频地址" /> <br /> <br /> <video ref="video" v-bind:src="videoSrc" controls></video> </div>
Here, we bind the data to an input box and bind the video path to the video tag.
3. Add Control Buttons
Next, we add two event listeners that allow us to add control buttons on the page - one for playing the video and one for pausing the video. .
<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. Summary
Now, we have built a simple VUE3 video player. Through this simple example, you have learned about the basic data binding of VUE3 and how to bind and control the video tag. From this foundation, you can delve deeper into VUE3 and apply it to richer applications.
The emergence of VUE3 allows front-end engineers to get rid of some tedious operations and processes, greatly improving development efficiency. Hope this article is helpful to you.
The above is the detailed content of VUE3 Getting Started Example: Making a Simple Video Player. For more information, please follow other related articles on the PHP Chinese website!