Итоги

В этом уроке вы узнали, что:

• Vue собирает страницу из шаблона и данных. Когда данные меняются, Vue сам обновляет страницу, поэтому querySelector(), textContent и createElement() не нужны.
• Приложение на Vue состоит из нескольких файлов: index.html с пустым <div id="app">; main.js, который монтирует в него компонент App через createApp(App).mount("#app") и одинаков в каждом упражнении; сам компонент App.vue; и style.css со стилями приложения.
• В файле .vue до трёх частей: <script setup> с JavaScript, <template> с тем, что показывает компонент, и <style scoped> с CSS, который действует только на этот компонент.
• {{ cafe }} в шаблоне показывает значение переменной cafe из <script setup>. Одинарные скобки — просто текст.
• Значение, которое меняется во время работы приложения, — это реф: const count = ref(0);, а вверху скрипта — import { ref } from "vue";. В скрипте его значение — count.value, в шаблоне — просто count. @click="addEspresso" запускает функцию при каждом щелчке.
• Ошибка в файле показывается красным под предпросмотром, со строкой и столбцом, и приложение не запускается. Ошибки во время работы и предупреждения Vue, которые начинаются с [Vue warn], видны в консоли.

В следующем уроке, «Синтаксис шаблонов», вы будете писать в {{ }} не только имена: вычисления и выбор между двумя текстами. А ещё вы будете задавать атрибуты, классы и стили из данных.

Но сначала немного практики: торт дня в кафе и кнопка, чтобы заказать кусочек.