Vue-03-局部组件的使用

<div id="app"></div>

<script src="js/vue.min.js"></script>
<script>
	//创建一个头部组件
	var Vheader = {
		template:`<div><h2>Header</h2></div>`
	}
	//创建一个左侧组件
	var Vaside = {
		template:`<div><h2>aside</h2></div>`
	}
	//创建一个底部组件
	var Vfooter = {
		template:`<div><h2>footer</h2></div>`
	}
	var App = {
		components:{//挂载三个组件
			Vheader,
			Vaside,
			Vfooter
		},
		template:`
		<div>
		我是一个局部组件
		<Vheader/>
		<Vaside/>
		<Vfooter/>
		</div>`  //调用三个组件
	}

	new Vue({
		el:'#app',
		data(){
			return{

			}
		},
		components:{ //挂载组件
			App
		},
		template:`
			<App/>
		` //调用组件

	})

</script>