Build pages that keep up with their data by themselves: data shown with {{ }}, lists with v-for, choices with v-if, events and inputs, computed values and components, ending in a to-do app. An optional last lesson builds the same app in Vue, Preact and Svelte.
★ Challenge completeShow data, make a tag for each item, show a tag only when it is needed, and change the data from clicks and typing.
Make a Vue app, keep data in refs, show it on the page with {{ }}, and see the page change by itself when the data changes.
Make one tag for each item in a list with v-for, show a tag only when it is needed with v-if, and watch both keep up as the list changes.
Run a function of your own when something is clicked, join a box to data with v-model, and change a ref's .value in the script.
Values worked out from data with computed, and components you make once and use many times.
Work a value out from other data with computed, so it is worked out again whenever that data changes, and see why a plain calculation goes stale.
Make a tag of your own once with app.component, use it many times, and pass each copy its own data with props and :name="value".
Build a to-do app in milestones. One optional lesson builds the same app in three frameworks.
Build a to-do app in three milestones: add tasks from a box, tick them off with a count of what is left, then make each task a component and clear the done ones.
The same small app in Vue, Preact (React's small cousin) and Svelte: state, worked-out values, events and showing data are the same ideas in all three; only the syntax and the update rules differ.
Progress is saved in this browser only. Nothing is sent anywhere.
For teachers: Teacher guide (notes, answers, solutions, slides and worksheets)