Summary

In this lesson, you learned that:

  • Between {{ }} can be any JavaScript expression, code that gives a value: {{ price * 8 }}, {{ name.toUpperCase() }}, {{ extras.length }}, {{ extras.join(", ") }} or a template literal.
  • The conditional operator condition ? a : b gives a when the condition is true and b when it's false: {{ open ? "Open" : "Closed" }}. It works anywhere in JavaScript.
  • A template takes only expressions, not statements such as if or for.
  • Attributes that start with v- are directives, instructions for Vue. v-bind:src="logo", or in short :src="logo", sets an attribute from data. Between its quotes is an expression, with texts in single quotes. :disabled="full" adds the attribute while the value is true. Braces don't work in attributes: src="{{ logo }}" stays as it is.
  • :class="{ sold: slices === 0 }" gives an element a class while a condition is true, next to its plain class. Class names with a hyphen go in quotes.
  • :style="{ width: stamps * 10 + '%' }" sets styles from data, with names in camelCase and values with their units.
  • A template can have several elements at the top level. Comments in it are <!-- -->; in the script, // and /* */.

In the next lesson, State and Events, you'll learn how refs work and why they need .value, and your app will react to clicks, typing and keys.

But first, a little practice: the café's sign, which says whether it's open, and a button for ordering a coffee that works only while the café is open.

Instructions

  1. The sign always says OPEN. Make it say OPEN while open is true and CLOSED while it's false. Try it with Turn the sign.

  2. While the café is open, the sign should be green: give it the class open too, while open is true. (In { open: open }, the first open is the class and the second the variable.)

  3. When the café is closed, no one can order: disable the button Order a coffee while open is false.

BackNext