Directive

ELI5 — The Vibe Check

Directives are special HTML attributes that tell Vue (or Angular) to do something special with an element. v-if says 'only show this if the condition is true', v-for says 'loop through this list'. They're like cheat codes you put directly in your HTML.

Real Talk

Directives are special attributes (prefixed with v- in Vue) that apply reactive behavior to DOM elements. Built-in Vue directives include v-if, v-else, v-for, v-show, v-bind, v-on, and v-model. You can also write custom directives for low-level DOM manipulation.

Show Me The Code

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  <p v-if="items.length === 0">No items found.</p>
</template>

When You'll Hear This

"Use v-show instead of v-if if the element toggles frequently — it keeps it in the DOM." / "Write a custom directive for that tooltip behavior."