Кнопка-счётчик

До сих пор данные не менялись, пока работало приложение. Но в приложениях они меняются постоянно: покупатель добавляет в заказ эспрессо, и число на странице растёт. Вот кнопка, которая это делает:

<script setup>
import { ref } from "vue";

const espressos = ref(0);

function addEspresso() {
    espressos.value++;
}
</script>

<template>
    <button @click="addEspresso">Добавить эспрессо</button>
    <p>Эспрессо в заказе: {{ espressos }}</p>
</template>

Работать это заставляют три новинки:

• import { ref } from "vue"; берёт из Vue функцию ref, чтобы скрипт мог ею пользоваться, так же как main.js берёт createApp.
• ref(0) создаёт реф — значение, за которым следит Vue; здесь оно начинается с 0. В скрипте значение лежит в espressos.value, поэтому функция увеличивает espressos.value. В шаблоне пишут просто {{ espressos }}, без .value.
• @click="addEspresso" запускает функцию addEspresso при каждом щелчке по кнопке, как это делал addEventListener("click", addEspresso) на курсе JavaScript.

Самое важное — то, чего здесь нет: ни одна строка не выводит новое число на страницу. Когда espressos.value меняется, Vue обновляет каждое место в шаблоне, где показан espressos. На курсе JavaScript после каждого изменения вам приходилось самим менять textContent, и об этом легко было забыть.

Зачем нужны ref и .value? С обычной переменной, let espressos = 0;, число тоже менялось бы, но Vue об этом не знал бы, и страница продолжала бы показывать 0. В уроке «Состояние и события» объясняется, как работают рефы, и рассказывается про события гораздо больше. Пока достаточно повторять этот образец.