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 操作
まずはコードを見てみましょう: ALTER TABLE reportblockdetail ADD ...
シナリオ:テーブル内のデータは、同期ツールを使用して他のデータベースと同期する必要があり、増分同期に...
以下のように表示されます。上記のように、置き換えるだけです。 Python3.6-MySql でファ...
目次起源仮想メモリページングとページテーブルメモリのアドレス指定と割り当て関数プロセスメモリ管理デー...
順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...
1. mysql-8.0.15をダウンロード、インストール、設定する1. 公式サイト (https:...
技術的背景Latex は文書作成、特に記事作成には欠かせないツールであり、必須のテキスト組版ツールで...
プライベート Docker レジストリのインストールとデプロイは、Docker テクノロジーを導入、...
1. MySQLをインストールする(1)ダウンロードしたMySQLの圧縮ファイルをMySQLをインス...
DOSBox を使用すると、Windows で DOS をシミュレートし、楽しい作業を行うことができ...
MySQL CURDATE関数の紹介文字列コンテキストまたは数値コンテキストの YYYMMDD 形式...
mysql-5.7.9 では、ついにシャットダウン構文が提供されます。以前は、MySQL データベー...
目次1. 概要2. 名前フィールド3. バージョンフィールド4. 説明フィールド5. キーワードフィ...
序文Linux カーネルでは、元のコードとの互換性を保つため、または特定の仕様に準拠するため、また現...
Tomcat は、Java Community Process を通じて Sun が開発した、広く使...