【Vue.js】v-onの記法について

##v-onでDOMにイベントを設定する。

クリックイベントの例

```html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <button v-on:click="display">表示</button>
</div>

<script>
new Vue({
  el: '#app',
  methods:{
    display:function(){
      console.log("hello")    
    }
  }
})
</script>
```

v-on:イベント="メソッド名" で　イベントを設定できる。
イベントの内容は、methodsオブジェクトで定義。

[イベントの一覧](https://developer.mozilla.org/ja/docs/Web/Events)

##v-onディレクティブに引数を持たせる。

![0bc51fb5f4f92b798b9380040d8729d7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/cffa65a0-271b-74b0-ef28-3378d21ef948.gif)


```html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <p>{{number}} </p>
  <button v-on:click="countUp(3)">カウントアップ</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      number: 0,
      x: 0,
      y: 0
    },
    methods: {
      countUp: function (times) {
        this.number += 1 * times
      },
    }
  })
</script>
```



##イベントオブジェクトを利用する。

![4c999e9449c675395d76b576804aaed1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/4440ba4e-929f-cb6a-c9bb-5a3dfe9adcbc.gif)

```html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <p v-on:mousemove="getPosition($evnet)">マウス載せて</p>
  <p>x: {{x}}, y:{{y}}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      x: 0,
      y: 0
    },
    methods: {
      getPosition: function (event) {
        this.x = event.clientX;
        this.y = event.clientY;
      }
    }
  })
</script>
```


引数に  \$event をとることで、イベントオブジェクトを取得することができる。引数が、イベントオブジェクトのみの場合は、($event)の記載自体を省略できる。

##イベント修飾子
v-onメソッドに 修飾子を与えることによって、イベントの挙動を制御する

![77819d8b77985233994c1db093c9107f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/628f36c1-af71-30ea-af15-66a9e8b8f174.gif)

###例　stop修飾子でイベントの伝播を止める。

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <p v-on:mousemove="position($event)">マウス
<!--================stop修飾子を設定====================-->
    <span v-on:mousemove.stop>【ここは反応しないで】</span>
<!--==================================================-->
    載せて
  </p>
  <p>x: {{x}}, y:{{y}}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      number: 0,
      x: 0,
      y: 0
    },
    methods: {
      position: function (event) {
        this.x = event.clientX;
        this.y = event.clientY;
      }
    }
  })
</script>
```
###例　prevent修飾子でデフォルトの挙動を防ぐ

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <a v-on:click.prevent href="https://google.com">google</a>
</div>
```

##key修飾子
キーボードに対するイベントを設定する
![edbcbbbd6c83686b333f985ac1fde852.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/c1f2c8f6-515b-cc95-ae31-a6c331bdd74a.gif)

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <input type="text" v-on:keyup="myAlert">
</div>

<script>
  new Vue({
    el: '#app',
    methods: {
      myAlert() {
        alert('キーボードが操作されました');
      }
    }
  })
</script>
```
enterを押下した時のみイベントを発生。
key修飾子[enter]を設定。

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <input type="text" v-on:keyup.enter="myAlert">
</div>

<script>
  new Vue({
    el: '#app',
    methods: {
      myAlert() {
        alert('エンターがおされました');
      }
    }
  })
</script>
```

##動的にイベントを設定する。
[]で設定する。

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
  <input type="text" v-on:[event]="myAlert">
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      event: 'keyup'
    },
    methods: {
      myAlert() {
        alert('入力されました');
      }
    }
  })
</script>
```
###省略記法
v-on:　は　@で省略できる。

```html
  <input type="text" v-on:[event]="myAlert">
  <input type="text" @[event]="myAlert">
```