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

推薦する

display または visibility を通じて HTML 要素を表示または非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...

EChartsマウスイベント処理方法の詳細な説明

イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...

Docker ベースの Selenium 分散環境の構築

1.画像をダウンロードするdocker pull selenium/hub docker pull ...

Windows10 HomeバージョンにDockerをインストールするときに発生する問題の概要

Docker ダウンロード アドレス: http://get.daocloud.io/#instal...

イラスト風ウェブサイトホームページデザイン ウェブサイトデザインの新トレンド

視覚効果が非常に美しく、訪問者に強い印象を残すことがわかります。さらに、重要なポイントが強調され、訴...

WIN2008 サーバーのコマンド ラインを使用して IIS7 コンポーネントをインストールおよびアンインストールする方法

注意: .NET FrameWork はコア モードで実行できないため、コア インストール モードの...

プライベートDockerリポジトリであるHarborをインストールするための詳細な手順

Harborのインストールは非常に簡単ですが、Dockerログインで行き詰まってしまいました。このブ...

レスポンシブウェブデザインを実現するためにIEでCSS3メディアクエリをサポートする

今日の画面解像度は、320 ピクセル (iPhone) ほど小さいものから、2560 ピクセル以上 ...

マスタークラスタに再参加する k8s ノードの実装

1. ノードを削除するkubectl delete node node01を実行します。 2. この...

VueはGraphVisを使用して無限に拡張された関係グラフを開発します

1. GraphVis 公式サイトにアクセスして、対応する js をダウンロードします。js の新し...

JavaScript の基本演算子

目次1. オペレーター要約する1. オペレーター演算子は、代入、比較、算術演算などの機能を実装するた...

CSSトランジションは高さを変更することで要素を拡大したり縮小したりします。

一般的な開発ニーズとして、要素の一部を必要になるまで折りたたんでおきたいことが挙げられます。 Boo...

Angular の 12 の典型的な問題について簡単に説明します

目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...

MySQL ストアド プロシージャのエラー処理例の詳細な説明

この記事では、例を使用して MySQL ストアド プロシージャのエラー処理について説明します。ご参考...

MySQL 8.0 の binlog の詳細な説明

1 はじめにバイナリ ログは、データを持つ、またはデータを変更する可能性がある SQL ステートメン...