<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<button v-on:click="count++">我被点击了{{count}}次</button>
<!-- 使用全局组件 -->
<counter></counter>
<counter></counter>
<counter></counter>
<!-- 使用局部组件 -->
<button-c></button-c>
<button-c></button-c>
<button-c></button-c>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 定义全局组件，方便复用,各组件counter会自动隔离，不会共用。
// 1、组件其实也是一个vue实例，因此它在定义时也会接受：data、methods、生命周期函数等。
// 2、不同的是组件不会与页面的元素绑定，否则就无法复用了，因此组件没有el属性。
// 3、但是组件渲染需要html模板，所以增加了template属性，值就是html模板。
// 4、全局组件定义完毕，任何vue实例可以直接在html中通过组件名称来使用组件了。
// 5、data必须是一个函数，不再是一个对象。
Vue.component("counter",{
template:`<button v-on:click="count++">我被点击了{{count}}次</button>`,
data() {
return {
count:1
}
}
});
// 局部组件 :需要在vue实例中声明components属性。局部组件名称可以自定义
const buttonCounter = {
template:`<button v-on:click="count++">我被点击了{{count}}次~~</button>`,
data() {
return {
count:1
}
},
};
new Vue({
el:"#app",
data:{
count:1
},
components: {
'button-c':buttonCounter
}
})
</script>
</body>
</html>
