Vue.js フロントエンドフレームワークにおけるイベント処理の概要

Vue.js フロントエンドフレームワークにおけるイベント処理の概要

1. v-onイベント監視

DOM イベントをリッスンするには、v-on ディレクティブを使用します。このディレクティブは通常、テンプレート内で直接使用され、イベントがトリガーされたときに JavaScript コードを実行します。

v-onディレクティブの基本的な使用法

(1)HTMLでv-onディレクティブを使用し、その後にすべてのネイティブイベント名を続けます。基本的な使い方は以下のとおりです。

<button v-on:click="show">表示</button>

クリック イベントを show メソッドにバインドします。「表示」ボタンをクリックすると、show() メソッドが実行されます。show() メソッドは Vue インスタンスで定義されています。

(2) v-onディレクティブを使用する場合、Vue.jsはv-onディレクティブの短縮形である「@」を提供します。上記のコードは次のように書き直すことができます。

<button @click="show">表示</button>

(3)v-on指令の簡単な使用法は以下のとおりです。

<div id="ボックス">
			<!--v-on の基本的な使用法 -->
			<button v-on:click="count1++">カウント</button>
			<p>ボタンは {{count1}} 回クリックされました</p>
			<!--v-on の簡単な使用法-->
			<button @click="count2++">カウント</button>
			<p>ボタンは {{count2}} 回クリックされました</p>
</div>
		   <script type="text/javascript">
				var vm = 新しい Vue({
					el : '#box',
					データ:{
						カウント1:0,
						カウント2:0
					}
					
				});
			</スクリプト>

v-on ディレクティブの簡単な使用法を以下に示します。

ここに画像の説明を挿入

イベント処理方法

v-on ディレクティブを使用する場合は、v-on ディレクティブを介してイベントをメソッドにバインドする必要があり、バインドされたメソッドは methods オプションでイベント ハンドラーとして定義されます。サンプルコードは次のとおりです。

<div id="ボックス">
			<button v-on:click="show">表示</button>
		</div>
		   <script type="text/javascript">
				var vm = 新しい Vue({
					el : '#box',
					データ:{
						名前:「シャオミン」
						年齢: 29歳
						職業:「俳優」
					},
					方法:{
						表示:関数(){
							alert('名前:'+this.name+'年齢:'+this.age+'職業:'+this.occupation);
						}
					}
					
				});
			</スクリプト>

クリック イベントを display メソッドにバインドする v-on ディレクティブの結果は次のようになります。

ここに画像の説明を挿入

インラインJavaScriptステートメントの使用

(1) v-onディレクティブは、メソッドに直接バインドするだけでなく、インラインJavaScriptステートメントもサポートしますが、使用できるステートメントは1つだけです。サンプルコードは次のとおりです。

<div id="ボックス">
			<button v-on:click="show('Tomorrow's Star')">表示</button>
		</div>
		   <script type="text/javascript">
				var vm = 新しい Vue({
					el : '#box',
					方法:{
						表示:関数(メッセージ){
							alert('メッセージ: ' + メッセージ);
						}
					}
					
				});

インライン JavaScript ステートメントを使用した結果を以下に示します。

ここに画像の説明を挿入

(2)インラインステートメントでネイティブDOMイベントオブジェクトを取得する必要がある場合は、特別な変数$eventをメソッドに渡すことができます。サンプルコードは次のとおりです。

<div id="ボックス">
			<a href="http://www.baidu.com" rel="external nofollow" v-on:click="show('Tomorrow's Star',$event)">{{message}}</a>
		</div>
		   <script type="text/javascript">
				var vm = 新しい Vue({
					el : '#box',
					データ:{
						メッセージ: 'こんにちは'
					},
					方法:{
						表示:関数(メッセージ1,e){
							e.preventDefault();
							アラート(メッセージ1);
						}
					}
					
				});
			</スクリプト>

show() メソッドに値を渡すだけでなく、特別な変数 $event も渡されます。この変数の機能は、ハイパーリンクがクリックされたときにネイティブ DOM イベントを処理し、preventDefault() メソッドを適用してハイパーリンクがジャンプしないようにすることです。 「Hello」ハイパーリンクをクリックすると、ダイアログ ボックスがポップアップ表示され、実行結果は次の図のようになります。

ここに画像の説明を挿入

2. イベント処理修飾子

いわゆる修飾語は、半角ピリオドで示される特殊な接尾辞です。 Vue.js は、イベント修飾子やキー修飾子など、v-on ディレクティブに複数の修飾子を提供します。
イベント修飾子<br /> イベント ハンドラーでは、特定の機能を実装するために、preventDefault() または stopPropagation() メソッドが呼び出されることがよくあります。これらの DOM イベントの詳細を処理するために、Vue.js は v-on ディレクティブのイベント修飾子を提供します。よく使用されるイベント修飾子とその説明を次の表に示します。

ここに画像の説明を挿入

修飾子は連続して使用することができ、イベント処理メソッドをバインドせずに修飾子のみを使用することもできます。イベント修飾子は次のように使用されます。

<!-- クリック イベントがそれ以上伝播しないようにする -->
<a v-on:click.stop="何かする"></a>
<!-- デフォルトでフォームの送信を禁止する -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- ハンドラー関数は、現在の要素自体からイベントがトリガーされた場合にのみ呼び出されます -->
<div v-on:click.self="何かを行う"></div>
<!-- 修飾子の連鎖により、フォームがデフォルトで送信されなくなり、バブルも防止されます -->
<a v-on:click.stop.prevent="doSomething"></a>
<!-- 修飾子のみ、イベントバインディングなし -->
<フォーム v-on:submit.prevent></フォーム>

以下は、イベントのバブリングを停止するために .stop 修飾子を適用するサンプル コードです。

<div id="ボックス">
			<div v-on:click="show('div イベントトリガー')">
				<button v-on:click.stop="show('button event trigger')">表示</button>
			</div>
		</div>
		   <script type="text/javascript">
				var vm = 新しい Vue({
					el : '#box',
					方法:{
						表示:関数(メッセージ){
							アラート(メッセージ);
						}
					}
					
				});
			</スクリプト>

「表示」ボタンをクリックすると、そのボタンのクリック イベントのみがトリガーされます。ボタンに .stop 修飾子が使用されていない場合、「表示」ボタンをクリックすると、ボタンのクリック イベントがトリガーされるだけでなく、div のクリック イベントもトリガーされ、2 つのダイアログ ボックスがポップアップ表示されます。実行結果は下の図に示されています。
(1).stop修飾子を使用する:

ここに画像の説明を挿入

(2).stop修飾子を使用せずに「OK」をクリックします。

ここに画像の説明を挿入
ここに画像の説明を挿入

キー修飾子

Vue.js は、イベント修飾子に加えて、キーボード イベントでのキーの押下をリッスンするための v-on ディレクティブのキー修飾子も提供します。キーボード イベントがトリガーされると、キーの keyCode 値を検出する必要があります。コードは次のとおりです。

<input v-on:keyup.13="送信">

v-on ディレクティブを適用して、キーボードの keyup イベントを監視します。キーボードの Enter キーの keyCode 値は 13 です。したがって、テキスト ボックスにコンテンツを入力した後、Enter キーがクリックされると、submit() メソッドが呼び出されます。
上記のコードでは、エイリアスを使用できます。Enter キーのエイリアスは Enter です。コードは次のとおりです。

<入力v-on:keyup.enter="送信">

よく使用されるボタンに対して Vue.js によって提供されるエイリアスを次の表に示します。

ここに画像の説明を挿入

注: 今後も Vue.js フロントエンドフレームワーク: フォームコントロールバインディングについて引き続きフォローしていきます。どうぞご支援とご注目をお願いします。

これで、Vue.js フロントエンドフレームワークのイベント処理の概要に関するこの記事は終了です。Vue.js イベント処理の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueのクリックイベントのアンチシェイクとスロットリング処理の詳細な説明
  • Vueのイベント処理の原理とプロセスの詳細な説明
  • Vueイベント処理の詳細な説明
  • Vue3 Vue イベント処理ガイド
  • Vueのイベント処理とイベント修飾子の詳細な説明
  • Vue でのマウスホイール イベントと互換性処理の導入
  • Vueでのイベント処理の詳細

<<:  Linux で so または実行可能プログラムの依存ライブラリを表示します

>>:  MACでMYSQLデータベースのパスワードを忘れた場合の解決策

推薦する

インターフェース設計の10の一般的なルール

<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...

JavaScriptで配列を作成する方法の詳細な説明

目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...

Linux 上の LAN 内のすべてのホスト名 (コンピュータ名) をすばやく一覧表示するスクリプト

最近、LAN 内のすべてのホスト名を一覧表示する必要があります (SMB プロトコル)。しかし、fi...

MySQLクエリステートメント内のユーザー変数のコード分析

前回の記事では、MySQL 最適化の概要 - クエリの合計数を紹介しました。この記事では、クエリ ス...

vue-seamless-scrollがスクロールしていいねをするときのデータ同期の問題を解決する

VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...

TypeScript ジェネリックを簡単に説明する方法

目次概要ジェネリック医薬品とはビルドシステムジェネリック医薬品の一般的な理解ジェネリッククラスジェネ...

ミニプログラム開発ツールのソースコードからの基本実装の分析

目次ミニプログラム開発者ツールのソースコードを表示する方法ミニプログラムアーキテクチャ設計1. ミニ...

Docker-Composeコマンドの使い方の詳しい説明

Docker コンテナはさまざまな方法で管理およびデプロイできます。 Docker コマンドを直接使...

MySQL 最適化ソリューション リファレンス

最適化によって発生する可能性のある問題最適化は必ずしも単純な環境で実行されるわけではなく、実稼働環境...

MySQL のデータ型とスキーマの最適化の詳細な説明

現在、MySQL の最適化について学習しています。この記事では、データ型とスキーマの最適化について紹...

Centos7 システムでの python2 と python3 の共存

最初のステップは、Python のバージョン番号とインストール パスを確認することです。 上記のビュ...

Vueでaxiosをカプセル化する方法

目次1. インストール1. はじめに3. インターフェースルートアドレス4. 使用例4.1 ダウンロ...

解決策 - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: 権限が不十分です

1) jdkファイルが保存されているフォルダパスを入力します私はここにいますusr/local/jd...

MySQL内部一時テーブルの具体的な使用法

目次連合テーブルの初期化ステートメントの実行連合の結果ユニオンオールグループ化十分なメモリステートメ...

mysqlパラメータsql_safe_updatesを使用して更新/削除範囲を制限する方法の詳細な説明

序文皆さんご存知のとおり、MySQL の運用・保守において、更新/削除条件が誤っているためにデータが...