0201组件化开发_0201组件技术-CSDN博客

本文链接：https://blog.csdn.net/w_wangewanbuhuidege/article/details/114337331

001_XXXX(h3)

创建组件的两种方式

var Header = { template:‘模板’ , data是一个函数,methods:功能,components:子组件们 }//局部声明

Vue.component(‘组件名’,组件对象);//全局注册等于注册加声明了
组件类型
- 通用组件（例如表单、弹窗、布局类等)
- 业务组件（抽奖、机器分类）
- 页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）
组件开发三步曲：声明、注册、使用
源代码

<html>
<head>
	<title>组件化开发</title>
</head>
<body>
	<div id="app">		
	</div>

	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		/* 创建组件的第一种方式第一步：局部声明 */
		var MyHeader_dl={
			template:`
				<div>我是头部</div>
			`,
		} 
		var My_dlBody_dl=Vue.extend({
			template:`
				<div>我是身体</div>
			`
		})
		//这个是语法糖，与上面创建等价
		// var My_dlBody_dl={
		// 	template:`
		// 		<div>我是身体</div>
		// 	`
		// }
		/* 创建组件的第二种方式：全局注册 */
		Vue.component('MyFooter',{
			template:`
				<div>我是尾部</div>
			`
		})
		new Vue({
			el:'#app',
			/* 创建组件的第一种方式第二步：注册组件 */
			components:{
				MyHeader_dl,
				My_dlBody_dl
			},
			/* ! 组件名和标签名的匹配规则
			 MyHeader_dl ---> my-header_dl
			 My_dlBody_dl ---> my_dl-body_dl
			 */
			template:`
				<div>
					<my-header_dl></my-header_dl>
					<my_dl-body_dl></my_dl-body_dl>
					<my-footer></my-footer>
				</div>
			`,
			data(){
				return{}
			},
		})
	</script>
</body>
</html>

浏览器界面