Итоги

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

• Между {{ }} может стоять любое выражение JavaScript, то есть код, дающий значение: {{ price * 8 }}, {{ name.toUpperCase() }}, {{ extras.length }}, {{ extras.join(", ") }} или шаблонная строка.
• Условный оператор condition ? a : b даёт a, когда условие истинно, и b, когда ложно: {{ open ? "Открыто" : "Закрыто" }}. Он работает везде в JavaScript.
• В шаблоне допускаются только выражения, а не инструкции вроде if или for.
• Атрибуты, которые начинаются с v-, — это директивы, указания для Vue. v-bind:src="logo", или короче :src="logo", задаёт атрибут из данных. Между кавычками стоит выражение, тексты в нём пишутся в одинарных кавычках. :disabled="full" добавляет атрибут, пока значение истинно. В атрибутах скобки не работают: src="{{ logo }}" остаётся как есть.
• :class="{ sold: slices === 0 }" добавляет элементу класс, пока условие истинно, рядом с его обычным class. Названия классов с дефисом пишут в кавычках.
• :style="{ width: stamps * 10 + '%' }" задаёт стили из данных: названия в camelCase, значения с единицами измерения.
• В шаблоне может быть несколько элементов верхнего уровня. Комментарии в нём — <!-- -->; в скрипте — // и /* */.

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

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