Vue directives accept postfix modifiers that intercept and reshape standard DOM event semantics directly within the template layer.

Propagation management forms the core use case. Appending .stop to an event binding halts upward bubbling through the ancestor chain. In contarst, .capture inverts the execution order so that the outer listener fires during the capture phase before the event reaches its actual target.

<template>
  <section @click="containerAlert">
    <div class="panel">
      <button @click.stop="triggerButton">Click Me</button>
    </div>
  </section>
</template>

<script>
export default {
  methods: {
    containerAlert() {
      console.warn('Container handler invoked');
    },
    triggerButton() {
      console.info('Button handler invoked — bubbling halted');
    }
  }
};
</script>

To suppress the browser's intrinsic response—such as navigation on an anchor or submission on a form—apply .prevent.

<template>
  <form @submit.prevent="executeSearch">
    <input v-model="term" placeholder="Enter keywords" />
    <button type="submit">Search</button>
  </form>
</template>

<script>
export default {
  data() {
    return { term: '' };
  },
  methods: {
    executeSearch() {
      fetch(`/api/search?q=${encodeURIComponent(this.term)}`);
    }
  }
};
</script>

The .capture modifier registers the listener on the downward path of the event lifecycle.

<template>
  <article @click.capture="outerIntercept">
    <div class="card">
      <span @click="innerAction">Activate</span>
    </div>
  </article>
</template>

<script>
export default {
  methods: {
    outerIntercept() {
      console.log('Capture-phase listener executed first');
    },
    innerAction() {
      console.log('Target-phase listener executed second');
    }
  }
};
</script>

For situations where a parent wrapper should react only when the event originates on the wrapper itself—not on any nested descendants—.self restricts the callback to the exact element bearing the directive.

<template>
  <ul @click.self="backgroundClick">
    <li @click="selectItem">Alpha</li>
    <li @click="selectItem">Beta</li>
  </ul>
</template>

<script>
export default {
  methods: {
    backgroundClick() {
      console.log('Empty list area clicked');
    },
    selectItem() {
      console.log('List item selected');
    }
  }
};
</script>

The .once modifeir automatically detaches the listener after its first invocation, making it ideal for initialization logic or analytics beacons that must not duplicate.

<template>
  <button @click.once="setupWorkspace">Create Workspace</button>
</template>

<script>
export default {
  methods: {
    setupWorkspace() {
      console.log('Workspace created — handler now inactive');
    }
  }
};
</script>

For scroll and touch interactions where blocking the main thread with preventDefault checks causes jank, .passive promises the browser that the handler will never call preventDefault(), allowing the default action to proceed immediately.

<template>
  <div @wheel.passive="logZoom" class="viewport">
    <!-- Scrollable content -->
  </div>
</template>

<script>
export default {
  methods: {
    logZoom(evt) {
      console.log('Wheel delta recorded without blocking scroll');
    }
  }
};
</script>

Mouse-specific filters include .left, .right, and .middle, which constrain the handler to the corresponding button index. On custom components, .native attaches the listener to the component's root DOM element rather than treating it as a custom event.

Keyboadr and system modifiers—.ctrl, .alt, .shift, .meta—trigger only when the auxiliary key is depressed. When exact key combinations matter rather than supersets, .exact enforces strict matching; for example, @click.ctrl.exact fires solely when the Control key is pressed alone.

Multiple modifiers may be chained on a single directive, such as @submit.stop.prevent, though ordering generally follows semantic intent rather than rigid precedence rules.