In Vue.js, a directive is a special attribute added to an HTML element to apply specific behavior.
That is, they are attributes that we will use in our HTML, but they are not standard HTML. Instead, Vue.js will use these attributes to do “its magic”.
They are a way to extend the behavior of HTML elements and allow us to manipulate the DOM declaratively.
Built-in directives in Vue.js
Vue.js includes several built-in directives that cover most common needs in application development.
These directives always start with the prefix v-, followed by the directive name. These are the ones we will use most of the time.
We will see that two of them, v-bind and v-on, are used so frequently that they even have a shorter alias.
Let’s take a look at them, organized by categories 👇.
Data Binding
Data binding directives allow binding data and variables from Vue to HTML attributes or component properties.
| Name | Description |
|---|---|
v-bind | Dynamically binds HTML attributes or component properties. |
v-model | Creates a two-way binding between an input and a data property. |
v-text | Updates the textContent of an element with the provided value. |
v-html | Updates the innerHTML of an element (be careful with XSS!). |
<!-- Sets the src attribute to the content of the variable imageUrl -->
<img :src="imageUrl" alt="Image">
<!-- Updates the `textContent` of an element -->
<p v-text="message"></p>
<!-- Updates the `innerHTML` of an element (be careful with XSS!) -->
<p v-html="htmlContent"></p>
Using : is a shorthand for v-bind. For example, :src is equivalent to v-bind:src.
Conditional Rendering
Conditional rendering directives allow showing or hiding elements based on a condition. (for example, to create dynamic interfaces that react to the application’s state).
| Name | Description |
|---|---|
v-if | Conditionally renders an HTML block if the expression is true. |
v-else-if | Conditionally renders an HTML block if the previous expression is false. |
v-else | Renders an HTML block if all previous conditions are false. |
v-show | Shows or hides an element based on a condition (using display: none). |
<p v-if="showMessage">Hello!</p>
<p v-else>No message.</p>Iterative Rendering
Iteration directives allow displaying collections of data dynamically (for example, showing data from an array).
| Name | Description |
|---|---|
v-for | Iterates over a list and renders an HTML block for each element. |
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>Event Handling
Event handling directives allow listening to DOM events (like clicks, keyboard input, or changes in a text field) and executing methods in response.
| Name | Description |
|---|---|
v-on | Listens to DOM events and executes methods when they occur. |
<button @click="handleClick">Click me</button>Using @ is a shorthand for v-on. For example, @click is equivalent to v-on:click.
Optimization
Optimization directives are designed to improve application performance. They allow controlling how Vue.js compiles and renders elements, avoiding unnecessary updates.
| Name | Description |
|---|---|
v-pre | Skips Vue compilation for an element and its children. |
v-cloak | Hides the content until Vue finishes compiling the component. |
v-once | Renders an element or component only once (does not update). |
v-memo | Memorizes a subtree of the DOM to optimize repeated renderings. |
<div v-pre>{{ This will not be compiled }}</div>
<div v-cloak>{{ message }}</div>In general, these are advanced directives. They are much less common than the previous ones (at first, don’t worry too much about them).