Vue's template directives are special attributes that add reactive behavior to the rendered DOM. The v-if directive conditionally renders an element, completely destroying and recreating it in the DOM whenever the condition toggles, and it can be paired with v-else-if and v-else for multiple branches. By contrast, v-show always keeps the element in the DOM and simply toggles its CSS display property. The trade-off is that v-if has a higher toggle cost but a lower initial render cost, while v-show is the opposite. As a rule of thumb, use v-show for elements that toggle frequently, and v-if for conditions that rarely change or depend on expensive initialization.
The v-for directive renders lists by iterating over an array or object, and it requires a unique :key attribute on each item so that Vue can efficiently patch and reorder DOM elements. Without keys, Vue falls back to an in-place patch strategy that can cause subtle bugs with stateful elements. The v-bind directive dynamically binds an HTML attribute or a component prop to an expression, and it has a shorthand of just a colon, as in :src="imageUrl". You can also bind multiple attributes at once by passing an object to v-bind.
For two-way data binding between form inputs and reactive state, Vue provides v-model. It is essentially syntactic sugar for combining :value with an @input listener that updates the bound value. Modifiers like .lazy, .number, and .trim adapt this behavior—for instance, .lazy syncs on the change event instead of every keystroke, and .trim removes leading and trailing whitespace. Event listening itself is handled by v-on, which has a shorthand of @, and which supports modifiers such as .prevent, .stop, .once, .self, and key modifiers like .enter for keyboard events.