いくつかの 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 イベント修飾子を簡単に分析した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。