Directives are special attributes with v- prefix that apply reactive behavior to DOM. Built-in directives include v-if, v-for, v-bind, v-on, v-model. Support modifiers and arguments.
Template expressions use {{ }} syntax for data binding. Support JavaScript expressions. Access component properties and methods. Limited to single expressions.
v-pre skips compilation for element and children. Displays raw mustache tags. Useful for displaying template syntax. Improves compilation performance for static content.
v-once renders element/component once only. Skips future updates. Improves performance for static content. Content treated as static after initial render.
Custom directives use app.directive() or locally in component directives option. Define hooks like mounted, updated. Access element and binding values. Support directive arguments.
Use square brackets for dynamic arguments. Example: v-bind:[attributeName]. Support dynamic event names. Handle null values. Implement dynamic behavior.
Use v-slot directive for named slots. Support scoped slots. Handle slot props. Implement slot fallback content. Example: v-slot:header.
Use v-bind:class with object/array syntax. Support multiple classes. Handle dynamic classes. Implement conditional classes. Example: :class="{ active: isActive }".
Use v-model for different input types. Handle checkboxes, radio buttons, selects. Support array/boolean bindings. Implement custom input components.
Create comprehensive documentation. Generate API docs. Support example usage. Implement documentation systems. Handle maintenance.
Use v-bind:style with object/array syntax. Support multiple styles. Handle vendor prefixes. Implement dynamic styles. Example: :style="{ color: activeColor }".
Use v-if, v-else-if, v-else. Handle template v-if. Support key management. Implement conditional groups. Handle transition effects.
Use v-for with key attribute. Handle array mutations. Support object iteration. Implement filtered/sorted lists. Handle list updates.
Use v-on directive with modifiers. Handle method events. Support inline handlers. Implement event objects. Handle multiple events.
Implement semantic versioning. Handle backwards compatibility. Support version migration. Implement version control. Handle deprecation.
Create reusable directive libraries. Handle distribution. Support theming. Implement documentation. Handle versioning and maintenance.
Track directive usage and performance. Handle monitoring integration. Support analytics. Implement monitoring strategies.
v-bind dynamically binds attributes or props to expressions. Shorthand is :. Example: v-bind:href or :href. Supports dynamic values and object syntax for multiple bindings.
v-if conditionally renders elements by adding/removing from DOM. v-show toggles display CSS property. v-if supports v-else and has higher toggle cost. v-show better for frequent toggles.
v-on listens to DOM events. Shorthand is @. Example: v-on:click or @click. Supports event modifiers and method handlers. Can pass event object and arguments.
Directive hooks include beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted. Access element and binding values. Handle lifecycle events.
v-for iterates over arrays/objects. Syntax: v-for='item in items' or v-for='(value, key) in object'. Requires :key for list rendering. Supports index parameter.
v-model creates two-way data binding on form inputs. Automatically handles different input types. Supports modifiers like .lazy, .number, .trim. Example: v-model='message'.
Modifiers are special postfixes denoted by dot. Example: .prevent, .stop, .capture. Modify directive behavior. Support chaining multiple modifiers.
