イベント修飾子.stop/.prevent #Vue.js

v-onディレクティブで設定したイベントを止めることができます。

stop修飾子

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
      <p v-on:mousemove="mousePosition(10, $event)">マウスを乗せてください
      <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: {
        mousePosition: function(divideNumber, event) {
          this.x = event.clientX / divideNumber;
          this.y = event.clientY / divideNumber;
        }
      }
  })
</script>
</body>

stopをつけるだけです。

<span v-on:mousemove.stop>

prevent修飾子

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
     <a v-on:click.prevent="url" href="https://google.com">Google</a>
</div>
<script>
  new Vue({
    el: '#app'
  })
</script>
</body>

<a v-on:click.prevent="url" href="https://google.com">Google</a>

.stop.preventと続けて書くこともできます。