1.组件：
页面的每一个模块都是一个组件
分为：
局部组件 全局组件
2.全局组件
Vue.component(参数1，参数2)
参数1：组件名称---做标签进行使用的（组件名称大写，不允许与html标签名字相同）
参数2：组件的配置项--->对象(可抽出单独写)
这个对象会有一些属性，这些属性只要vue里面有的属性那么这里面都会有
（template,data,methods.computed,watch，生命周期函数等），简单的来说这个组件其实就是小型vue实例
template:里面写的是html结构(其实是虚拟DOM)
data:是一个函数 必须返回一个对象
3.局部组件
局部组件在vue的内部进行实现
new Vue({
el:"#app",
components:{
key:val
}
key:组件名称
val:组件的配置项
})
4.为什么组件内部data是一个函数？
组件可以复用，
如果是对象的情况下，在组件复用时可能会导致data中的数据出现覆盖或者调用出错。
因此是一个函数，这样的情况下，每次使用组件，都会调用函数，每次函数执行完毕后会返回一个新的对象 而不是公用的一个对象
5.组件和vue实例的区别
1、组件内部多了一个属性叫做template
2、组件内部的data不在是一个对象了 而是一个函数 需要返回一个对象
全局组件案例：
<body>
<div id="app">
<!-- 使用中间件 -->
<banner-con></banner-con>
</div>
<div id="app2">
<banner-con></banner-con>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
//配置项
const banner = {
//模板
template:`<div>
<img v-for="(item,index) in imgs" :src="item" />
</div>`,
//注意data是一个函数，必须return一个对象
//数据
data(){
return {
imgs:[
"https://pic.maizuo.com/usr/movie/9f80ee6f3351c49dcf9de57dfbc8cdfe.jpg",
"https://pic.maizuo.com/usr/movie/5a406a685eb7906b793181328d571ad7.jpg",
"https://pic.maizuo.com/usr/movie/9a843566ffc11c80e1747e7af8a5e48a.jpg"
]
}
},
methods:{
},
created(){
console.log(this);
}
}
Vue.component("banner-con",banner)
var vm = new Vue({
el:"#app"
})
var vm2 = new Vue({
el:"#app2"
})
</script>
局部组件案例
<body>
<div id="app">
<!-- 使用中间件 -->
<banner-con></banner-con>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
//配置项
const banner = {
//模板
template:`<div>
<img v-for="(item,index) in imgs" :src="item" />
</div>`,
//模板字符串
data(){
return {
imgs:[
"https://pic.maizuo.com/usr/movie/9f80ee6f3351c49dcf9de57dfbc8cdfe.jpg",
"https://pic.maizuo.com/usr/movie/5a406a685eb7906b793181328d571ad7.jpg",
"https://pic.maizuo.com/usr/movie/9a843566ffc11c80e1747e7af8a5e48a.jpg"
]
}
},
methods:{
}
}
var vm = new Vue({
el:"#app",
//局部组件，数据，方法等都是在配置项中写
components:{
//key:组件的名称，value组件的配置项，可单独写
"banner-con":banner
}
})
</script>