andreipfeiffer

<template>
  <div>
    <span>{{ nr }}</span>
  <div>
</template>

<script>
  export default {
    data() {
      return { nr: 0 };

andreipfeiffer

Vue.component('Counter', {
  // define the template in the component
  // or reference a template defined in the DOM
  template: `
    <div>
      <span>{{ nr }}</span>
    <div>
  `,

  // internal state (aka. viewmodel)

andreipfeiffer

<template>
  <input v-model="name" />
</template>

andreipfeiffer

let { items } = this.props;
let children;

if (items.length > 0) {
  children = (
    <ul>
      {items.map(item =>
        <li key={item.id}>{item.name}</li>
      )}
    </ul>

andreipfeiffer

// JSX: using {" "} to add whitespace
<div>
  <b>1</b>
  {" "}
  <b>2</b>
</div>

// Vue renders as expected
<div>
  <b>1</b>