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

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

クリックイベントの例

<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オブジェクトで定義。

イベントの一覧

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

<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>

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

<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メソッドに 修飾子を与えることによって、イベントの挙動を制御する

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

<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修飾子でデフォルトの挙動を防ぐ

<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修飾子

キーボードに対するイベントを設定する

<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]を設定。

<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>

動的にイベントを設定する。

[]で設定する。

<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:　は　@で省略できる。

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