[Vue.js]イベントハンドリングのおさらい

1<button v-on:click="[ 何か処理 ]">

1<button @click="[ 何か処理 ]">

1<button @click="counter + 1">

1<button @click="countUp">

1<button @click="countUp(2)">

1<div v-for="item in items">
2  <button @click="detail = item">
3</div>
4
5<div id="detail" v-if="detail != null">
6  {{ detail.name }}
7  <!-- 素晴らしい実装 -->
8</div>

1<button @close="$emit('close')">

 1<!-- クリックイベントの伝搬が止まります -->
 2<a v-on:click.stop="doThis"></a>
 3<!-- submit イベントによってページがリロードされません -->
 4<form v-on:submit.prevent="onSubmit"></form>
 5<!-- 修飾子は繋げることができます -->
 6<a v-on:click.stop.prevent="doThat"></a>
 7<!-- 値を指定せず、修飾子だけ利用することもできます -->
 8<form v-on:submit.prevent></form>
 9<!-- イベントリスナーを追加するときにキャプチャモードで使います -->
10<!-- 言い換えれば、内部要素を対象とするイベントは、その要素によって処理される前にここで処理されます -->
11<div v-on:click.capture="doThis">...</div>
12<!-- event.target が要素自身のときだけ、ハンドラが呼び出されます -->
13<!-- 言い換えると子要素のときは呼び出されません -->
14<div v-on:click.self="doThat">...</div>

1$('#hoge').click(function(event) {
2    event.preventDefault();
3    event.stopPropagation();
4});

1<button @click.stop.prevent>

 1var keyDown = function(e) {
 2  if (e.keyCode == 9  /* tab   */) {
 3    // 何か処理
 4  }
 5  if (e.keyCode == 13 /* enter */) {
 6    // 何か処理
 7  }
 8  // あれ、キーコードはあってる?
 9  if (e.keyCode == 37 /* up */) {
10    // 何か処理
11  }
12  : // 延々と続く
13};

1<div
2  @keydown.enter="keyEnter"
3  @keydown.tab="keyTag"
4  @keydown.up="keyArrow(-3)"
5  @keydown.down="keyArrow(3)"
6  @keydown.left="keyArrow(-1)"
7  @keydown.right="keyArrow(1)"
8>