ホームページ > 記事 > ウェブフロントエンド > VUE3 入門例: 簡単なビデオ プレーヤーの作成
VUE3 入門例: 簡単なビデオ プレーヤーの作成
- PHPzオリジナル
- 2023-06-15 21:42:262422ブラウズ
新世代のフロントエンド フレームワークが次々と登場する中、VUE3 は高速かつ柔軟で使いやすいフロントエンド フレームワークとして高く評価されています。次に、VUE3 の基本を学び、簡単なビデオ プレーヤーを作成しましょう。
1. VUE3 をインストールする
まず、VUE3 をローカルにインストールする必要があります。コマンド ライン ツールを開き、次のコマンドを実行します。
npm install vue@next
次に、新しい HTML ファイルを作成し、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>このコードでは、最初に VUE3 を導入し、「app」root という名前のアプリを作成します。ノード。このうち、
- videoSrc は、ビデオのパスを保存するために使用されます。
- playVideo メソッドは、ビデオを再生するために使用されます。
- PauseVideo メソッドは、ビデオを一時停止するために使用されます。 video
2. データのバインド
この例では、v-model を使用して `` タグの値を videoSrc にバインドし、次のようにしてビデオ パスを変更できるようにします。入力ボックスの値を設定します。 v-bind を使用して、video タグの src 属性を videoSrc にバインドすることもできます。
<div>
<input v-model="videoSrc" type="text" placeholder="在这里输入视频地址" />
<br />
<br />
<video ref="video" v-bind:src="videoSrc" controls></video>
</div>ここでは、データを入力ボックスにバインドし、ビデオ パスを video タグにバインドします。
3. コントロール ボタンの追加
次に、ページにコントロール ボタンを追加できる 2 つのイベント リスナーを追加します (1 つはビデオの再生用、もう 1 つはビデオの一時停止用)。
<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. 概要
これで、シンプルな VUE3 ビデオ プレーヤーを構築できました。この簡単な例を通じて、VUE3 の基本的なデータ バインディングと、ビデオ タグをバインドして制御する方法について学びました。この基礎に基づいて、VUE3 をさらに深く掘り下げて、より豊富なアプリケーションに適用できます。
VUE3 の登場により、フロントエンド エンジニアは面倒な操作やプロセスを取り除くことができ、開発効率が大幅に向上します。この記事がお役に立てば幸いです。
以上がVUE3 入門例: 簡単なビデオ プレーヤーの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。