What are directives in Vue js? A quick digest ⤵️

What are directives in Vue js? A quick digest ⤵️

Directives are special attributes that start with v-and are used to add dynamic behaviour to HTML elements. Directives are used to apply special behaviour to the elements they are attached to, like conditionally rendering elements, binding data to elements, manipulating the DOM, and more.

Some common directives in Vue.js include:

  • v-if: This directive is used to conditionally render elements based on a condition. If the condition is true, the element will be displayed; otherwise, it will be removed from the DOM.

  • v-for: This directive is used to render a list of items based on an array or an object. It iterates over each item and renders the template for each item in the list.

  • v-bind: This directive is used to bind data to an element's attribute or property. For example, you can use it to bind an image source URL to the src attribute of an img element.

  • v-on: This directive is used to attach event listeners to an element. For example, you can use it to listen for a click event on a button element and call a method when the button is clicked.

  • v-model: This directive is used to create a two-way data binding between a form input element and a component's data. When the input value changes, the component's data is updated; when the component's data changes, the input value is updated.

These directives are powerful tools that make it easy to add dynamic behavior to your Vue.js applications.

Did you find this article valuable?

Support Mohammed Asadullah Sayeed by becoming a sponsor. Any amount is appreciated!