vue组件开发流程 · 前方录博客

联系前方录:微信/QQ：34419369QQ交流群：632528856

学习大纲

一个完整的网页通常会被分成很多个小模块进行开发。完整的网页比作一台机器的话，每个小模块会被当成一个机器的零件，我们把小模块称之为组件。这个组件是怎么生成的呢？具体流程是什么呢？一个小案例：手机页面头部组件，来说明一下这个流程

vue组件开发的流程

想要使下面的代码有效果必须要下载好vue.js文件哈。并且要注意引入路径是否正确，要不然页面会无效果哦

例子效果图

图 1

1.1.编写基础html结构和css样式

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>vue通迅录组片</title>
	<style>
		* { margin: 0; padding: 0;}
		li {list-style: none;}
		#header {width: 100%; height: 40px; background-color: #666; color: #fff; text-align: center; line-height: 40px;}
		#header button {height: 40px; line-height: 40px; text-align: center; padding: 0 5px;}
		#header button:first-of-type { float: left;}
		#header button:last-of-type { float: right;}
	</style>
	<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
	<div id="header">
		<button>返回</button>
		通迅录
		<button>主页</button>
	</div>	
</div>
<script>
var vm = new Vue({
	el: "#app"
})
</script>
</body>
</html>

1.2.提取出组件

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>vue通迅录组片</title>
	<style>
		* { margin: 0; padding: 0;}
		li {list-style: none;}
		#header {width: 100%; height: 40px; background-color: #666; color: #fff; text-align: center; line-height: 40px;}
		#header button {height: 40px; line-height: 40px; text-align: center; padding: 0 5px;}
		#header button:first-of-type { float: left;}
		#header button:last-of-type { float: right;}
	</style>
	<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
	<my-header></my-header>
</div>
<script>
Vue.component('my-header', {
	template: `<div id="header">
		<button>返回</button>
			通迅录
		<button>主页</button>
	</div>`
})
var vm = new Vue({
	el: "#app"
})
</script>
</body>
</html>

1.3.给组件安排数据传输

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>vue通迅录组片</title>
	<style>
		* { margin: 0; padding: 0;}
		li {list-style: none;}
		#header {width: 100%; height: 40px; background-color: #666; color: #fff; text-align: center; line-height: 40px;}
		#header button {height: 40px; line-height: 40px; text-align: center; padding: 0 5px;}
		#header button:first-of-type { float: left;}
		#header button:last-of-type { float: right;}
	</style>
	<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
	<my-header custom-title="通讯录" custom-fixed></my-header>
</div>
<script>
Vue.component('my-header', {
	template: `<div id="header" v-bind:style="{'position': customFixed ? 'fixed' : 'static'}">
		<button>返回</button>
		{{customTitle}}
		<button>主页</button>
		</div>`,
	props: {
		'customTitle': {
			type: String,
			default: '标题'
		},
		'customFixed': {
			type: Boolean,
			default: false
		}
	}
})
var vm = new Vue({
	el: "#app"
})
</script>
</body>
</html>

1.4.做内容分发

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>vue通迅录组片</title>
	<style>
		* { margin: 0; padding: 0;}
		li {list-style: none;}
		#header {width: 100%; height: 40px; background-color: #666; color: #fff; text-align: center; line-height: 40px;}
		#header button {height: 40px; line-height: 40px; text-align: center; padding: 0 5px;}
		#header button:first-of-type { float: left;}
		#header button:last-of-type { float: right;}
	</style>
	<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
	<my-header custom-title="通讯录" custom-fixed>
		<button slot="left">返回</button>
		<button slot="right">主页</button>
	</my-header>
</div>
<script>
Vue.component('my-header', {
	template: `<div id="header" v-bind:style="{'position': customFixed ? 'fixed' : 'static'}">
		<slot name="left"></slot>
		{{customTitle}}
	        <slot name="right"></slot>
	        </div>`,
	props: {
		'customTitle': {
			type: String,
			default: '标题'
		},
		'customFixed': {
			type: Boolean,
			default: false
		}
	}
})
var vm = new Vue({
	el: "#app"
})
</script>
</body>
</html>

1.5.给组件添加事件和方法

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>vue通迅录组片</title>
	<style>
		* { margin: 0; padding: 0;}
		li {list-style: none;}
		#header {width: 100%; height: 40px; background-color: #666; color: #fff; text-align: center; line-height: 40px;}
		#header button {height: 40px; line-height: 40px; text-align: center; padding: 0 5px;}
		#header button:first-of-type { float: left;}
		#header button:last-of-type { float: right;}
	</style>
	<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
	<my-header custom-title="通讯录" custom-fixed>
		<button v-on:touchstart="backBtn" slot="left">返回</button>
		<button v-on:touchstart="homeBtn" slot="right">主页</button>
	</my-header>
</div>
<script>
Vue.component('my-header', {
	template: `<div id="header" v-bind:style="{'position': customFixed ? 'fixed' : 'static'}">
					<slot name="left"></slot>
					{{customTitle}}
					<slot name="right"></slot>
				</div>`,
	props: {
		'customTitle': {
			type: String,
			default: '标题'
		},
		'customFixed': {
			type: Boolean,
			default: false
		}


	}
})
var vm = new Vue({
	el: "#app",
	methods: {
		backBtn: function () {
			alert("backBtn");
		},
		homeBtn: function () {
			alert("homeBtn");
		}
	}
})
</script>
</body>
</html>

下一篇：同样的组件开发流程小案例演示

博主联系方式:

微信：34419369
QQ: 34419369
公众号：前方录
有什么不懂的地方欢迎联系我，帮到你是我会很开心

Leave a Reply 取消回复