イベントハンドリング v-on

イベントハンドリング

v-on

new Vue({
  el: "#app",
  data: {
    counter: 0
  },
  methods: {
    clickHnadler: function() {
        this.counter++
    }
  }
})

<div id="app">
  <p>
    {{ counter }}
  </p>
  <button v-on:click="clickHnadler">
    click
  </button>
</div>

クリックするたびにカウントが増える

https://jsfiddle.net/hiroki1205/938nqps6/28/

引数を渡す

v-onのmethodsには引数を渡すことができる。

https://jsfiddle.net/hiroki1205/938nqps6/32/

イベント修飾子

.stop -> イベントの親要素への伝搬を中止
.prevent -> イベント規定の動作をキャンセル
.capture -> イベントハンドラをキャプチャモードで動作
.self -> イベント発生元が要素実親の場合にだけ実施
.once -> イベントハンドラを一回だけ実施
.passive -> passoveモードを有効化

v-onの省略記号

<!-- 完全な構文 -->
<a v-on:click="doSomething"> ... </a>

<!-- 省略記法 -->
<a @click="doSomething"> ... </a>

<!-- 動的引数の省略記法 (2.6.0 以降) -->
<a @[event]="doSomething"> ... </a>