h1 Vue offical tutorial
hr

div(id="app") {{ message }}
hr

div(id="app2")
  span(v-bind:title="message") {{ message }}
hr

div(id="app3")
  span(v-if="seen") {{ message }}
hr

div(id="app4")
  ol
    li(v-for="todo in todos") {{ todo.text }}
hr

div(id="app5")
  p {{ message }}
  button(v-on:click="reverseMessage") reverse?
hr

div(id="app6")
  p {{ message }}
  input(v-model="message")
hr

div(id="app7")
  //-
      Now we provide each todo-item with the todo object
      it's representing, so that its content can be dynamic.
      We also need to provide each component with a "key",
      which will be explained later.
  //
  ol
    todo-item(
      v-for="item in groceryList",
      v-bind:todo="item",
      v-bind:key="item.id"
    )
hr