Module Recap
Module 04 covered Vue’s core template directives — the HTML superpowers that turn static markup into dynamic UI. Together they handle binding, events, conditions, lists, forms, and styling.
What you learned
Section titled “What you learned”v-bind and v-on are the two fundamental directives. :attr="value" binds any attribute or prop dynamically. @event="handler" attaches any event listener. Event modifiers (.prevent, .stop, .enter) handle common patterns without boilerplate.
v-if and v-show handle conditional rendering. v-if removes/inserts elements from the DOM — use it when conditions are meaningful and change infrequently. v-show toggles display: none — use it for frequent UI toggles. Chain v-else-if and v-else for multi-branch conditions.
v-for renders lists. v-for="item in array" iterates any array or object. :key is required — always use a stable, unique identifier. Filter data in a computed rather than combining v-if with v-for on the same element.
v-model is two-way binding. It syncs form inputs with reactive state. Works on native inputs, selects, checkboxes, and textareas. Modifiers .trim, .number, and .lazy handle common input patterns. defineModel() adds v-model support to custom components.
:class and :style make dynamic styling clean. Object syntax toggles classes by condition; array syntax combines multiple classes. Prefer :class over :style — keep logic in CSS where possible.
How this connects to FamilyTree
Section titled “How this connects to FamilyTree”Every module in FamilyTree uses these directives:
FocusView.vue uses v-for to render PersonCard instances for each parent, the focus person’s spouse, and each child. It uses v-if to show sections only when data exists.
PersonDetailView.vue uses v-if/v-else to toggle between edit forms and display mode for spouse relationships. It uses v-for to iterate former spouses.
PersonForm.vue uses v-model on every input field. The submit handler collects the refs into a form data object.
PersonCard.vue uses :class to apply role-based styles — focus, parent, child, spouse, clickable — from a single component definition.
Key terms
Section titled “Key terms”| Directive | What it does |
|---|---|
:attr="value" | Binds a dynamic value to an attribute or prop |
@event="handler" | Attaches an event listener |
.prevent | Calls event.preventDefault() |
.stop | Calls event.stopPropagation() |
v-if / v-else | Conditionally renders (removes from DOM) |
v-show | Conditionally hides (toggles display) |
v-for="item in array" | Renders a list; requires :key |
v-model | Two-way binding between input and state |
:class="{ name: bool }" | Conditionally applies CSS classes |
:style="{ prop: value }" | Applies inline styles |
What is next
Section titled “What is next”Module 05 adds client-side routing. You’ll define routes, use <RouterView> as the page outlet, navigate with <RouterLink>, read route parameters with useRoute, and protect routes with navigation guards. This is what makes FamilyTree a multi-page SPA.