vue 2.0でのイベント修飾子の使用

イベントハンドリング

インラインステートメントハンドラでネイティブ DOM イベントにアクセスする必要がある場合。特別な変数 $event を使用し、それをメソッド内でメソッドに渡すことができます。

Vueでは、イベント修飾子がDOMイベントの詳細の多くを処理するため、これらの煩わしい処理に多くの時間を費やす必要がなくなり、プログラムの論理的な処理に多くのエネルギーを集中させることができます。

Vueの主なイベント修飾子は次のとおりです：

.stopJavaScriptのeventに相当する。.stopPropagation()，イベントのバブリングを防ぐ
.preventJavaScriptのeventに相当する。.preventDefault()，定義済みの動作の実行を防ぐ
.captureイベント・バブリングとは逆に、イベント・キャプチャは外側から内側に向かう。
.self: 自身のスコープ内のイベントのみがトリガーされ、子要素はトリガーされない。
.once一度だけトリガーされる

stop イベントのバブリング防止

バブリングイベント：2～3層の親子関係をネストし、各層にクリックイベントを持たせ、最も内側の子ノードがクリックされると、内側の子ノードから外側の子ノード→親ノードへとクリックイベントをトリガーします。

<!-- HTML --> 
<div id="app"> 
 <div class="outeer" @click="outer"> 
 <div class="middle" @click="middle"> 
 <button @click="inner">クリックミー (^_^)</button>
 </div>
 </div> 
 <p>{{ message }}</p> 
</div>
 let app = new Vue({
 el: '#app',
 data () { 
 return { message: 'バブリングイベントをテストする' };
 }, 
 methods: { 
 inner: function () {
 this.message = 'inner最も内側のボタン' 
 }, 
 middle: function () { 
 this.message = 'middle: これは真ん中のDiv' 
 }, 
 outer: function () { 
 this.message = 'outer: これは外側のDiv' 
 } 
 } 
})

イベントのバブリング防止は、イベント＋.stopをクリックすると、各メソッドでevent.stopPropagation()と同等のものが呼び出されるように書かれており、子ノードをクリックしても親のイベントは捕捉されません。

<!-- HTML --> 
<div id="app"> 
 <div class="outeer" @click.stop="outer"> 
 <div class="middle" @click.stop="middle"> 
 <button @click.stop="inner">クリックミー (^_^)</button>
 </div>
 </div> 
</div>

preventデフォルトイベントのキャンセル

デフォルトイベントとは、ハイパーリンクをクリックするとページにジャンプする、フォームの送信ボタンをクリックするとページがリロードされるなど、DOMを操作することで自動的に実行されるアクションを指します。

<a href="http://..om" @click.prevent="doSomething"></a>

この時点でハイパーリンクをクリックしても、ページジャンプにはなりません。

capture イベントのキャプチャ

バブルを捕捉します。つまり、バブルが発生すると、この修飾子を持つdom要素が最初に実行され、複数ある場合は外側から内側に向かって順番に実行され、その後、トリガーされたイベントが自然な順番で実行されます。

この時点で、一番内側のdivをクリックすると、次のようになります：

複数のキャプチャイベント ：

一番内側の結果をクリックしてください：

self

通常、バブリングイベントの影響を避けるために使用されます。

この時点で一番内側のレイヤーをクリックします：

once ワンクリックの実行

如果在@click事件上添加.once修饰符、ボタンがクリックされるたびに一度だけ実行されます。

キーボード修飾子

JavaScriptのイベントには、先に述べたイベントに加えて、キーボードイベントもあり、一般的なキーの値を監視する必要がしばしばあります。

Vueのv-onで、キーボード・イベントをリッスンする際にキー修飾子を追加できるようにしました。

すべてのkeyCodeを覚えるのは大変なので、Vueはよく使われるキーボードイベントのエイリアスを用意しています：

.enter: Enterキー
.tabタブキー
.delete: deleteキーとbackspaceキーを含む
.esc: リターンキー
.space:  
.upアップキー
.down: ダウンキー
.left左クリック
.right: 右クリック

マウスモディファイア

マウス修飾子は、ハンドラが特定のマウスボタンをリッスンするように制限するために使用されます。一般的なものは

.leftマウスの左ボタン
.middleマウスの中ホイール
.rightマウスの右ボタン

キー修飾子

マウスまたはキーボード・イベント・リスナーは、キーが押されたときに応答が発生するように、以下の修飾子でオンにすることができます：

.ctrl
.alt
.shift
.meta

### カスタムキー修飾子のエイリアス

Vueでは、キー修飾子のエイリアスをconfig.keyCodesでカスタマイズできます。たとえば、キーコード 116 のエイリアスは f5 として事前に定義されているので、テキスト入力ボックスで F5 を押すと、プロンプトメソッドがトリガされ、アラートが表示されます。

<!-- HTML -->
<div id="app">
 <input type="text" v-on:keydown.f5="prompt()">
</div>
Vue.config.keyCodes.f5 = 116;
let app = new Vue({
 el: '#app',
 methods: {
 prompt: function() {
 alert(' F5 ');
 }
 }
});

概要

Vueでは、イベントを要素にバインドするためにv-onが使われますが、論理的な側面をよりよく処理するために、Vueはメソッドを提供しています。

メソッドには、論理的な処理に役立つメソッドを定義します。そしてこの記事では、イベントのバブリングを防ぐ一般的なもの、キーボード修飾子など、いくつかのイベント修飾子に焦点を当てています。

これに加えて、config.keyCodesは、カスタムキー修飾子のエイリアスを提供するために提供されます。

から取得：

1,

2,