ホームページ > 記事 > ウェブフロントエンド > Vue エラーの解決方法: v-on を正しく使用してキーボード イベントを監視できない
Vue エラーの解決方法: v-on を正しく使用してキーボード イベントを監視できない
人気のフロントエンド フレームワークとして、Vue.js はビルドに役立ちます。効率的かつ柔軟で保守可能な Web アプリケーション。その中で、Vue は、ユーザー操作の処理を容易にするために DOM イベントを監視する v-on 命令を提供します。ただし、v-on を使用してキーボード イベントを監視すると、この機能を正しく使用できないエラーが発生することがあります。この記事では、この問題について説明し、いくつかのコード例を示します。
まず、使用されている Vue バージョンがキーボード イベント モニタリングをサポートしていることを確認する必要があります。 Vue 2.x バージョンでは、以下に示すように、ルート インスタンスで v-on ディレクティブを直接使用してキーボード イベントをリッスンできます。
<div id="app"> <input type="text" v-on:keyup="handleKeyUp"> </div>
new Vue({ el: '#app', methods: { handleKeyUp(event) { console.log(event.keyCode); } } });
Vue バージョンが 2.x より前の場合は、 Vue を最新バージョンにアップグレードするか、他のサードパーティ ライブラリを使用してキーボード イベントを処理する必要があります。
Vue でキーボード イベントをリッスンする場合、使用されるイベント名は、キー コードではなく、DOM 仕様で定義されたイベント名である必要があります。 JavaScript の仕様。たとえば、上記のコード例では、event.keyCode
の代わりに keyup
イベントを使用しています。よくある間違いを避けるために、必ず正しいイベント名を使用してください。
Vue には、特殊なキーボード イベントを処理するための修飾子がいくつか用意されています。たとえば、.enter
修飾子を使用して、Enter キーを押すイベントをリッスンできます。
<div id="app"> <input type="text" v-on:keyup.enter="handleEnter"> </div>
new Vue({ el: '#app', methods: { handleEnter(event) { console.log('Enter key pressed'); } } });
.enter
修飾子に加えて、Vue は他の修飾子も提供します。 .tab
、.delete
、.esc
などの一般的に使用される修飾子、および .ctrl
、.alt
、.shift
修飾子は、キーの組み合わせの監視を処理するために使用されます。
Vue 2.x バージョンより前では、keyCode
属性を使用して、押されたキー コードを取得できました。鍵 。ただし、Vue 2.x バージョンでは、キーボード イベントに関するブラウザーの互換性の問題のため、Vue では keyCode
の代わりに key
属性を使用することをお勧めします。 keyCode
を引き続き使用すると、エラーや非互換性の問題が発生する可能性があります。
<div id="app"> <input type="text" v-on:keyup="handleKeyUp"> </div>
new Vue({ el: '#app', methods: { handleKeyUp(event) { console.log(event.key); } } });
この例では、event.key
を使用して、押されたキーの値を取得します。
概要:
keyCode
の代わりに key
属性を使用します。 上記の方法により、Vue エラーを解決し、v-on を正しく使用してキーボード イベントを監視できます。この記事がお役に立てば幸いです!
以上がVue エラーの解決方法: v-on を正しく使用してキーボード イベントを監視できないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。