In Vue.js, directives are special tokens in the markup that tell the library to do something to a DOM element.There are several built-in directives in Vue.js.
Here are some of the most commonly used ones:
v-bind: Used to dynamically bind one or more attributes or properties to an element.
v-model: Creates a two-way binding on form input elements or components. It automatically picks the correct way to update the element based on the input type.
v-if / v-else-if / v-else: Conditionally render elements based on the truthiness of the expression.
v-show: Similar to v-if, but instead of removing and adding elements from the DOM, it toggles the CSS display property.
v-for: Used for rendering a list of items based on an array.
v-on: Used to listen to DOM events and run some JavaScript when they’re triggered.
v-pre: Skips compilation for this element and all its children. This is useful when you have a large piece of static content that you don’t want to be compiled.
v-cloak: This directive remains on the element until the associated Vue instance finishes compilation. It is used to hide uncompiled mustache bindings until the Vue instance is ready.
v-once: Render the element and component once only. Subsequent re-renders will not affect it.
v-html: Renders the data as HTML. It is essential to only use v-html with trusted content as it can lead to XSS vulnerabilities if used incorrectly.