Vue.js 2 template

by Edward Tanguay

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <div>
  Total: {{total}}
  </div>
  <the-counter v-on:increment="incrementTotal"></the-counter>
  <the-counter v-on:increment="incrementTotal"></the-counter>
  <the-counter v-on:increment="incrementTotal"></the-counter>
</div>

JavaScript

Vue.component('the-counter', {
	template: '<button @click="incrementCounter()">{{counter}}</button>',
  data: function() {
  	return {
    	counter: 0
    }
  },
  methods: {
    incrementCounter: function() {
      this.counter++;
      this.$emit('increment');
    }
  }
});

new Vue({
  el: '#app',
  data: {
  	total: 0
  },
  methods: {
  	incrementTotal: function() {
    	this.total++;
    }
  }
});