Vue Built-in Attributes – Enhance HTML with Reactive Directives (2025 Guide)
Introduction – What Are Built-in Attributes in Vue?
In Vue, built-in attributes are special HTML attributes prefixed with v- or with reserved names (like key, ref, slot, etc.) that enable Vue’s powerful reactive features. These attributes extend standard HTML to support dynamic behavior, rendering control, event handling, and data binding.
In this guide, you’ll learn:
- What Vue built-in attributes are
- How they are categorized and used
- Syntax, use cases, and real-world examples
- Best practices for applying them effectively
What Are Built-in Attributes?
Built-in attributes in Vue are directives or special props that Vue processes during rendering. They fall into two main categories:
- Directives (prefixed with
v-) – likev-bind,v-if,v-for - Reserved attributes – like
key,ref,slot,is
Common Vue Built-in Attributes & Directives
| Attribute | Description | Example |
|---|---|---|
v-bind | Dynamically bind HTML attributes | :href="url" |
v-model | Two-way binding for form inputs | v-model="form.name" |
v-if / v-else | Conditionally render an element | v-if="isVisible" |
v-show | Toggle visibility (via CSS display) | v-show="isVisible" |
v-for | Render list of items | v-for="item in items" |
v-on | Listen to DOM events | @click="submitForm" |
v-slot | Named and scoped slots | v-slot:header |
v-pre | Skip compilation for this element | v-pre |
v-cloak | Keep element hidden until Vue is ready | v-cloak |
v-once | Render element once only (non-reactive) | v-once |
key | Uniquely identify VNodes in v-for | :key="user.id" |
ref | Access DOM or component instance | ref="inputField" |
is | Dynamically choose a component to render | <component :is="dynamicComp"> |
slot | Define placeholder in child component | <slot name="footer"></slot> |
Directive vs Reserved Attributes
| Feature | Directives (v-) | Reserved Attributes (non-v-) |
|---|---|---|
| Syntax | v-if, v-for, etc. | ref, key, slot, is |
| Vue processes | During compile time | At runtime or render stage |
| Use case | DOM behavior, binding | Component tree management |
Real Examples for Key Built-in Attributes
v-if and v-else
<p v-if="isLoggedIn">Welcome!</p>
<p v-else>Please log in.</p>
v-for with key
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
ref to Access DOM
<input ref="myInput" />
Access it:
this.$refs.myInput.focus();
v-once – Render Without Reactivity
<p v-once>This will not update again.</p>
v-pre – Skip Compilation
<span v-pre>{{ rawMustache }}</span>
Outputs {{ rawMustache }} literally.
Summary – Recap & Next Steps
Vue built-in attributes are the foundation of reactive and dynamic templates. Whether you’re toggling visibility, iterating over data, or binding events, these attributes are essential for building modern Vue apps.
Key Takeaways:
v-attributes handle rendering logic, event binding, list rendering, etc.- Reserved attributes manage references, keys, and dynamic components
- Use
keyfor performance inv-for refgives direct access to DOM or components
Real-World Relevance:
Used in every Vue component, especially in forms, tables, lists, modals, and reusable UI blocks.
FAQ Section
What is the difference between v-if and v-show?
v-if conditionally renders/removes elements; v-show toggles visibility using CSS.
What does ref do in Vue?
Provides a reference to a DOM element or component for access in JavaScript.
When should I use v-once?
Use it for static content to prevent unnecessary re-renders.
Is key mandatory in v-for?
Yes, for performance and correct DOM diffing during updates.
Can I use v-bind to bind all attributes?
Yes. Use object syntax:
v-bind="objectContainingProps"
Share Now :
