🧾 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

Directive	Purpose
v-bind	Binds attribute or prop dynamically
v-model	Two-way binding for form elements
v-if / v-else-if / v-else	Conditional rendering
v-show	Toggles element visibility using display: none
v-for	Iterates over lists
v-on	Listens for DOM events
v-slot	Used for named and scoped slots
v-pre	Skips compilation for this element
v-cloak	Hides uncompiled template until Vue is ready
v-once	Renders the element once; no reactivity
v-memo (Vue 3.2+)	Skips unnecessary re-renders based on dependencies

---

🔍 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

Feature	v-if	v-show
DOM Rendering	Adds/removes DOM	Toggles display CSS
Performance	Costly for frequent toggle	Cheap for toggling
Initial Render	No render unless true	Always rendered

---

📌 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.

---

Share Now :