<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
</div>
<template id="temp">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script>
const dataObj={count:0};
//这是一个计数器的组件，身上有个按钮，每点击一次按钮，就让data 中的count +1
Vue.component('counter',{
template:'#temp',
//data中是个function可以 当设置相同按钮属性时，点击不同按钮 添加的值不同
data:function () {
//return dataObj;
return{count:0}
},
methods:{
increment(){
this.count++
}
}
});
const vm=new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
</body>
</html>