<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type=""></script>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>当前计数:{{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script type="text/javascript">
//2.注册组件(全局组件,意味着可以在多个vue的实例下面使用)
Vue.component('cpn',{
template:'#cpn',
data(){
return{
counter:0,
}
},
methods:{
increment(){
this.counter++;
},
decrement(){
this.counter--;
}
}
})
const app=new Vue({
el:'#app',
data:{
},
})
</script>
</body>
</html>
显示结果: