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データベースのパスワードを忘れた場合の解決策

ブログ    

推薦する

MySQL 8.0.21 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.21のインストールと設定方法を記録してみんなで共有します。 1. ダウンロード1...

VSCode と SSH を使用したリモート開発

0. リモート開発が必要な理由組み込み Linux を開発する場合、便宜上、通常は Windows ...

React スキャフォールディングの構築方法を学ぶ

1. フロントエンドエンジニアリングの複雑さいくつかの小さなデモ プログラムを開発するだけであれば、...

div+cssとウェブ標準ページの利点

div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...

MYSQL パフォーマンス アナライザー EXPLAIN 使用例分析

この記事では、例を使用して MYSQL パフォーマンス アナライザー EXPLAIN の使用方法を説...

単一の MySQL テーブルで数千万のデータを処理するアイデアを共有する

目次プロジェクトの背景改善案データ特性を観察するマルチプロセスアイデアの要約データ処理スキルプロジェ...

LinuxベースのSelenium環境を構成し、操作を実装する

1. Linux で Selenium を使用する1. Chromeをインストールする次のコマンドを...

chkconfig および systemctl コマンドを使用して Linux サービスを有効または無効にする方法

これは Linux 管理者にとって重要な (そして素晴らしい) トピックなので、誰もが Linux ...

MySQL のテーブル内のレコード数を制限する方法

目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...

Vue シングルページ アプリケーションで Markdown レンダリングを実装する

以前、Markdown をレンダリングするときに、mavonEditor のプレビュー モードを使用...

mini-vueレンダリングのシンプルな実装

目次序文ターゲット最初のステップ:ステップ2:ステップ3:ステップ4:要約する序文現在主流のフレーム...

ウェブサイトのデザインでは色の階層感覚に注意を払う必要があります

最近、私はデザインには階層感覚が必要だと言っています。この階層感覚には、色の重ね合わせや要素の重ね合...

Uniappの小規模プログラム開発経験

1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...

レム適応の一般的なパッケージ3つについて

序文以前、rem適応についての記事を書きましたが、具体的なパッケージは紹介しませんでした。今日は、よ...

HTMLは無効なテーブル幅設定の問題を解決します

テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...