Overview

Directives are special Vue attributes that tell an element how to behave in response to application state. Most begin with v- and provide concise tools for text, raw HTML, attributes, forms, conditional rendering, lists, visibility, and events.

Key concepts

• v-bind connects dynamic attributes
• v-model synchronizes form controls
• v-if and v-show control visibility differently
• v-for renders collections with stable keys

What are Directives?

A directive is a Vue-specific instruction placed on an HTML element. Unlike a normal static attribute, it applies reactive behavior.

<p v-if="isLoggedIn">Welcome back!</p>

Here, v-if tells Vue to render the paragraph only while isLoggedIn is truthy.

Why do we need Directives?

An online store may show different controls for guests, repeat product cards from an array, update image URLs, handle clicks, and bind checkout fields. Directives describe this behavior directly in the template without manual DOM manipulation.

v-text

v-text replaces an element's text content. Interpolation is usually more flexible when text and markup appear together.

<p v-text="message"></p>
<p>{{ message }}</p>

v-html

v-html renders a string as raw HTML instead of escaped text.

<script setup>
const content = "<strong>Welcome!</strong>";
</script>

<template>
  <div v-html="content"></div>
</template>

Only use v-html with trusted, sanitized content. Rendering untrusted HTML can create cross-site scripting vulnerabilities.

v-bind

v-bind connects an attribute or DOM property to a JavaScript expression. The colon is its shorthand.

<img v-bind:src="imageUrl" :alt="imageDescription">
<a :href="profileUrl">Profile</a>

v-model

v-model creates two-way binding for form controls, using the appropriate property and event for each control type.

<input v-model="name" placeholder="Enter your name">
<p>Hello, {{ name }}</p>

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

These directives conditionally create and remove branches. Consecutive else-if and else elements must directly follow their related v-if branch.

<p v-if="score >= 80">Excellent</p>
<p v-else-if="score >= 50">Passed</p>
<p v-else>Keep practicing</p>

v-show

v-show always renders the element and toggles its CSS display property. It is useful for content that changes visibility frequently.

<p v-show="showMessage">Hello Vue!</p>

v-if vs v-show

v-for

v-for repeats an element or template for every item in an array, object, or numeric range. Supply a stable and unique key so Vue can preserve element identity during updates.

<script setup>
const fruits = [
  { id: 1, name: "Apple" },
  { id: 2, name: "Banana" },
  { id: 3, name: "Orange" }
];
</script>

<template>
  <ul>
    <li v-for="fruit in fruits" :key="fruit.id">
      {{ fruit.name }}
    </li>
  </ul>
</template>

v-on

v-on listens for DOM or component events. The @ symbol is shorthand for v-on:.

<button v-on:click="showMessage">Click Me</button>
<button @click="showMessage">Click Me</button>

Directive arguments and modifiers

Some directives accept an argument after a colon and modifiers after dots. Arguments identify what is bound or observed; modifiers adjust behavior.

<a :href="url">Open</a>
<form @submit.prevent="save">...</form>
<input @keyup.enter="search">

Choosing the right Directive

Common beginner mistakes

• Using v-html with untrusted content
• Forgetting : before a dynamic attribute
• Using an array index as a key when stable IDs exist
• Placing v-if and v-for on the same element without considering evaluation
• Using v-show on a template element
• Separating v-else from its v-if branch

Best practices

• Prefer interpolation or v-text for plain text
• Use : for dynamic attributes
• Use v-model for form controls
• Choose v-if for infrequent conditions
• Choose v-show for frequent toggles
• Use unique stable keys with v-for
• Use event modifiers for clear event behavior
• Treat v-html as a security-sensitive feature

Key takeaways

• Directives add reactive behavior to templates
• Most directive names begin with v-
• v-bind and v-on have : and @ shorthands
• v-model binds form controls
• v-if changes the DOM while v-show changes display
• v-for renders lists and needs stable keys
• v-html must receive trusted content
• Directives keep interactive behavior declarative