组件是可复用的Vue实例
1.我们可以在一个通过new Vue创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
注意当点击按钮时，每个组件都会各自独立维护它的count。因为你每用一次组件，就会有一个它的新
实例
被创建。
当我们定义这个 <jishuqi> 组件时，你可能会发现它的data 并不是像这样直接提供一个对象：
data: {
count: 0
}
所以
一个组件的data选项必须是一个函数
，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
代码：
<body>
<div id="pp">
<jishuqi></jishuqi>
<jishuqi></jishuqi>
<jishuqi></jishuqi>
<jishuqi></jishuqi>
</div>
<script>
Vue.component("jishuqi",{
data:function () {
return {
count:0
}
},
template:'<button v-on:click="count+=1">点击了{{count}}次</button>'
})
var v=new Vue({
el:"#pp"
})
</script>
</body>
运行结果：
2.
如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到
<body>
<div id="p">
<!--<button v-on:click.once="counter+=1">增加点击次数1</button>-->
<button v-on:click="counter+=1">点击次数{{counter}}</button>
<button v-on:click="counter+=1">点击次数{{counter}}</button>
<button v-on:click="counter+=1">点击次数{{counter}}</button>
<button v-on:click="counter+=1">点击次数{{counter}}</button>
<p>目前点击了{{counter}}次</p>
</div>
<script>
var v=new Vue({
el:"#p",
data:{
counter:0
}
})
</script>
</body>
运行结果：