What built-in directives exist in Vue?

VueJunior~1 min read

Vue has a set of built-in directives that cover the main tasks: rendering, events, working with forms, dynamic attributes, lists, and so on. Below is a full list of current Vue 3 built-in directives plus a short explanation of each.

Main built-in Vue directives

1. `v-bind`

Dynamic binding of attributes and props.

javascript

<img :src="imageUrl">

Equivalent to:

javascript

v-bind:class="classes"
v-bind:id="elemId"

2. `v-model`

Two-way data binding (input, select, textarea, components).

javascript

<input v-model="name">

Modifiers:

.lazy
.trim
.number

3. `v-if`, `v-else-if`, `v-else`

Conditional rendering (the element is fully removed from the DOM).

javascript

<div v-if="ok">OK</div>
<div v-else-if="maybe">Maybe</div>
<div v-else>No</div>

4. `v-show`

Shows/hides an element via CSS display.

javascript

<div v-show="visible">I appear without being removed from the DOM</div>

5. `v-for`

Rendering lists.

javascript

<li v-for="(item, index) in items" :key="index">
  {{ item }}
</li>

6. `v-on` (`@`)

Event handlers.

javascript

<button @click="handleClick">Click</button>

Modifiers: .stop, .prevent, .once, .self, .capture, .passive.

7. `v-slot`

Used to declare slots in components.

javascript

<template v-slot:header>
  Header
</template>

Shorthand for the default slot:

javascript

<template #default>

8. `v-html`

Inserts HTML as a string. Dangerous (XSS).

javascript

<div v-html="rawHtml"></div>

9. `v-text`

Lets you output text (rarely used, since it is simpler to write {{ }}).

javascript

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

10. `v-pre`

Skips Vue expressions and outputs them as is. Speeds up rendering.

javascript

<div v-pre>{{ this is not interpolated }}</div>

11. `v-cloak`

Hides an element until Vue initializes.

Usually used together with CSS:

javascript

<div v-cloak>{{ message }}</div>

<style>
[v-cloak] { display: none; }
</style>

12. `v-once`

Renders the element once, with no updates.

javascript

<p v-once>{{ timestamp }}</p>

Final list of Vue directives (Vue 3)

Directive	Purpose
`v-bind`	dynamic attribute binding
`v-model`	two-way binding
`v-if`, `v-else-if`, `v-else`	conditional rendering
`v-show`	hide/show via CSS
`v-for`	rendering lists
`v-on`	event handling
`v-slot`	working with slots
`v-html`	inserting HTML
`v-text`	inserting text
`v-pre`	skipping compilation
`v-cloak`	hiding until mounted
`v-once`	one-time render

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.