Contoh Permulaan VUE3: Membuat Pemain Video Mudah-View.js-php.cn

Contoh Permulaan VUE3: Membuat Pemain Video Mudah

PHPz

Lepaskan： 2023-06-15 21:42:26

asal

2420 orang telah melayarinya

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!