Exemple de démarrage de VUE3 : création d'un lecteur vidéo simple-Voir.js-php.cn

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

PHPz

Libérer： 2023-06-15 21:42:26

original

2421 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!