ホームページ ウェブフロントエンド Vue.js いくつかの vue イベント修飾子を簡単に分析した記事

いくつかの vue イベント修飾子を簡単に分析した記事

Mar 28, 2023 pm 04:42 PM
vue修飾子

この記事はフロントエンドに関する関連知識を提供します。主に vue のいくつかのイベント修飾子について説明します。興味のある友人は参照してください。すべての人に役立つことを願っています。

いくつかの vue イベント修飾子を簡単に分析した記事

#プロジェクト開発中に vue のキーボードイベントに遭遇しました。コード スニペット:

<div class="query-form-left">
   <i-Form :model="formItem" inline>
       <form-item  >
           <i-input style="width:200px"  placeholder="名称" v-model="formItem.name" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>
           <i-input placeholder="负责人" v-model="formItem.ownerUserName" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>    
           <i-Button type="ghost" @click="queryTableDataByAction">查询</i-Button>
       </form-item>
   </i-Form></div>
ログイン後にコピー

コード スニペットでは、キーボード イベントの後に必ず

.naitvie が存在することがわかりました。最初は理由がわかりませんでしたが、確認したところ、 vue には独自のイベント配信メカニズムがあり、たとえば @click などのイベントは vue によってカプセル化されます。コンポーネントのルート要素でネイティブ イベントをリッスンしたい場合は、上記のコード スニペットで v-on 修飾子 .native

@keyup を使用する必要があります。 .enter はカプセル化されたコンポーネント (プロジェクトで使用される iView コンポーネント) に記述されるため、実際に DOM ネイティブ イベントを処理するいくつかのものに追加の識別子 を追加する必要があります。 ##、input で直接使用する場合は追加する必要はありません。 さらに、

vue は多くの修飾子を提供します

1. イベント修飾子

.stop

クリック イベントが伝播し続けるのを防止します.prevent
送信イベント ページをリロードしなくなりました.capture
イベント リスナーを追加するときは、イベント キャプチャ モードを使用します。つまり、要素自体によってトリガーされたイベントが最初にここで処理され、その後、処理のために内部要素に渡されます.self
ハンドラー関数は、event.target が現在の要素自体である場合にのみトリガーされます。つまり、イベントは内部要素 .once
からトリガーされません。クリック イベントは 1 回だけトリガーされます .passive
スクロール イベントのデフォルトの動作 (つまり、スクロール動作) は、event.preventDefault() の場合を含め、すぐにトリガーされます

注:

修飾子は連結できます。修飾子を使用する場合、順序が重要です。対応するコードは同じ順序で生成されます。したがって、@click.prevent.self を使用するとすべてのクリックが防止されますが、@click.self.prevent は要素自体のクリックのみが防止されます。

2. キー修飾子

はキーコードを直接使用できますが、すべてを覚えるのは難しいため、Vue は一般的に使用されるキー エイリアス

# を提供します。 # #.enter

Enter key

.tab Tab space key
.delete (「delete」キーと「backspace」キーをキャプチャします)
.esc 終了
.space スペースバー
.up 上キー
.down 下キー
.left 左キー
.right 右キー
3. システム修飾キー

は OK 次の修飾子を使用します対応するキーが押されたときにのみマウスまたはキーボードのイベントをトリガーするリスナーを実装します。

.ctrl

.alt .shift .metaここにのみ記載されていますvue イベント修飾子。修飾子の詳細については、vue 公式ドキュメントを参照してください。

毎日少しずつ要約してください... 毎日少しずつ得てください... 少しずつ進歩しましょう毎日... (^ -^)

おすすめの勉強法:「vue.js」ビデオチュートリアル #"

以上がいくつかの vue イベント修飾子を簡単に分析した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vueでコンポーネントのライフサイクルフックを構成する方法 Vueでコンポーネントのライフサイクルフックを構成する方法 Mar 04, 2025 pm 03:29 PM

この記事では、Vue.jsコンポーネントのエクスポートデフォルトの役割を明確にし、ライフサイクルフックを構成するのではなく、エクスポートのみのためであることを強調しています。 ライフサイクルフックは、コンポーネントのオプションオブジェクト内のメソッドとして定義されます。

vue.jsでカスタムプラグインを作成および使用するにはどうすればよいですか? vue.jsでカスタムプラグインを作成および使用するにはどうすればよいですか? Mar 14, 2025 pm 07:07 PM

記事では、開発、統合、メンテナンスのベストプラクティスなど、カスタムVue.jsプラグインの作成と使用について説明します。

VUEエクスポートデフォルトでコンポーネントの監視を構成する方法 VUEエクスポートデフォルトでコンポーネントの監視を構成する方法 Mar 04, 2025 pm 03:30 PM

この記事では、エクスポートのデフォルトを使用するときにVUE.JSコンポーネントウォッチ機能を明確にします。 プロパティ固有の監視、賢明な深いオプションの使用、および最適化されたハンドラー機能を通じて、効率的な時計の使用を強調しています。 ベストプラクティス

Vuexとは何ですか?VUEアプリケーションでの州の管理に使用するにはどうすればよいですか? Vuexとは何ですか?VUEアプリケーションでの州の管理に使用するにはどうすればよいですか? Mar 11, 2025 pm 07:23 PM

この記事では、vue.jsの州管理図書館であるVuexについて説明します。 コアの概念(状態、ゲッター、突然変異、行動)を詳述し、使用法を示し、より単純な代替案よりも大きなプロジェクトの利点を強調します。 デバッグと構造化

Vue.js(コンポーネントベースのアーキテクチャ、仮想DOM、リアクティブデータバインディング)の主な機能は何ですか? Vue.js(コンポーネントベースのアーキテクチャ、仮想DOM、リアクティブデータバインディング)の主な機能は何ですか? Mar 14, 2025 pm 07:05 PM

VUE.JSは、コンポーネントベースのアーキテクチャ、パフォーマンスのための仮想DOM、およびリアルタイムのUI更新用のリアクティブデータバインディングでWeb開発を強化します。

VUEルーター(動的ルート、ネストされたルート、ルートガード)を使用して高度なルーティングテクニックを実装するにはどうすればよいですか? VUEルーター(動的ルート、ネストされたルート、ルートガード)を使用して高度なルーティングテクニックを実装するにはどうすればよいですか? Mar 11, 2025 pm 07:22 PM

この記事では、高度なVueルーターのテクニックを調べます。 動的なルーティング(パラメーターを使用)、階層ナビゲーション用のネストされたルート、およびアクセスとデータフェッチを制御するためのルートガードをカバーします。 複雑なルート社を管理するためのベストプラクティス

さまざまなビルドターゲット(開発、生産)を使用するようにVue CLIを構成するにはどうすればよいですか? さまざまなビルドターゲット(開発、生産)を使用するようにVue CLIを構成するにはどうすればよいですか? Mar 18, 2025 pm 12:34 PM

この記事では、さまざまなビルドターゲットにVue CLIを構成し、環境を切り替え、生産ビルドを最適化し、デバッグ用のソースマップを確保する方法について説明します。

コンテナ化された展開にDockerを使用してVueを使用するにはどうすればよいですか? コンテナ化された展開にDockerを使用してVueを使用するにはどうすればよいですか? Mar 14, 2025 pm 07:00 PM

この記事では、VUEを使用してDockerを展開するために説明し、コンテナ内のVUEアプリケーションのセットアップ、最適化、管理、およびパフォーマンス監視に焦点を当てています。

See all articles