Summary

In this lesson, you learned that:

• Vue makes the page from a template and data. When the data changes, Vue updates the page by itself, so you don't need querySelector(), textContent or createElement().
• A Vue app is made of a few files: index.html with an empty <div id="app">; main.js, which mounts the component App into it with createApp(App).mount("#app") and is the same in every exercise; the component itself, App.vue; and style.css with the app's styles.
• A .vue file has up to three parts: <script setup> with JavaScript, <template> with what the component shows, and <style scoped> with CSS that applies only to this component.
• {{ cafe }} in the template shows the value of the variable cafe from <script setup>. Single braces are just text.
• A value that changes while the app runs is a ref: const count = ref(0);, with import { ref } from "vue"; at the top of the script. In the script, its value is count.value; in the template, just count. @click="addEspresso" runs a function on every click.
• A mistake in a file shows in red under the preview, with its line and column, and the app doesn't run. Errors while the app runs and Vue's warnings, which start with [Vue warn], show in the console.

In the next lesson, Template Syntax, you'll put more than names into {{ }}: calculations, and choices between two texts. And you'll set attributes, classes and styles from your data.

But first, a little practice: the café's cake of the day, with a button for ordering a slice.