Rumah > Artikel > hujung hadapan web > Contoh Permulaan VUE3: Membuat Pemain Video Mudah
Contoh Permulaan VUE3: Membuat Pemain Video Mudah
- PHPzasal
- 2023-06-15 21:42:262366semak imbas
Dengan kemunculan berterusan rangka kerja hadapan generasi baharu, VUE3 disukai sebagai rangka kerja bahagian hadapan yang pantas, fleksibel dan mudah digunakan. Seterusnya, mari kita pelajari asas VUE3 dan buat pemain video mudah.
1 Pasang VUE3
Mula-mula, kita perlu memasang VUE3 secara setempat. Buka alat baris arahan dan laksanakan arahan berikut:
npm install vue@next
Kemudian, cipta fail HTML baharu dan perkenalkan 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>Kod ini mula-mula memperkenalkan VUE3 dan mencipta apl bernama akar "aplikasi" nod. Antaranya,
- videoSrc digunakan untuk menyimpan laluan video
- kaedah playVideo digunakan untuk memainkan video
- jedaKaedah video digunakan untuk menjeda video
2. Ikat data
Dalam contoh ini, kita akan menggunakan v-model untuk mengikat nilai tag `` ke videoSrc supaya kita boleh menukar laluan video dengan menetapkan nilai kotak input. Kami juga boleh menggunakan v-bind untuk mengikat atribut src teg video ke videoSrc:
<div>
<input v-model="videoSrc" type="text" placeholder="在这里输入视频地址" />
<br />
<br />
<video ref="video" v-bind:src="videoSrc" controls></video>
</div>Di sini, kami mengikat data pada kotak input dan mengikat laluan video ke teg video.
3. Tambahkan butang kawalan
Seterusnya, kami menambah dua pendengar acara yang membolehkan kami menambah butang kawalan pada halaman - satu untuk memainkan video dan satu untuk menjeda 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. Ringkasan
Kini, kami telah membina pemain video VUE3 yang ringkas. Melalui contoh mudah ini, anda telah mempelajari tentang pengikatan data asas VUE3 dan cara mengikat serta mengawal teg video. Daripada asas ini, anda boleh mendalami VUE3 dan menerapkannya pada aplikasi yang lebih kaya.
Kemunculan VUE3 membebaskan jurutera bahagian hadapan daripada beberapa operasi dan proses yang membosankan, sekali gus meningkatkan kecekapan pembangunan. Semoga artikel ini bermanfaat kepada anda.
Atas ialah kandungan terperinci Contoh Permulaan VUE3: Membuat Pemain Video Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!