<!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>Document</title>
</head>
<body>
<!-- 什么是组件？ 拥有专属的HTML,CSS,JS和数据的页面独立区域
为什么？重用
何时用？只要发现页面中有一个区域可能被反复使用，都要定义成组件
创建：每个组件都是一个缩微的 new Vue()
使用组件：组件在html中其实就是一个可重用的标签而已。组件名就是就是标签名。所以组件起名不要驼峰命名！因为HTML标签不区分大小写。可用-分隔多个单词
new Vue()必须写，因为是new Vue扫描页面时，发现不认识的标签，才会去加载自定义的组件
加载时：会用组件的template中的HTML模板片段，代替不认识的标签。
template必须有一个父元素包裹
Vue.conponent('组件名',{
tempalte:``, 模板，放着html片段
data(){
return {//调用一次data(),返回一个新的return
//模型变量
}
},
methods:{},
watch:{ },
computed:{},
created(){},
mounted(){},
})
new Vue({
el:"#app"
})
-->
<!-- 自定义组件 -->
<div id="app">
<counter></counter><br>
<counter></counter><br>
<counter></counter><br>
</div>
<script src="vue2.js"></script>
<script>
Vue.component('counter',{
template:`<div> <button @click=change(-1)>-</button><span>{{n}}</span><button @click=change(+1)>+</button> </div>`,
data(){
return{
n:1
}
},
methods:{
change(i){
this.n+=i
}
}
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
