<div id="app">
<counter heading="Likes" color="green"></counter>
<counter heading="Dislikes" color="red"></counter>
</div>
<template id="counter_template">
<h1>{{heading}}</h1>
<button @click="count+=1" style="background:{{color}}">{{count}}</button>
</template>
<script src="vue.min.js"></script>
<script>
Vue.component('counter',{
template:'#counter_template',
props:['heading','color'],
data:function(){
return {count:0} //每个组件返回全新的数据对象
}
})
new Vue({
el:'#app'
})
</script>