Часто может потребоваться вызвать event.preventDefault() или event.stopPropagation() внутри обработчиков события. Хоть это и легко можно сделать внутри методов, лучше если методы будут содержать в себе только логику и не иметь дела с деталями события DOM.
Для решения этой задачи Vue предоставляет модификаторы событий для v-on. Вспомните, что модификаторы — это постфиксы директивы, отделяемые точкой:
<!-- всплытие события click будет остановлено -->
<a @click.stop="doThis"></a>
<!-- событие submit перестанет перезагружать страницу -->
<form @submit.prevent="onSubmit"></form>
<!-- модификаторы можно объединять в цепочки -->
<a @click.stop.prevent="doThat"></a>
<!-- можно использовать без обработчиков -->
<form @submit.prevent></form>
<!-- можно отслеживать события в режиме capture, т.е. событие, нацеленное -->
<!-- на внутренний элемент, обрабатывается здесь до обработки этим элементом -->
<div @click.capture="doThis">...</div>
<!-- вызов обработчика только в случае наступления события непосредственно -->
<!-- на данном элементе (то есть не на дочернем компоненте) -->
<div @click.self="doThat">...</div>
<!-- обработчик click будет вызван максимум 1 раз -->
<a @click.once="doThis"></a>
В отличие от других модификаторов, которые поддерживают только нативные события DOM, модификатор .once можно использовать и с пользовательскими событиями компонентов. Если ещё не читали о компонентах — не беспокойтесь об этом пока.
<!-- незамедлительно, вместо ожидания окончания `onScroll` -->
<!-- на случай, если там будет `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>
Модификатор .passive особенно полезен для улучшения производительности на мобильных устройствах.