1. 基本的なイベント処理
// v-on ディレクティブ <div v-on:click='handleClick' /> //または <div @click='handleClick' /> 2. 親コンポーネントにカスタムイベントを送信するどの Web フレームワークでも、子コンポーネントが親コンポーネントにイベントを発行できるようにするのが一般的な使用例です。これは双方向データ バインディングの原則でもあります。 一般的な例としては エクスポートデフォルト{ メソッド: { ハンドルアップデート: () => { this.$emit('update', 'Hello World') } } } ただし、 エクスポートデフォルト{ セットアップ(プロパティ、コンテキスト){ 定数handleUpdate = () => { context.emit('更新', 'Hello World') } 戻り値: {handleUpdate} } } もちろん、私は自分のプロジェクトでデコンストラクションを頻繁に使用します。 エクスポートデフォルト{ セットアップ(props、{emit}){ 定数handleUpdate = () => { 出力('更新', 'Hello World') } 戻り値: {handleUpdate} } } 完璧! <HelloWorld @update='入力更新されました'/> まず、テンプレート内の コンポーネントの 1 つ目は、テンプレートで <HelloWorld @update='inputUpdated($event)'/> 2 番目の方法は、イベントを処理するメソッドを使用することです。渡された値は、最初のパラメーターとして自動的にメソッドに渡されます。 <HelloWorld @update='入力更新されました'/> // ... メソッド: { 入力更新: (値) => { console.log(value) // これも動作します } } マウス修飾子以下は、v-on ディレクティブでキャプチャできる主な DOM マウス イベントのリストです。 <div @mousedown='handleEvent' @mouseup='handleEvent' @click='handleEvent' @dblclick='イベント処理' @mousemove='handleEvent' @mouseover='handleEvent' @mousewheel='handleEvent' @mouseout='handleEvent' > 私と交流しましょう! </div> クリック イベントの場合、マウス イベント修飾子を追加して、どのマウス ボタンがイベントをトリガーするかを制限することもできます。 <!-- これはマウスの左ボタンのみをトリガーします--> <div @mousedown.left='handleLeftClick'> 左 </div> 4. キーボード修飾子リッスンできる DOM キーボード イベントは 3 つあります。 <入力 タイプ='テキスト' placeholder='何か入力してください' @keypress='ハンドルキーが押された' @keydown='handleKeyDown' @keyup='handleKeyUp' /> 通常、特定のキーでこれらのイベントを検出する必要があり、これを行うには 2 つの方法があります。
<!-- Enter キーが離されたときもトリガーします --> <入力 タイプ='テキスト' placeholder='何か入力してください' @keyup.enter='ハンドルEnter' /> <!-- または --> <入力 タイプ='テキスト' placeholder='何か入力してください' @keyup.13='ハンドルEnter' /> 5. システム修飾子プロジェクトによっては、ユーザーが修飾キーを押した場合にのみイベントをトリガーしたい場合があります。 修飾キーは Command キーや Shift キーのようなものです。 Vue には4 つのシステム修飾子があります。
これは、 <!-- カスタム ショートカット、Yang は Shift + 8 を使用してリストを作成します --> <入力 タイプ='テキスト' placeholder='何か入力してください' @keyup.shift.56='リストを作成' />
<!-- カスタム ショートカット。Shift + 8 を押すとリストが作成されます --> <入力 タイプ='テキスト' placeholder='何か入力してください' @keyup.shift.56.exact='createList' /> 6. イベント修飾子すべての <!-- デフォルトの動作を防止する --> <フォーム@submit.prevent> <!-- バブルを停止 --> <フォーム @submit.stop='submitForm'> <!-- デフォルトの動作とバブリングを防ぐ --> <フォーム @submit.stop.prevent='送信フォーム'> <!-- イベントが複数回トリガーされるのを防ぐ --> <div @close.once='handleClose'> コードをデプロイした後で、どのようなバグが存在するかをリアルタイムで知る方法はありません。後からこれらのバグを解決するために、ログのデバッグに多くの時間を費やしていました。ここで、便利なバグ監視ツールである Fundebug をお勧めしたいと思います。 これで、Vue3 の Vue イベント処理ガイドに関するこの記事は終了です。Vue イベント処理ガイドの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Win10+Ubuntu 20.04 LTS デュアル システム インストール (UEFI + GPT) (画像とテキスト、複数の画像には注意)
>>: MySQL サーバーの接続、切断、および cmd 操作
場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...
イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...
1.画像をダウンロードするdocker pull selenium/hub docker pull ...
Docker ダウンロード アドレス: http://get.daocloud.io/#instal...
視覚効果が非常に美しく、訪問者に強い印象を残すことがわかります。さらに、重要なポイントが強調され、訴...
注意: .NET FrameWork はコア モードで実行できないため、コア インストール モードの...
Harborのインストールは非常に簡単ですが、Dockerログインで行き詰まってしまいました。このブ...
今日の画面解像度は、320 ピクセル (iPhone) ほど小さいものから、2560 ピクセル以上 ...
1. ノードを削除するkubectl delete node node01を実行します。 2. この...
1. GraphVis 公式サイトにアクセスして、対応する js をダウンロードします。js の新し...
目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...
一般的な開発ニーズとして、要素の一部を必要になるまで折りたたんでおきたいことが挙げられます。 Boo...
目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...
この記事では、例を使用して MySQL ストアド プロシージャのエラー処理について説明します。ご参考...
1 はじめにバイナリ ログは、データを持つ、またはデータを変更する可能性がある SQL ステートメン...