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データベースのパスワードを忘れた場合の解決策
<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...
目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...
最近、LAN 内のすべてのホスト名を一覧表示する必要があります (SMB プロトコル)。しかし、fi...
前回の記事では、MySQL 最適化の概要 - クエリの合計数を紹介しました。この記事では、クエリ ス...
VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...
目次概要ジェネリック医薬品とはビルドシステムジェネリック医薬品の一般的な理解ジェネリッククラスジェネ...
目次ミニプログラム開発者ツールのソースコードを表示する方法ミニプログラムアーキテクチャ設計1. ミニ...
Docker コンテナはさまざまな方法で管理およびデプロイできます。 Docker コマンドを直接使...
最適化によって発生する可能性のある問題最適化は必ずしも単純な環境で実行されるわけではなく、実稼働環境...
現在、MySQL の最適化について学習しています。この記事では、データ型とスキーマの最適化について紹...
最初のステップは、Python のバージョン番号とインストール パスを確認することです。 上記のビュ...
目次1. インストール1. はじめに3. インターフェースルートアドレス4. 使用例4.1 ダウンロ...
1) jdkファイルが保存されているフォルダパスを入力します私はここにいますusr/local/jd...
目次連合テーブルの初期化ステートメントの実行連合の結果ユニオンオールグループ化十分なメモリステートメ...
序文皆さんご存知のとおり、MySQL の運用・保守において、更新/削除条件が誤っているためにデータが...