In Vue.js, a directive is a special attribute added to an HTML element to apply specific behavior.
That is, they are attributes 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 see them, sorted by category 👇.
Data Binding
Data binding directives allow binding Vue data and variables 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 (beware of 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>
The use of : 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 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, displaying 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 inputs, 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>
The use of @ 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 content until Vue finishes compiling the component. |
v-once | Renders an element or component only once (does not update). |
v-memo | Memoizes a DOM subtree to optimize repeated renderings. |
<div v-pre>{{ This will not be compiled }}</div>
<div v-cloak>{{ message }}</div>
In general, these are advanced-use directives. They are much less frequent than the previous ones (don’t worry too much about them at first).
