We will explore Vue.js built-in directives, which are fundamental tools in Vue that allow you to modify or enhance your HTML with ease. We’ll dive into what directives are, how they work, and some common examples that demonstrate their power.
What Is a Directive?
A directive is a special instruction in Vue that can be used to manipulate or modify your HTML. These directives provide dynamic functionality and make it easy to bind data, render conditionally, and handle user interactions. Directives can be categorized into two types:
• Built-In Directives:Provided by Vue and used frequently in most applications
• Custom Directives: Created by developers for specific use cases
First example
When you start working with images, you may find that it doesn’t work as expected. Let’s look at an example:
<div id="app">
<img src="{{image.src}}" alt="{{image.alt}}" width="200">
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
let image = ref({
src: 'https://www.thesprucepets.com/thmb/uQnGtOt9VQiML2oG2YzAmPErrHo=/5441x0/filters:no_upscale():strip_icc()/all-about-tabby-cats-552489-hero-a23a9118af8c477b914a0a1570d4f787.jpg',
alt: 'An image',
});
return {
image,
}
},
});
app.mount('#app');
</script>The code provided is valid Vue.js code, but if we check the rendered HTML, we can see that it renders the original code instead.
So, what now? We need to use directives.
Using Built-In Directives
Let’s go through some of the most commonly used built-in directives in Vue.js.
v-bind: Binding Attributes Dynamically
The v-bind directive is used to bind dynamic values to HTML attributes. For example, if you want to dynamically set an image source (src) and alternative text (alt):
<img v-bind:src="image.src" v-bind:alt="image.alt" width="200">Here is how it works in the JavaScript setup:
const { createApp, ref } = Vue;
const app = createApp({
setup() {
let image = ref({
src: 'https://www.thesprucepets.com/thmb/uQnGtOt9VQiML2oG2YzAmPErrHo=/5441x0/filters:no_upscale():strip_icc()/all-about-tabby-cats-552489-hero-a23a9118af8c477b914a0a1570d4f787.jpg',
alt: 'A cat',
});
return { image };
},
});
app.mount('#app');
When using v-bind, Vue understands that you’re linking the attribute to a reactive property. You don’t need to use curly braces (`[object Object]) as the directive handles everything for you.
Shortcut for v-bind
You can use the shorthand syntax : instead of writing v-bind:. For instance:
<img :src="image.src" :alt="image.alt" width="200">v-text: Binding Text Content
The v-text directive is used to bind plain text content to an element. Instead of placing the text directly in the HTML, use:
<p v-text="text"></p>In the JavaScript setup:
let text = 'A beautiful cat';
v-html: Rendering HTML Content
If you want to bind and render raw HTML, you can use v-html. For example:
<p v-html="htmlContent"></p>In the JavaScript setup:
const htmlContent = '<strong>This is bold text</strong>';
return { htmlContent };
This directive renders the HTML content within the element, allowing tags like
<strong> to be interpreted correctly. Caution: Always sanitize the HTML to prevent XSS attacks when rendering user-provided content.v-if and v-else: Conditional Rendering
Use v-if to conditionally render elements based on a Boolean value. Combine it with v-else for alternate rendering:
<p v-if="isVisible">This is visible</p>
<p v-else>This is hidden</p>In the JavaScript setup:
const isVisible = true;
return { isVisible };
When isVisible is true, the first paragraph is shown. Otherwise, the second paragraph is displayed.
v-show: Toggling Visibility
The v-show directive is another way to conditionally display elements. Unlike v-if, which completely removes the element from the DOM, v-show toggles the element’s display style:
<p v-show="isVisible">This is conditionally visible</p>v-for: Looping Through Data
The v-for directive is used to iterate over arrays or objects and render content for each item:
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>In the JavaScript setup:
const items = ['Item 1', 'Item 2', 'Item 3'];
return { items };
Examples in Action
Here is a complete example showcasing the use of multiple directives:
<div id="app">
<img :src="image.src" :alt="image.alt" width="200">
<hr>
<a :href="link">Go to Google</a>
<hr>
<p v-text="text"></p>
<hr>
<p v-html="html"></p>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
let image = ref({
src: 'https://www.thesprucepets.com/thmb/uQnGtOt9VQiML2oG2YzAmPErrHo=/5441x0/filters:no_upscale():strip_icc()/all-about-tabby-cats-552489-hero-a23a9118af8c477b914a0a1570d4f787.jpg',
alt: 'An image',
});
const link = 'https://google.com';
const text = 'This is plain text.';
const html = '<strong>This is bold HTML content.</strong>';
return {
image,
link,
text,
html,
};
},
});
app.mount('#app');
</script>Here is the rendered HTML:
By mastering directives like v-bind, v-text, v-html, v-if, and v-show, you can create highly interactive and data-driven interfaces with minimal effort.