andreipfeiffer

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

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

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

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

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>
  <div>
    <span>{{ nr }}</span>
  <div>
</template>

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

andreipfeiffer

<template>
  <input :value="name" @change="update"/>
</template>

<script>
  export default {
    methods: {
      update(event) {
        this.name = event.target.value;
      }

andreipfeiffer

// props declaration
export default {
  props: ['name', 'age']
}


// props declaration, validation & default values
export default {
  props: {
    name: String,

andreipfeiffer

// parent component
template: '<Child @save="saveData" />',
methods: {
  saveData() {/**/};
}


// child component
template: '<button @click="onClick">Save</button>',
methods: {

andreipfeiffer

// global Event Bus
const eventBus = new Vue();

/* ... */

// some deeply nested component
methods: {
  onClick() {
    // emit a custom event on the Event Bus, not on "this" component
    eventBus.$emit('save');

andreipfeiffer

export default {
  template: `
    <transition name="slide">
      ...
    </transition>
  `
}