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 ディレクティブに複数の修飾子を提供します。 修飾子は連続して使用することができ、イベント処理メソッドをバインドせずに修飾子のみを使用することもできます。イベント修飾子は次のように使用されます。 <!-- クリック イベントがそれ以上伝播しないようにする --> <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 つのダイアログ ボックスがポップアップ表示されます。実行結果は下の図に示されています。 (2).stop修飾子を使用せずに「OK」をクリックします。 キー修飾子Vue.js は、イベント修飾子に加えて、キーボード イベントでのキーの押下をリッスンするための v-on ディレクティブのキー修飾子も提供します。キーボード イベントがトリガーされると、キーの keyCode 値を検出する必要があります。コードは次のとおりです。 <input v-on:keyup.13="送信"> v-on ディレクティブを適用して、キーボードの keyup イベントを監視します。キーボードの Enter キーの keyCode 値は 13 です。したがって、テキスト ボックスにコンテンツを入力した後、Enter キーがクリックされると、submit() メソッドが呼び出されます。 <入力v-on:keyup.enter="送信"> よく使用されるボタンに対して Vue.js によって提供されるエイリアスを次の表に示します。
これで、Vue.js フロントエンドフレームワークのイベント処理の概要に関するこの記事は終了です。Vue.js イベント処理の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux で so または実行可能プログラムの依存ライブラリを表示します
>>: MACでMYSQLデータベースのパスワードを忘れた場合の解決策
MySQL 8.0.21のインストールと設定方法を記録してみんなで共有します。 1. ダウンロード1...
0. リモート開発が必要な理由組み込み Linux を開発する場合、便宜上、通常は Windows ...
1. フロントエンドエンジニアリングの複雑さいくつかの小さなデモ プログラムを開発するだけであれば、...
div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...
この記事では、例を使用して MYSQL パフォーマンス アナライザー EXPLAIN の使用方法を説...
目次プロジェクトの背景改善案データ特性を観察するマルチプロセスアイデアの要約データ処理スキルプロジェ...
1. Linux で Selenium を使用する1. Chromeをインストールする次のコマンドを...
これは Linux 管理者にとって重要な (そして素晴らしい) トピックなので、誰もが Linux ...
目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...
以前、Markdown をレンダリングするときに、mavonEditor のプレビュー モードを使用...
目次序文ターゲット最初のステップ:ステップ2:ステップ3:ステップ4:要約する序文現在主流のフレーム...
最近、私はデザインには階層感覚が必要だと言っています。この階層感覚には、色の重ね合わせや要素の重ね合...
1. 新しいUIプロジェクトを作成するまず、私たちの UI は ColorUI に基づいています。C...
序文以前、rem適応についての記事を書きましたが、具体的なパッケージは紹介しませんでした。今日は、よ...
テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...