juniorVue.js
What are Directives in Vue?
Updated May 4, 2026
Short answer
Directives are special attributes starting with v- that apply reactive behavior to the DOM.
Deep explanation
Vue provides built-in directives like v-bind (attribute binding), v-on (event listening), v-model (two-way binding), v-for (list rendering), and v-if (conditional rendering). They essentially tell the library to do something to a DOM element.
Real-world example
Using v-pre to skip compilation for a large chunk of static HTML to boost performance.
Common mistakes
- Confusing `v-bind` (attribute) with `v-model` (interactive data binding).
Follow-up questions
- Can you create custom directives?