Table of contents
No headings in the article.
Directives are special attributes in Vue.js that allow you to bind reactive data to a DOM element and apply dynamic behavior to it. They allow you to bind a piece of data to a specific element in the DOM and then modify its behavior based on the value of that data and are prefixed with the "v-" prefix which provides a way to extend HTML with custom attributes.
They are attributes with the v- prefix that provides reactive and declarative data binding and allows you to manipulate the DOM, bind values to elements, and create reusable components. Here are the most commonly used directives in Vue.js along with code examples:
v-if
: This directive is used for the conditional rendering of elements. It allows you to show or hide elements based on a condition. For example:<template> <div> <p v-if="isShown">This paragraph is shown</p> <p v-else>This paragraph is hidden</p> </div> </template> <script> export default { data() { return { isShown: true }; } }; </script>
In this example, the
v-if
directive checks the value ofisShown
to determine if the first paragraph should be shown or hidden. Thev-else
directive defines the alternate content that should be shown if thev-if
condition is not met.It works like the normal if/else conditional statement in javascript.
v-for
: This directive is used to loop over an array or an object and render elements based on the data. For example:<template> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </template> <script> export default { data() { return { items: [ { id: 1, name: "item 1" }, { id: 2, name: "item 2" }, { id: 3, name: "item 3" } ] }; } }; </script>
In this example, the
v-for
directive loops over theitems
array and renders a list item for each element in the array. Thekey
property is used to assign a unique key to each list item, which is required for efficient updates in large lists.v-bind
: This directive is used to bind values to elements. It allows you to dynamically update the attributes of elements based on data. For example:<template> <a v-bind:href="url">{{ linkText }}</a> </template> <script> export default { data() { return { url: "https://www.example.com", linkText: "Example" }; } }; </script>
In this example, the
v-bind
directive binds the value ofurl
to thehref
attribute of the anchor element, and the value oflinkText
to the text of the anchor element.v-on
: This directive is used to listen for events and trigger logic based on those events. For example:<template> <button v-on:click="incrementCounter">{{ counter }}</button> </template> <script> export default { data() { return { counter: 0 }; }, methods: { incrementCounter() { this.counter += 1; } } }; </script>
In the example above, when the button is clicked, the
incrementCounter
method will be called, which will log a message to the console. Thev-on:click
directive can also be shortened to@click
.v-model:
This is a directive in Vue.js that creates a two-way binding between a form input and a component's data. It can be used with input elements such as text inputs, checkboxes, and radio buttons to keep the data in the form input in sync with the component's data. For example:<template> <div> <input type="text" v-model="message" /> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } } } </script>
In the above code, the
v-model
directive is applied to an input element with a type of "text". The directive binds the input element's value to themessage
property in the component's data. As a result, when the user types in the input element, themessage
property in the component's data updates, and the value ofmessage
is displayed in a paragraph element. Similarly, when themessage
property in the component's data updates, the value of the input element also updates. This two-way binding is what makesv-model
so useful in Vue.js.v-show:
This directive in Vue.js is used to conditionally display an element in the HTML template. Unlike thev-if
directive, which removes an element from the DOM if the condition is false, thev-show
directive only changes the display property of the element. This means that the element is still present in the DOM, but is hidden or shown based on the condition.For example:
<template> <div> <p v-show="showElement">This is a paragraph that will be shown or hidden based on the value of "showElement".</p> </div> </template> <script> export default { data() { return { showElement: true, }; }, }; </script>
In this example, the value of the
showElement
data property determines whether the paragraph is shown or hidden. IfshowElement
istrue
, the paragraph will be visible. IfshowElement
isfalse
, the paragraph will be hidden. Thev-show
directive updates thedisplay
property of the paragraph based on the value ofshowElement
.v-once
This directive is a directive in Vue.js that tells the framework to only render the content of an element once. This means that if the value of a property that is being rendered with this directive changes, the framework will not re-render the content. This is useful when you have an element that contains information that is unlikely to change, such as a page title or a copyright notice.For example:
<template> <div> <h1 v-once>{{ title }}</h1> <p>{{ description }}</p> </div> </template> <script> export default { data() { return { title: 'Welcome to Vue.js', description: 'This is an example of the v-once directive.' } } } </script>
In this example, the
title
property is being rendered using thev-once
directive, so if the value of thetitle
property changes, the framework will not update the content of theh1
element. Thedescription
property, on the other hand, is not being rendered with thev-once
directive, so if the value of thedescription
property changes, the framework will update the content of thep
element.v-cloak:
This is a directive in Vue.js that is used to hide an element until the associated Vue instance has finished compiling. This is useful in cases where you have dynamic content that takes time to load, and you want to hide the content until it has finished loading. Thev-cloak
directive can be added to an element, and then the CSS code can be written to hide the content until the directive has finished compiling.For example:
<template> <div v-cloak> <!-- Content to be hidden until Vue instance has finished compiling --> </div> </template> <style> [v-cloak] { display: none; } </style>
In this example, the
v-cloak
directive is added to thediv
element, and then the CSS code is written to hide the content until the directive has finished compiling. This can help improve the user experience by preventing the content from appearing until it is ready to be displayed.v-html:
This directive is used to bind raw HTML content to a component in Vuejs. This directive allows you to render HTML content within a component, and it can be useful for rendering dynamic content that is generated on the server.For example:
<template> <div> <p v-html="content"></p> </div> </template> <script> export default { data() { return { content: '<strong>This is some dynamic HTML content!</strong>' } } } </script>
In this example, the
content
property on the component's data object contains a string of HTML. Thev-html
directive binds this content to the<p>
element in the component's template. When the component is rendered, the HTML string is interpreted as actual HTML and displayed as such on the page.
These are some of the most important directives in Vuejs and they play a crucial role in building complex applications. Understanding how to use these directives is essential for any front-end developer using Vuejs.
Directives in Vue.js are special attributes added to HTML elements that allow the programmer to execute custom logic when a certain event occurs on an element. When used correctly, help to write more efficient and readable code. To get started with Vue directives, it's important to understand the concept of data binding and the various ways in which it can be achieved in Vue.js.
If you this article is helpful to you, please share with others and give a like.