Vue Directives Reference – The Complete Guide with Examples (2025)

Introduction – What Are Vue Directives?

Vue directives are special attributes that extend HTML with reactive behavior. They are prefixed with v- and tell Vue how to manipulate the DOM. Whether you’re showing elements conditionally, binding attributes, or handling user events, directives are core to Vue’s reactivity system.

In this guide, you’ll learn:

• The list of Vue built-in directives
• Syntax, purpose, and practical examples
• Custom directive basics
• Differences between key directives like v-if and v-show

List of Vue Built-in Directives

Detailed Reference of Key Directives

v-bind

Binds dynamic attributes or props to HTML elements.

<img v-bind:src="imageUrl" />
<!-- shorthand -->
<img :src="imageUrl" />

v-model

Two-way bind form inputs.

<input v-model="username" />

For custom components:

<custom-input v-model="user.age" />

v-if, v-else-if, v-else

Conditionally render elements.

<p v-if="score > 80">Excellent</p>
<p v-else-if="score > 50">Good</p>
<p v-else>Try Again</p>

👁️ v-show

Toggles visibility with display: none, but keeps element in DOM.

<p v-show="isVisible">I am visible</p>

v-for

Renders a list of items.

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

Also supports destructuring:

<div v-for="(value, key, index) in object">
  {{ index }}: {{ key }} = {{ value }}
</div>

v-on

Listens to events.

<button v-on:click="submitForm">Submit</button>
<!-- shorthand -->
<button @click="submitForm">Submit</button>

With modifiers:

<input @keyup.enter="sendMessage" />

🎁 v-slot

Use inside components to pass named or scoped slots.

<BaseLayout>
  <template v-slot:header>
    <h1>Title</h1>
  </template>
</BaseLayout>

Scoped slot:

<CustomList v-slot="slotProps">
  <p>{{ slotProps.item.text }}</p>
</CustomList>

v-pre

Skips compilation for performance or raw rendering.

<span v-pre>{{ willNotBeCompiled }}</span>

🕶️ v-cloak

Used with v-cloak attribute and CSS to prevent FOUC.

<p v-cloak>Loading...</p>

Add style:

[v-cloak] { display: none; }

v-once

Render the element only once; no future reactivity.

<h1 v-once>{{ initialTitle }}</h1>

v-memo (Vue 3.2+)

Avoids re-renders if reactive dependencies don’t change.

<div v-memo="[dependency1, dependency2]">
  {{ expensiveComputation }}
</div>

Custom Directives (Advanced)

You can define your own directives.

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

Usage:

<input v-focus />

v-if vs v-show – Quick Comparison

Summary – Recap & Next Steps

Vue directives are a core part of the Vue templating engine, enabling dynamic DOM updates through reactive bindings. Understanding them will make your components more concise, declarative, and powerful.

Key Takeaways:

• Use v-bind, v-model, v-on, and v-for regularly
• Prefer v-show for frequent toggles; v-if for conditional structure
• Learn slot-related directives like v-slot
• Create custom directives for reusable DOM logic

Real-World Relevance:
Directives are used in forms, conditionals, modals, lists, tabs, animations, and everywhere in Vue apps.

FAQ Section

What is the difference between v-if and v-show?

v-if adds/removes elements in the DOM. v-show just toggles visibility using CSS.

Can I bind multiple attributes with v-bind?

Yes. Use object syntax:

v-bind="{ id: someId, class: someClass }"

What does v-cloak do?

It hides uncompiled template until Vue has initialized. Often used with a CSS rule.

What is v-once used for?

It renders an element once and skips it in future updates to improve performance.

How do I create a custom directive?

Use app.directive() to define behavior for DOM elements, like setting focus or formatting input.