Vue.js组件开发精要-优快云博客

本文详细介绍Vue.js中创建和使用组件的两种方法，包括局部声明和全局注册，阐述通用组件、业务组件与页面组件的区别，并通过实例演示组件的声明、注册及应用过程。

创建组件的两种方式：

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

Vue.component('组件名',组件对象);//全局注册 等于注册加声明了

组件类型：
通用组件（例如表单、弹窗、布局类等)
业务组件（抽奖、机器分类）
页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）
组件开发三步曲：声明、注册、使用

//局部声明

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件化开发</title>
	<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script type="text/javascript">
	//声明局部组件 语法糖
	var myHeader = {
		template:
		`<div>
			这是头部
		 </div>
		`
	}
	var myBody = {
		template:
		`<div>
			这是身体
		 </div>
		`
	}
	new Vue({
		el:'#app',
		//注册
		components:{
            myHeader,
			myBody
		},
		//使用
		template:
		`<div>
			<my-header></my-header>
			<my-body></my-body>
		 </div>
		`,
		data(){
			return {

			}
		}
	})
</script>
</html>

运行效果图:
在这里插入图片描述
//全局注册等于注册加声明了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件化开发</title>
	<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script type="text/javascript">
    //全局注册 等于注册加声明了
    Vue.component('myFooter',{
    	template:
    	`<div>
    		这是尾部
    	 </div>
    	`
    })
	new Vue({
		el:'#app',
		//使用
		template:
		`<div>
			<my-footer></my-footer>
		 </div>
		`,
		data(){
			return {

			}
		}
	})
</script>
</html>

运行效果图:
在这里插入图片描述