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>

（３）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 をよろしくお願いいたします。