ホームページ > 記事 > ウェブフロントエンド > Vue はイベントをどのように処理しますか?関連する基礎知識の紹介
Vue はイベントをどのように処理しますか?関連する基礎知識の紹介
- 青灯夜游転載
- 2021-06-02 13:45:522330ブラウズ
この記事では、Vue イベント処理の基礎知識を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
Vue イベント処理は、すべての Vue プロジェクトに必要な要素です。ユーザー入力の取得、データの共有、その他多くのクリエイティブな方法に使用されます。 [関連する推奨事項: "vue.js チュートリアル "]
この記事では、イベントを処理するための基本的な知識を紹介し、いくつかのコード例を示します。ここには、私が最も役立つと思われるヒントや方法のみが含まれています。Vue でできることすべてについて詳しく知りたい場合は、Vue のドキュメントを参照してください。
基本的なイベント処理
v-on ディレクティブ (短縮して @) を使用すると、DOM イベントをリッスンしてハンドラー メソッドを実行したり、インラインJavaScript。
// v-on 指令 <div v-on:click='handleClick' /> // OR <div @click='handleClick' />
カスタム イベントを親コンポーネントに送信する
Web フレームワークの一般的な使用例は、子コンポーネントが親コンポーネントにイベントを送信できるようにすることです。これは 2 つの原則でもあります。 -way データバインディング。
一般的な例は、input コンポーネントから親フォームにデータを送信することです。
イベントを発行するための構文は、Options API を使用しているか Composition API を使用しているかによって異なります。
オプション API では、単純に this.$emit(eventName, payload) を呼び出すことができます。例は次のとおりです。
export default {
methods: {
handleUpdate: () => {
this.$emit('update', 'Hello World')
}
}
} ただし、Composition API はこのように使われ方が異なります。 Vue3 が提供する setup メソッドの emit メソッドを使用する必要があります。
コンテキスト オブジェクトがインポートされている限り、オプション API と同じパラメーターを使用して emit を呼び出すことができます。
export default {
setup (props, context) {
const handleUpdate = () => {
context.emit('update', 'Hello World')
}
return { handleUpdate }
}
}もちろん、私は自分のプロジェクトで分解をよく使用します:
export default {
setup (props, { emit }) {
const handleUpdate = () => {
emit('update', 'Hello World')
}
return { handleUpdate }
}
}完璧です!
Options を使用するか、Composition API を使用するかに関係なく、親グループがリッスンする方法は同じです。
<HelloWorld @update='inputUpdated'/>
まず、テンプレートの $event を使用して、渡された値にアクセスできます。
コンポーネントの Emit メソッドに渡された値がある場合、インラインを使用するかメソッドを使用するかに応じて、2 つの異なる方法でそれをキャプチャできます。
1 つ目は、テンプレートで $event を使用して、渡された値にアクセスすることです。
<HelloWorld @update='inputUpdated($event)'/>
2 番目に、メソッドを使用してイベントを処理すると、渡された値が最初のパラメーターとしてメソッドに自動的に渡されます。
<HelloWorld @update='inputUpdated'/>
// ...
methods: {
inputUpdated: (value) => {
console.log(value) // WORKS TOO
}
}マウス修飾子
v-on ディレクティブでキャプチャできる主な DOM マウス イベントのリストは次のとおりです:
<div @mousedown='handleEvent' @mouseup='handleEvent' @click='handleEvent' @dblclick='handleEvent' @mousemove='handleEvent' @mouseover='handleEvent' @mousewheel='handleEvent' @mouseout='handleEvent' > Interact with Me! </div>
クリックの場合イベントに加えて、マウス イベント修飾子を追加して、どのマウス ボタンがイベントをトリガーするかを制限することもできます。 left、right、middleの 3 つがあります。
<!-- 这只会触发鼠标左键 --> <div @mousedown.left='handleLeftClick'> Left </div>
キーボード修飾子
3 つの DOM キーボード イベントをリッスンできます:
<input type='text' placeholder='Type something' @keypress='handleKeyPressed' @keydown='handleKeyDown' @keyup='handleKeyUp' />
通常、特定のキーでこれらのイベントを検出したいのですが、その方法は 2 つあります。それをやれ。
キーコード
Vue には特定のキー (
enter、tab、# #) のエイリアスがあります。 #delete、esc、space、up、down、left、right)
<!-- Trigger even when enter is released --> <input type='text' placeholder='Type something' @keyup.enter='handleEnter' /> <!-- OR --> <input type='text' placeholder='Type something' @keyup.13='handleEnter' />システム修飾子一部のプロジェクトでは、ユーザーが修飾キーを押した場合にのみイベントをトリガーしたい場合があります。修飾キーは、
Command または shift に似ています。
- シフト
- alt ##ctrl
- #メタ (Mac では CMD、Windows では Windows キー)
- これは、Vue アプリケーションでカスタム キーボード ショートカットなどを作成する場合に便利です。
<!-- 自定义快捷方式，杨使用Shift + 8 创建列表 --> <input type='text' placeholder='Type something' @keyup.shift.56='createList' />Vue ドキュメントには、指定したキーが押され、他のキーが押されなかった場合にのみイベントがトリガーされるようにする
exact
修飾子もあります。<!-- 自定义快捷方式，只有Shift + 8 这两个按下时才会创建列表--> <input type='text' placeholder='Type something' @keyup.shift.56.exact='createList' />
すべての DOM イベントについて、いくつかの修飾子を使用してその実行方法を変更できます。伝播を停止するか、デフォルトのアクションを防止するかに関係なく、Vue には 2 つの組み込み DOM イベント修飾子があります。 <!-- 阻止默认行为 -->
<form @submit.prevent>
<!-- 阻止冒泡 -->
<form @submit.stop='submitForm'>
<!-- 阻止默认行为和冒泡 -->
<form @submit.stop.prevent='submitForm'>
<!-- 防止事件被多次触发 -->
<p @close.once='handleClose'>
英語の元のアドレス: https://segmentfault.com/a/1190000039938779
著者: Fernando Doglio翻訳者: フロントエンド Xiaozhiをご覧ください。 ！
プログラミング関連の知識について詳しくは、
プログラミング ビデオ
以上がVue はイベントをどのように処理しますか?関連する基礎知識の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。