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.
Each lesson works two ways. Students can work through the online tutorial at their own pace (it checks their answers and saves their progress in their browser), or you can teach it to the whole class from the slides, then send students into the tutorial for the Modify and Make steps.
Every lesson guide has plain-language notes, the answers to every check, a solution for every task, and slides and a worksheet for Waypoints Prepare. These guide pages are not linked from student pages, but they are not secret either: keep printed Teacher editions for answers you do not want students to find.
Whole-course cheat sheet: Open to print (every command, grouped by unit: a handout for the final challenge)
Show data, make a tag for each item, show a tag only when it is needed, and change the data from clicks and typing.
Vue is a JavaScript framework: code someone else wrote that does the repetitive work of keeping a page up to date. You keep the data (made with ref, so Vue watches it) and write the page once, with the data in it: {{ score }} shows a value, v-for makes a tag for each item in a list, v-if shows a tag only when something is true, v-model joins a box to data, and @click runs a function. When the data changes, Vue changes the page. Nobody writes textContent or createElement any more.
A scoreboard operator who watches the game and updates the board without being asked. You only change the score. It breaks because the operator only watches what you point out to them: data made with ref. A plain variable changes in silence, and the board never moves.
ref(0) to ref(10) and run it.const count = ref(0) to let count = 0 and click. Nothing happens, and there is no error.score.value++). On the page, never ({{ score }}).vue.js line, and that the tag is inside #app.It replaces the DOM course's two jobs with one. Bootstrap did the same for CSS: borrowed code for repetitive work. React and Svelte share the same ideas (the optional last lesson).
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown
Values worked out from data with computed, and components you make once and use many times.
Two tools for building real apps. A computed value is worked out from other data, computed(() => adults.value * 12), and Vue works it out again whenever that data changes: a basket total, a count of unread messages. A component is a tag of your own, app.component("player-card", { props: [...], template: ... }), written once and used many times; props are the data each copy is given, passed with a colon (:wins="p.wins").
A spreadsheet: a total cell is a formula, so it updates when the numbers change (computed), and a template letter with blanks is filled in for each person (a component with props). It breaks because a spreadsheet works out every formula; Vue works out only values made with computed. A plain calculation in setup is like typing the total in by hand: right once, then wrong.
computed(…) back to a plain calculation and click: the total stops.:wins and see what the cards show.:wins="p.wins".The final challenge uses both: a computed count of tasks left and a component for each task.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown
Build a to-do app in milestones. One optional lesson builds the same app in three frameworks.
Students build a to-do app from everything in the course, in three milestones with fading support: most of the code, then an outline in comments, then only the goals. Each milestone has its own starting point (Reset to this task's start), so a student who falls behind can still finish. Then they add a feature of their own. The optional lesson builds the same kind of app in Vue, Preact and Svelte.
The to-do list is the classic first app for every framework, because it needs data, events, a worked-out value and a component, and nothing else.
Building flat-pack furniture with the instructions thinning out: step-by-step for the first drawer, a diagram for the second, just a photo for the third. It breaks if a student skips the first two: the milestones are the instructions.
Build milestone 1 yourself before the lesson, then open the finished app and tick a task: say which Vue piece makes each thing happen.
filter is a shorter way, for later.The optional lesson compares Vue with Preact (React's small cousin) and Svelte, so students see which ideas belong to all frameworks.
Cheat sheet: Open to print (A4, with a picture of what each command draws) · Markdown