Vue props example

Using pro

by meddario

HTML

<div id="components-demo">
  <button-counter>
  </button-counter>
</div>

Vue

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++"><hash-counter :counter="count"></hash-counter> You clicked me {{ count }} times.</button>'
})

Vue.component('hash-counter', {
	props: ['counter'],
  data: function () {
  	return {
    	dataText: 'data#' + this.counter
    }
  },
  computed: {
  	computedText: function () {
    	return 'computed#' + this.counter
    }
  },
  template: '<span>{{ dataText }} {{ computedText }}</span>'
})

new Vue({ el: '#components-demo' })