Vue组件

Vue 局部组件 全局组件

Vue.Compoent('bnts',{
	 template:`
            <button>我是全局组件</button>
       `
})
	<div id='app' >
	
	</div>

var App_Header={
		el:'#app',
	template:`
	<div class='Header'>
		我是头部
		<btns/>
	</div>
	`
	data(){
	return{}
	},
	components:{
		
	}
	}
var AppContent={
		el:'#app',
	template:`
	<div class='Content'>
		我是内容
		<btns/>
	</div>
	`
	data(){
	return{}
	},
	components:{
		
	}
	}
var AppSildBar={
		el:'#app',
	template:`
	<div class='SildBar'>
		我是侧边栏
		<btns/>
	</div>
	`
	data(){
	return{}
	},
	components:{
		
	}
	}
// 注册一个局部入口组件
// 然后给
	var App={
	el:'#app',
	template:`
	<div class='Box'>
	我是入口组件
	<App_Header/>
	<AppSildBar/>
	<AppContent/>,
	</div>
	`
	data(){
	return{}
	},
	components:{
		AppSildBar,
		AppContent,
		App_Header
	}
	}
	
	new Vue({
		el:'#app',
		data(){
		return{
		}
		},
		compoenents:{
		App
		}
	})