// 定义一个新组件
// 格式：
// 1： 组件为"counter"
// 2: data数据属性: 写函数
// 3: template 模板: 写组件内容(元素和触发的事件)
// 可重复使用的组件:
Vue.component("counter", {
data: function () {
return {count: 0}
},
template: ‘<button v-on:clilck="count++">点击计算点击次数 : {{ count }}</button>‘,
})
// 将页面元素和组件绑定在一起, 一个组件使用的次数是无限的
var fatherCounter = new Vue({
el: ‘#fatherCounter‘,
});
// 页面Html代码
<div id="fatherCounter">
<!-- component 可用无限次使用, 每次运算的逻辑互不影响, 可用理解为类的实例, 每次都单独开辟了一块内存在单独使用 -->
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
</div>
原文：https://www.cnblogs.com/phpcurd/p/11994465.html