Suggest an editImprove this articleRefine the answer for “What built-in directives exist in Vue?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)Vue has a set of **built-in directives** that cover the main tasks: rendering, events, working with forms, dynamic attributes, lists, and so on. **Key point:** the main ones are `v-bind`, `v-model`, `v-if`/`v-else-if`/`v-else`, `v-show`, `v-for`, `v-on`, `v-slot`, `v-html`, `v-text`, `v-pre`, `v-cloak`, and `v-once`.Shown above the full answer for quick recall.Answer (EN)ImageVue has a set of **built-in directives** that cover the main tasks: rendering, events, working with forms, dynamic attributes, lists, and so on. Below is a full list of **current Vue 3 built-in directives** plus a short explanation of each. --- ## Main built-in Vue directives ### 1. `v-bind` Dynamic binding of attributes and props. ```javascript <img :src="imageUrl"> ``` Equivalent to: ```javascript v-bind:class="classes" v-bind:id="elemId" ``` --- ### 2. `v-model` Two-way data binding (input, select, textarea, components). ```javascript <input v-model="name"> ``` Modifiers: - `.lazy` - `.trim` - `.number` --- ### 3. `v-if`**,** `v-else-if`**,** `v-else` Conditional rendering (the element is fully removed from the DOM). ```javascript <div v-if="ok">OK</div> <div v-else-if="maybe">Maybe</div> <div v-else>No</div> ``` --- ### 4. `v-show` Shows/hides an element via CSS `display`. ```javascript <div v-show="visible">I appear without being removed from the DOM</div> ``` --- ### 5. `v-for` Rendering lists. ```javascript <li v-for="(item, index) in items" :key="index"> {{ item }} </li> ``` --- ### 6. `v-on` (`@`) Event handlers. ```javascript <button @click="handleClick">Click</button> ``` Modifiers: `.stop`, `.prevent`, `.once`, `.self`, `.capture`, `.passive`. --- ### 7. `v-slot` Used to declare slots in components. ```javascript <template v-slot:header> Header </template> ``` Shorthand for the default slot: ```javascript <template #default> ``` --- ### 8. `v-html` Inserts HTML as a string. **Dangerous** (XSS). ```javascript <div v-html="rawHtml"></div> ``` --- ### 9. `v-text` Lets you output text (rarely used, since it is simpler to write `{{ }}`). ```javascript <p v-text="message"></p> ``` --- ### 10. `v-pre` Skips Vue expressions and outputs them as is. Speeds up rendering. ```javascript <div v-pre>{{ this is not interpolated }}</div> ``` --- ### 11. `v-cloak` Hides an element until Vue initializes. Usually used together with CSS: ```javascript <div v-cloak>{{ message }}</div> <style> [v-cloak] { display: none; } </style> ``` --- ### 12. `v-once` Renders the element **once**, with no updates. ```javascript <p v-once>{{ timestamp }}</p> ``` --- ## Final list of Vue directives (Vue 3) | Directive | Purpose | |---|---| | `v-bind` | dynamic attribute binding | | `v-model` | two-way binding | | `v-if`, `v-else-if`, `v-else` | conditional rendering | | `v-show` | hide/show via CSS | | `v-for` | rendering lists | | `v-on` | event handling | | `v-slot` | working with slots | | `v-html` | inserting HTML | | `v-text` | inserting text | | `v-pre` | skipping compilation | | `v-cloak` | hiding until mounted | | `v-once` | one-time render |For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.