Suggest an edit

Improve this article

Refine the answer for “What are Vue directives?”. 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)

**Vue directives** are special attributes in a template that let you "bind" logic to DOM elements and control their behavior.
They always start with the `v-` prefix.

In other words: **directives are a way to tell Vue what to do with an element in the template.**

---

## Standard Vue directives

Here are the most common ones:

| Directive | What it does |
|---|---|
| `v-bind` | Binds a value to attributes (dynamic attributes) |
| `v-model` | Two-way data binding |
| `v-if / v-else / v-else-if` | Conditional rendering |
| `v-show` | Shows/hides via CSS `display` |
| `v-for` | A loop for lists |
| `v-on` (`@`) | Event binding |
| `v-slot` | Working with slots in components |
| `v-html` | Inserts HTML (dangerous!) |

---

## A simple example

```javascript
<div id="app">
  <p v-if="isVisible">Hello!</p>

<p v-bind:title="message">
    Hover over me - you'll see message
  </p>
</div>
```

```javascript
const app = Vue.createApp({
  data() {
    return {
      isVisible: true,
      message: "Hello Vue"
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
}).mount('#app');
```

---

## Why are custom directives needed?

Vue provides a basic set, but sometimes you need to manipulate the DOM manually:

- auto-focusing an input field;
- input masks (for example, a phone number);
- animations;
- working with external libraries (for example, a tooltip, drag&drop).

**Custom directives** are created for this.

### Example of a custom `v-focus` directive

```javascript
const app = Vue.createApp({});

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

And its usage:

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

---

## Directive lifecycle (Vue 3)

A custom directive has these hooks:

| Hook | When it's called |
|---|---|
| `created` | when the directive is created |
| `beforeMount` | before mounting into the DOM |
| `mounted` | after it's inserted into the DOM |
| `beforeUpdate` | before the VDOM updates |
| `updated` | after it updates |
| `beforeUnmount` | before it's removed |
| `unmounted` | after it's removed |

---

## Summary

**Directives are Vue's mechanism for controlling the DOM.**
They let you:

- bind data to attributes,
- listen to events,
- show/hide elements,
- repeat elements as a list,
- control input,
- write your own DOM logic.

If asked in an interview, you can answer briefly:

> "Directives are `v-` attributes that let you control the DOM in a template. Vue provides standard directives and lets you create custom ones for custom element behavior."

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.