[Vue] Event Modifiers Explained: .stop .capture .prevent .self .once

Examples make Vue''s five event modifiers clear: .stop stops bubbling, .capture switches to capture, .self responds to itself only, .prevent blocks defaults, .once fires once.

Usage of Vue event modifiers (.stop .capture .prevent .self .once).

Normal event binding

<div id="app" style="background:red;" v-on:click="divclick">
  <input type="button" v-on:click="buttonclick" value="Click">
</div>

Default order (bubbling): first logs the button click, then the DIV click.

.stop

<input type="button" v-on:click.stop="buttonclick" value="Click">

Adding .stop halts bubbling — only the button handler runs, not the outer div.

.capture

<div id="app" v-on:click.capture="divclick"> ... </div>

Adding .capture triggers capture (outer to inner): DIV first, then button.

.self

<div v-on:click.self="divclick"> ... </div>

With .self, the handler runs only when the element itself is clicked, not its parents or children.

.prevent

<a href="http://www.beasure.com" v-on:click.prevent="aclick">Benshuo</a>

With .prevent the default is blocked — e.g. the link won''t navigate.

.once

<a href="http://www.beasure.com" v-on:click.prevent.once="aclick">Benshuo</a>

With .once it fires only once: the first click doesn''t navigate; on the second, .prevent no longer applies and the link navigates.

Vue instance

var vm = new Vue({
  el: "#app",
  data: {},
  methods: {
    buttonclick: function(){ console.log("button clicked"); },
    divclick: function(){ console.log("DIV clicked"); },
    aclick: function(){ console.log("A link clicked"); }
  }
})