VUE 入門イベント処理の学習

1. 関数バインディング

イベントハンドラ関数をバインドするには、v-on:click="methodName"またはショートカット@click="methodName"を使用できます。

@click="methodName()" も OK です。@click="methodName" はおそらく省略形です。

  <div v-on:click="add">{{ count }}</div>
  <div @click="add">{{ count }}</div>

  データ（） {
    戻る {
      カウント: 0,
    };
  },
  メソッド: {
    追加（） {
      this.count++;
    },
  },

2. パラメータと$eventを使用する

パラメータと$eventをイベントバインディング関数に直接渡すことができます

<div @click="set(0, $event)">{{ count }}</div>

  データ（） {
    戻る {
      カウント: 0,
    };
  },
  メソッド: {
    追加（） {
      this.count++;
    },
    set(値、イベント) {
      console.log(イベント);
      this.count = 値;
    },
  },

3. 複数の関数を1つのイベントにバインドする

複数の関数はカンマで区切られます。関数にパラメータがない場合でも、括弧を追加する必要があります。そうしないと、関数は実行されません。

たとえば、<div @click="set(0, $event), log">{{ count }}</div>はsetのみを実行します。

<div @click="set(0, $event), log()">{{ count }}</div>

  データ（） {
    戻る {
      カウント: 0,
    };
  },
  メソッド: {
    追加（） {
      this.count++;
    },
    ログ（）{
      console.log("ログ---");
    },
    set(値、イベント) {
      console.log(イベント);
      this.count = 値;
    },
  },

4. イベント修飾子

修飾子を使用する場合、順序が重要であり、対応するコードは同じ順序で生成されます。

<a @click.stop="doThis"></a>

<form @submit.prevent="onSubmit"></form>

<a @click.stop.prevent="doThat"></a>

<フォーム @submit.prevent></フォーム>


<div @click.capture="doThis">...</div>


<div @click.self="doThat">...</div>

<a @click.once="doThis"></a>




<div @scroll.passive="onScroll">...</div>

5. キー修飾子

.enter
.tab
.delete ( 「削除」キーと「バックスペース」キーをキャプチャします)
.esc
.space
.up
.down
.left
.right

<input @keyup.enter="送信" />

<input @keyup.page-down="onPageDown" />

6. システム修飾キー

イベントがトリガーされたときに修飾キーを押す必要があります

.ctrl
.alt
.shift
.meta

<@keyup.alt.enter="クリア" を入力 />

<div @click.ctrl="doSomething">何かする</div>

.exact 修飾子

<button @click.ctrl="onClick">A</button>

<button @click.ctrl.exact="onCtrlClick">A</button>

<button @click.exact="onClick">A</button>

マウスボタン修飾子

  <button @click.left="log('left cllilck')">マウスの左クリック</button>
  <button @click.right="log('right cllilck')">右クリック</button>
  <button @click.middle="log('middle cllilck')">中クリック</button>