Vue Directives

Built-in Directives

Directives are template annotations starting with v- that reactively update the DOM.

Core directives include v-bind, v-model, v-if, v-show, v-for, v-on.

<p v-if="ok">Ready</p>
<img :src="url" alt="" />
<button @click="save">Save</button>

Conditional, bind, and event directives.

Shorthands

: for v-bind, @ for v-on, # for v-slot

• Prefer Vue 3 + Composition API.
• Use script setup for SFCs.
• Keep components focused.
• Lean on official docs.

Vue Directives Cheatsheet

Quick reference for patterns covered in this lesson.

Custom Directives

Use for low-level DOM access when components/composables aren't enough.

Common Mistakes

• Too much logic in directive expressions.
• v-if and v-for on the same element (avoid).

Key Takeaways

• Vue Directives is a core Vue skill.
• Practice in a Vite app.
• Prefer clarity.
• Revisit docs for edge cases.