Suggest an edit

Improve this article

Refine the answer for “What is a directive?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Directive** is a special attribute that adds **behavior or logic** to an element in a Vue template.
It **links the DOM and the component's reactive data**, telling Vue *what to do when the data changes*.

---

## 1. Example of a simple directive

```javascript
<template>
  <p v-if="isVisible">This text is shown when isVisible = true</p>
</template>

Here `v-if` is a directive.
It tells Vue: **if** `isVisible` **is true, insert the element into the DOM, otherwise remove it.**

---

## 2. General directive syntax

```javascript
v-directive:argument.modifier="expression"
```

- `v-directive` - the directive's name
- `:argument` - an additional argument
- `.modifier` - a refinement of behavior
- `"expression"` - the value or logic the directive works with

Example:

```javascript
<a v-bind:href="link" v-on:click.prevent="handleClick">Link</a>
```

Here:

- `v-bind:href="link"` -> dynamically substitutes the value of `link`
- `v-on:click.prevent` -> listens for a click and prevents the browser's default action

---

## 3. Core built-in Vue directives

| Directive | Purpose |
|---|---|
| `v-bind` or `:` | Binds a value to an element's attribute |
| `v-on` or `@` | Binds an event handler |
| `v-if`, `v-else`, `v-else-if` | Conditional rendering |
| `v-show` | Shows/hides an element via CSS (`display: none`) |
| `v-for` | Iterates over a list (like a loop) |
| `v-model` | Two-way data binding (input ↔ state) |
| `v-html` | Inserts HTML as the element's content |
| `v-text` | Inserts text into the element |
| `v-slot` | For working with slots in components |
| `v-pre`, `v-once` | Render optimization (skip updating/skip compilation) |

---

## 4. Example of using multiple directives

```javascript
<template>
  <div v-if="user" v-bind:class="{ active: isActive }">
    <p v-text="user.name"></p>
    <input v-model="user.email" />
    <button @click="isActive = !isActive">Toggle active</button>
  </div>
</template>

---

## 5. Custom directives

You can create **your own directives** when you need to control DOM behavior directly.

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

```javascript
<input v-focus />
```

When the element mounts, Vue calls the `mounted` function and automatically sets focus on the input field.

---

## Summary

> **A directive in Vue.js** is a mechanism that adds reactive behavior to HTML elements.
>
> It tells Vue **how to update the DOM** when the data changes.
>
> There are built-in directives (`v-if`, `v-for`, `v-bind`, `v-model`, and others),
> and you can **create your own** for unique scenarios (such as autofocus, lazy-load, etc.).

Markdown · drag & drop images · ⌘B / ⌘I shortcuts434 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.