Vue example 3

by jeremenichelli

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.0/vue.js"></script>

<app></app>

CSS

body {
    font-family: sans-serif;
}

Babel + JSX

new Vue({
  el: 'app',
  template: `
  	<div id="view">
    	<h1>{{ fullName }}</h1>
    	<button @click="showDescription">Description</button>
    </div>
  `,
  data: {
    firstName: 'John',
    lastName: 'Oliver',
    description: 'Comedian, political commentator and tv host.'
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  },
  methods: {
    showDescription() {
      alert(this.description)
    }
  }
});