Vue3 Vue イベント処理ガイド

Vue3 Vue イベント処理ガイド

1. 基本的なイベント処理

v-on指令(略して@ ) を使用すると、 DOMイベントをリッスンし、ハンドラー メソッドまたはインラインJavascriptを実行できます。

// v-on ディレクティブ <div v-on:click='handleClick' />

//または

<div @click='handleClick' />

2. 親コンポーネントにカスタムイベントを送信する

どの Web フレームワークでも、子コンポーネントが親コンポーネントにイベントを発行できるようにするのが一般的な使用例です。これは双方向データ バインディングの原則でもあります。

一般的な例としてはinputコンポーネントから親フォームにデータを送信することが挙げられます。

Options APIを使用しているか、 Composition API使用しているかに応じて、イベントを発行するための構文が異なります。

Options APIでは、以下に示すように、単にthis.$emit(eventName, payload ) を呼び出すことができます。

エクスポートデフォルト{
  メソッド: {
    ハンドルアップデート: () => {
      this.$emit('update', 'Hello World')
    }
  }
}


ただし、 Composition API使用方法は異なります。 Vue3が提供するsetupメソッドで、 emitメソッドを使用する必要があります。

contextオブジェクトをインポートする限り、 Options APIと同じ引数を使用して emitting を呼び出すことができます。

エクスポートデフォルト{
  セットアップ(プロパティ、コンテキスト){
    定数handleUpdate = () => {
      context.emit('更新', 'Hello World')
    }

    戻り値: {handleUpdate}
  } 
}

もちろん、私は自分のプロジェクトでデコンストラクションを頻繁に使用します。

エクスポートデフォルト{
  セットアップ(props、{emit}){
    定数handleUpdate = () => {
      出力('更新', 'Hello World')
    }

    戻り値: {handleUpdate}
  } 
}

完璧!

Optionsを使用する場合でもComposition API使用する場合でも、親グループがリッスンする方法は同じです。

<HelloWorld @update='入力更新されました'/>


まず、テンプレート内の$ event訪問傳遞できます。

コンポーネントのemitメソッドに渡された値がある場合、それをインラインで使用するかメソッドを使用するかに応じて、2 つの異なる方法でキャプチャできます。

1 つ目は、テンプレートで$eventを使用して渡された値にアクセスすることです。

<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>


クリック イベントの場合、マウス イベント修飾子を追加して、どのマウス ボタンがイベントをトリガーするかを制限することもできます。 left,rightmiddle 3つがあります。

<!-- これはマウスの左ボタンのみをトリガーします-->
<div @mousedown.left='handleLeftClick'> 左 </div>

4. キーボード修飾子

リッスンできる DOM キーボード イベントは 3 つあります。

<入力
   タイプ='テキスト'
   placeholder='何か入力してください'
   @keypress='ハンドルキーが押された'
   @keydown='handleKeyDown'
   @keyup='handleKeyUp'
/>


通常、特定のキーでこれらのイベントを検出する必要があり、これを行うには 2 つの方法があります。

  1. keycodes
  2. Vue にはいくつかのキーのエイリアスがあります ( entertabdeleteescspaceupdownleftright )
<!-- Enter キーが離されたときもトリガーします -->
<入力
   タイプ='テキスト'
   placeholder='何か入力してください'
   @keyup.enter='ハンドルEnter'
/>

<!-- または -->
<入力
   タイプ='テキスト'
   placeholder='何か入力してください'
   @keyup.13='ハンドルEnter'
/>

5. システム修飾子

プロジェクトによっては、ユーザーが修飾キーを押した場合にのみイベントをトリガーしたい場合があります。 修飾キーは Command キーや Shift キーのようなものです。

Vue には4 つのシステム修飾子があります

  1. shift
  2. alt
  3. ctrl
  4. meta ( macではCMD 、WindowsではWindows Windows鍵)

これは、 Vueアプリケーションでカスタム キーボード ショートカットなどの機能を作成する場合に便利です。

<!-- カスタム ショートカット、Yang は Shift + 8 を使用してリストを作成します -->
<入力
   タイプ='テキスト'
   placeholder='何か入力してください'
   @keyup.shift.56='リストを作成'
/>


Vueドキュメントによると、指定したキーが押され、他のキーが押されていない場合にのみイベントがトリガーされるようにするexact修飾子もあります。

<!-- カスタム ショートカット。Shift + 8 を押すとリストが作成されます -->
<入力
   タイプ='テキスト'
   placeholder='何か入力してください'
   @keyup.shift.56.exact='createList'
/>

6. イベント修飾子

すべてのDOMイベントと同様に、いくつかの修飾子を使用して動作方法を変更できます。 Vueは、伝播を停止し、デフォルトのアクションを防止するための 2 つの組み込みDOMイベント修飾子があります。

<!-- デフォルトの動作を防止する -->
<フォーム@submit.prevent>

<!-- バブルを停止 -->
<フォーム @submit.stop='submitForm'>

<!-- デフォルトの動作とバブリングを防ぐ -->
<フォーム @submit.stop.prevent='送信フォーム'>

<!-- イベントが複数回トリガーされるのを防ぐ -->
<div @close.once='handleClose'> 

コードをデプロイした後で、どのようなバグが存在するかをリアルタイムで知る方法はありません。後からこれらのバグを解決するために、ログのデバッグに多くの時間を費やしていました。ここで、便利なバグ監視ツールである Fundebug をお勧めしたいと思います。

これで、Vue3 の Vue イベント処理ガイドに関するこの記事は終了です。Vue イベント処理ガイドの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueのクリックイベントのアンチシェイクとスロットリング処理の詳細な説明
  • Vueのイベント処理の原理とプロセスの詳細な説明
  • Vueイベント処理の詳細な説明
  • Vue.js フロントエンドフレームワークにおけるイベント処理の概要
  • Vueのイベント処理とイベント修飾子の詳細な説明
  • Vue でのマウスホイール イベントと互換性処理の導入
  • Vueでのイベント処理の詳細

<<:  Win10+Ubuntu 20.04 LTS デュアル システム インストール (UEFI + GPT) (画像とテキスト、複数の画像には注意)

>>:  MySQL サーバーの接続、切断、および cmd 操作

推薦する

MySQL のキーとインデックスの違い

まずはコードを見てみましょう: ALTER TABLE reportblockdetail ADD ...

MySQLテーブルにタイムスタンプを追加するいくつかの方法

シナリオ:テーブル内のデータは、同期ツールを使用して他のデータベースと同期する必要があり、増分同期に...

Python3.6-MySql 挿入ファイルパス、バックスラッシュをなくす解決策

以下のように表示されます。上記のように、置き換えるだけです。 Python3.6-MySql でファ...

Linux仮想メモリについての簡単な説明

目次起源仮想メモリページングとページテーブルメモリのアドレス指定と割り当て関数プロセスメモリ管理デー...

HTML ul 順序なしテーブルのアプリケーションネスト

順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...

Win10にmysql8.0.15 winx64をインストールしてサーバーに接続する際に問題が発生しました

1. mysql-8.0.15をダウンロード、インストール、設定する1. 公式サイト (https:...

dockerでpdflatex環境を設定する方法

技術的背景Latex は文書作成、特に記事作成には欠かせないツールであり、必須のテキスト組版ツールで...

Dockerプライベートライブラリの実装

プライベート Docker レジストリのインストールとデプロイは、Docker テクノロジーを導入、...

MySQL を解凍してインストールおよび完全に削除する方法の詳細なグラフィック説明

1. MySQLをインストールする(1)ダウンロードしたMySQLの圧縮ファイルをMySQLをインス...

DOSBox を起動後に自動的にコマンドを実行する方法

DOSBox を使用すると、Windows で DOS をシミュレートし、楽しい作業を行うことができ...

MySQL curdate() 関数の詳細な例

MySQL CURDATE関数の紹介文字列コンテキストまたは数値コンテキストの YYYMMDD 形式...

MySQL 5.7.9 シャットダウン構文例の詳細な説明

mysql-5.7.9 では、ついにシャットダウン構文が提供されます。以前は、MySQL データベー...

最も完全なpackage.json分析

目次1. 概要2. 名前フィールド3. バージョンフィールド4. 説明フィールド5. キーワードフィ...

Linux 時間サブシステムの時間表現例の詳細な説明

序文Linux カーネルでは、元のコードとの互換性を保つため、または特定の仕様に準拠するため、また現...

Tomcatサーバーのセキュリティ設定方法

Tomcat は、Java Community Process を通じて Sun が開発した、広く使...