Maison > Article > interface Web > Exemple de démarrage de VUE3 : création d'un lecteur vidéo simple

Exemple de démarrage de VUE3 : création d'un lecteur vidéo simple

PHPzoriginal: 2023-06-15 21:42:262422parcourir

Avec l'émergence continue de frameworks front-end de nouvelle génération, VUE3 est apprécié comme un framework front-end rapide, flexible et facile à utiliser. Ensuite, apprenons les bases de VUE3 et créons un simple lecteur vidéo.

1. Installez VUE3

Tout d'abord, nous devons installer VUE3 localement. Ouvrez l'outil de ligne de commande et exécutez la commande suivante :

npm install vue@next

Ensuite, créez un nouveau fichier HTML et introduisez 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>

Ce code introduit d'abord VUE3 et crée un nœud racine nommé "app". Parmi eux,

videoSrc est utilisé pour stocker le chemin de la vidéo
la méthode playVideo est utilisée pour lire la vidéo
la méthodepauseVideo est utilisée pour mettre la vidéo en pause

2. Lier les données

Dans cet exemple, nous utilisera v-model pour La valeur de la balise `` est liée à videoSrc afin que nous puissions changer le chemin vidéo en définissant la valeur de la zone de saisie. Nous pouvons également utiliser v-bind pour lier l'attribut src de la balise vidéo à videoSrc :

<div>
    <input v-model="videoSrc" type="text" placeholder="在这里输入视频地址" />
    <br />
    <br />
    <video ref="video" v-bind:src="videoSrc" controls></video>
</div>

Ici, nous lions les données à une zone de saisie et lions le chemin vidéo à la balise vidéo.

3. Ajouter des boutons de contrôle

Ensuite, nous ajoutons deux écouteurs d'événements qui nous permettent d'ajouter des boutons de contrôle sur la page - un pour lire la vidéo et un pour mettre la vidéo en pause.

<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. Résumé

Maintenant, nous avons construit un simple lecteur vidéo VUE3. Grâce à cet exemple simple, vous avez découvert la liaison de données de base de VUE3 et comment lier et contrôler la balise vidéo. À partir de là, vous pouvez approfondir VUE3 et l’appliquer à des applications plus riches.

L'émergence de VUE3 permet aux ingénieurs front-end de se débarrasser de certaines opérations et processus fastidieux, améliorant ainsi considérablement l'efficacité du développement. J'espère que cet article vous sera utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Premiers pas avec le développement VUE3 : utiliser Vue.js pour communiquer entre les composantsArticle suivant：Premiers pas avec le développement VUE3 : utiliser Vue.js pour communiquer entre les composants

Articles Liés

Voir plus