What are Vue directives and how do they work?

HighIntermediateVue

By FrontendAtlas Team · Updated Apr 4, 2026

Quick Answer

Vue directives are compiled template instructions, and the beyond-basics question is what they change in rendering, patching, or event flow and when not to reach for a custom directive.

Answer

Overview

Vue directives are not decorative attributes; they are compiled instructions that change how Vue renders, patches, and listens for events. The production mistake is using them without understanding whether they alter structure (v-if), visibility (v-show), binding (v-bind), or event flow (v-on).

HTML

<template>
  <div>
    <p v-if="isVisible">This paragraph is conditionally rendered.</p>
    <p v-bind:title="message">Hover to see the message.</p>
    <button v-on:click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
      message: 'Hello from Vue!'
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

In this example, three directives are used:
• v-if conditionally renders an element.
• v-bind dynamically binds a JavaScript value to an attribute.
• v-on listens for user events like clicks.

How Directives Work
When Vue compiles a template, it parses all directives and establishes reactivity links between the DOM and your component data. Whenever the underlying data changes, Vue automatically updates the DOM to reflect the new state — no manual DOM manipulation required.

Common Built-in Directives

Directive	Description
v-if / v-else / v-else-if	Conditionally render elements based on a boolean expression.
v-show	Toggles visibility using the CSS display property.
v-for	Loops through arrays or objects to render lists.
v-bind	Binds dynamic attributes or props to elements and components.
v-on	Attaches event listeners to DOM elements.
v-model	Creates two-way data binding with form inputs.
v-html	Renders raw HTML content inside an element.
v-text	Updates an element’s text content directly.

Common Vue Directives and Their Usage

Custom Directives
Vue also allows developers to define custom directives for specialized DOM behavior. Custom directives are registered using app.directive() in Vue 3.

JAVASCRIPT

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

Now, using v-focus in your template automatically focuses the element when mounted.

Think of directives as instructions for the DOM — they tell Vue what to do with elements when your data changes, keeping everything reactive and declarative.

Summary

Summary

Directives in Vue start with the prefix v- and enhance HTML behavior.
They dynamically bind data, handle events, and control the DOM.
Vue provides built-in directives like v-if, v-for, v-bind, and v-on.
You can create custom directives for advanced, reusable behavior.