ホームページ > 記事 > ウェブフロントエンド > VUE3 入門チュートリアル: データ バインディングとイベント処理
VUE3 入門チュートリアル: データ バインディングとイベント処理
- WBOYオリジナル
- 2023-06-15 22:18:143465ブラウズ
VUE3 は JavaScript フレームワークに基づく UI ライブラリであり、フロントエンド開発で広く使用されています。この記事では、初心者向けに VUE3 のデータ バインディングとイベント処理を紹介します。
1. データ バインディング
データ バインディングは VUE3 の最も重要な機能で、データの変更をページに同期できるようにデータをページにバインドするために使用されます。 VUE3 は MVVM (Model-View-ViewModel) 開発モデルを採用しており、モデル データとビューを双方向にバインドしてデータ同期を実現できます。実際の開発では、innerHTML などの HTML タグの属性にデータをバインドする必要があります。
以下は簡単なデータ バインディングの例です:
<!DOCTYPE html>
<html>
<head>
<title>VUE3数据绑定示例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue3!'
}
}
})
app.mount('#app')
</script>
</body>
</html>上記のコードでは、最初に VUE3 の JavaScript ファイルを導入し、次に「app」という ID を持つ div を定義しました。 「{{ message }}」はデータを p タグにバインドします。次に、データ内の Vue インスタンスとメッセージ属性を定義します。その初期値は「Hello, Vue3!」です。最後に、app.mount 関数を使用して、Vue インスタンスを ID「app」の div にマウントしました。このように、データが変更されると、p タグの内容も変更されます。
2. イベント処理
VUE3 のイベント処理は他の JavaScript フレームワークと似ており、イベントは v-on 命令を通じてバインドされます。たとえば、クリック イベントをボタンにバインドできます:
<div id="app">
<button v-on:click="handleClick">Click me</button>
</div>
<script>
const app = Vue.createApp({
methods: {
handleClick() {
alert('You clicked me!')
}
}
})
app.mount('#app')
</script>上記のコードでは、ID が「app」の div を定義し、v-on:click ディレクティブを通じてクリック イベントをバインドします。ユーザーがボタンをクリックすると、handleClick 関数がトリガーされ、プロンプト ボックスがポップアップ表示されます。
クリック イベントに加えて、VUE3 は次のような他の多くのイベントもサポートしています。
- input: テキスト ボックス入力イベント
- submit: フォーム送信イベント
- keyup、keydown: キーボードイベント
- mouseover、mouseout: マウスイベント
- ...
実際の開発では、イベント処理を書くことができます。 function 上のコードに示すように、Vue インスタンスのメソッド属性内。
3. 概要
この記事の導入部を通じて、VUE3 のデータ バインディングとイベント処理メカニズムを理解しました。これら 2 つのメカニズムをマスターした後、独自のアプリケーションの開発を開始できます。 。次回も引き続き、VUE3のその他の機能を紹介していきます。
以上がVUE3 入門チュートリアル: データ バインディングとイベント処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。