Building apps: cheat sheet

Apps with Vue · In any playground, open Reference to copy these.

<h1> heading

The biggest heading. Use it once for the page title.

<h1>Heading</h1>

Example

<h1>Robotics Club</h1>

margin

Space outside an element, between it and its neighbours.

margin: 10px;

Example

<style>
  p {
    border: 1px solid gray;
    margin: 20px;
  }
</style>
<p>One</p>
<p>Two</p>

computed

A value worked out from other data. Vue works it out again whenever that data changes, so it never goes stale. Never set it yourself.

const total = computed(() => adults.value * 12);

heading outline

Headings are the page's outline: one h1, then h2 for each part, h3 inside those. Never pick a level for its size; set the size with CSS.

<h1>Page title</h1>
<h2>A part of the page</h2>
<h3>A part of that part</h3>

padding

Space inside an element, between its edge and its content.

padding: 10px;

Example

<style>
  p {
    background-color: lightblue;
    padding: 20px;
  }
</style>
<p>Room inside</p>

border

A line around an element: thickness, style, colour.

border: 2px solid black;

Example

<style>
  p {
    border: 2px solid black;
  }
</style>
<p>Boxed</p>

component and props

A tag of your own, made once and used many times: <player-card :name="p.name"></player-card>. The colon passes a value. Make the app with const app = createApp(...), add components, then app.mount("#app").

app.component("player-card", {
  props: ["name"],
  template: `<p>{{ name }}</p>`
});