Directive of VueJS with example
vueJs
directive
| Directive | Description |
|---|---|
| v-model | Enables two-way data binding between form input elements and Vue instance properties. |
| v-bind | (v-bind:attr) Dynamically binds HTML attributes to Vue instance properties. |
| v-on | Attaches event listeners to DOM elements. |
| v-if | Conditionally renders an element based on a truthy or falsy value of a Vue instance property. |
| v-else-if | Used in conjunction with v-if to provide alternative content based on different conditions. |
| v-else | Provides default content to be rendered if none of the preceding v-if or v-else-if conditions are met. |
| v-for | Iterates over an array or object to dynamically generate a list of elements. |
| v-show | Conditionally shows or hides an element based on a truthy or falsy value. |
| v-cloak | Prevents the display of mustache interpolations ({{ }}) until Vue has fully compiled the template. |
| v-slot | Defines named slots in templates for components to fill with their own content. |
| v-slot-scope | Provides an alias (usually slot) to access data passed from a parent component to a child component through slots. |
| v-pre | Preserves whitespace and prevents Vue from parsing the content as HTML. |
| v-text | Sets the text content of an element. |
| v-html | Sets the HTML content of an element, allowing for dynamic HTML rendering (use with caution due to potential XSS vulnerabilities). |
| v-once | Renders an element only once, even if the data it's bound to changes. |