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;}
body { height: 10000px;}
/*头部组件css开始*/
#header {width: 100%; height: 40px; background-color: #666; color: #fff; text-align: center; line-height: 40px;top: 0; left: 0; z-index: 10;}
#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;}
/*头部组件css结束*/
/*内容组件css开始*/
#list { position: relative; top : 40px; overflow: hidden}
#list .list_user p { background-color: #ccc; padding-left: 10px;}
#list .list_user ul li { height: 50px; line-height: 50px;border-bottom: 1px #ccc solid; padding-left: 10px;}
#list .list_index { position: fixed; right: 10px; top: 50%; font-size: 20px; }
#list .list_index li { margin: 5px 0;}
/*内容组件css结束*/
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 头部组件html开始 -->
<my-header custom-title="通讯录" custom-fixed>
<button v-on:touchstart="backBtn" slot="left">返回</button>
<button v-on:touchstart="homeBtn" slot="right">主页</button>
</my-header>
<!-- 头部组件html结束 -->
<!-- 内容组件html开始 -->
<div id="list">
<ul class="list_user">
<li>
<p>A</p>
<ul>
<li>a1</li>
<li>a2</li>
<li>a3</li>
</ul>
</li>
<li>
<p>B</p>
<ul>
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ul>
</li>
</ul>
<ul class="list_index">
<li>A</li>
<li>B</li>
</ul>
</div>
<!-- 内容组件html结束 -->
</div>
<script>
// 头部组件开始
Vue.component('my-header', {
template: `<div id="header" v-bind:style="{'position': customFixed ? 'fixed' : 'absolute'}">
<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>
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;}
body { height: 10000px;}
/*头部组件css开始*/
#header {width: 100%; height: 40px; background-color: #666; color: #fff; text-align: center; line-height: 40px;top: 0; left: 0; z-index: 10;}
#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;}
/*头部组件css结束*/
/*内容组件css开始*/
#list { position: relative; top : 40px; overflow: hidden}
#list .list_user p { background-color: #ccc; padding-left: 10px;}
#list .list_user ul li { height: 50px; line-height: 50px;border-bottom: 1px #ccc solid; padding-left: 10px;}
#list .list_index { position: fixed; right: 10px; top: 50%; font-size: 20px; }
#list .list_index li { margin: 5px 0;}
/*内容组件css结束*/
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 头部组件html开始 -->
<my-header custom-title="通讯录" custom-fixed>
<button v-on:touchstart="backBtn" slot="left">返回</button>
<button v-on:touchstart="homeBtn" slot="right">主页</button>
</my-header>
<!-- 头部组件html结束 -->
<!-- 内容组件html开始 -->
<my-list></my-list>
<!-- 内容组件html结束 -->
</div>
<script>
// 头部组件开始
Vue.component('my-header', {
template: `<div id="header" v-bind:style="{'position': customFixed ? 'fixed' : 'absolute'}">
<slot name="left"></slot>
{{customTitle}}
<slot name="right"></slot>
</div>`,
props: {
'customTitle': {
type: String,
default: '标题'
},
'customFixed': {
type: Boolean,
default: false
}
}
})
// 头部组件结束
// 内容组件js开始
Vue.component('my-list', {
template: `<div id="list">
<ul class="list_user">
<li>
<p>A</p>
<ul>
<li>a1</li>
<li>a2</li>
<li>a3</li>
</ul>
</li>
<li>
<p>B</p>
<ul>
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ul>
</li>
</ul>
<ul class="list_index">
<li>A</li>
<li>B</li>
</ul>
</div>`,
props: {
}
})
// 内容组件js结束
var vm = new Vue({
el: "#app",
methods: {
backBtn: function () {
alert("backBtn");
},
homeBtn: function () {
alert("homeBtn");
}
}
})
</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;}
/*头部组件css开始*/
#header {width: 100%; height: 40px; background-color: #666; color: #fff; text-align: center; line-height: 40px;top: 0; left: 0; z-index: 10;}
#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;}
/*头部组件css结束*/
/*内容组件css开始*/
#list { position: relative; top : 40px; overflow: hidden}
#list .list_user p { background-color: #ccc; padding-left: 10px;}
#list .list_user ul li { height: 50px; line-height: 50px;border-bottom: 1px #ccc solid; padding-left: 10px;}
#list .list_index { position: fixed; right: 10px; top: 50%; font-size: 20px; }
#list .list_index li { margin: 5px 0;}
/*内容组件css结束*/
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 头部组件html开始 -->
<my-header custom-title="通讯录" custom-fixed>
<button v-on:touchstart="backBtn" slot="left">返回</button>
<button v-on:touchstart="homeBtn" slot="right">主页</button>
</my-header>
<!-- 头部组件html结束 -->
<!-- 内容组件html开始 -->
<my-list :user-data="userData"></my-list>
<!-- 内容组件html结束 -->
</div>
<script>
// 头部组件开始
Vue.component('my-header', {
template: `<div id="header" v-bind:style="{'position': customFixed ? 'fixed' : 'absolute'}">
<slot name="left"></slot>
{{customTitle}}
<slot name="right"></slot>
</div>`,
props: {
'customTitle': {
type: String,
default: '标题'
},
'customFixed': {
type: Boolean,
default: false
}
}
})
// 头部组件结束
// 内容组件js开始
var userData = [
{"index": "A", "users": [
{"name": "a1", "tel": "13520331111"},
{"name": "a2", "tel": "13520331112"},
{"name": "a3", "tel": "13520331113"}
]},
{"index": "B", "users": [
{"name": "b1", "tel": "13520331121"},
{"name": "b2", "tel": "13520331122"},
{"name": "b3", "tel": "13520331123"}
]},
{"index": "C", "users": [
{"name": "c1", "tel": "13520331131"},
{"name": "c2", "tel": "13520331132"},
{"name": "c3", "tel": "13520331133"}
]},
{"index": "D", "users": [
{"name": "d1", "tel": "13520331141"},
{"name": "d2", "tel": "13520331142"},
{"name": "d3", "tel": "13520331143"}
]},
{"index": "E", "users": [
{"name": "e1", "tel": "13520331151"},
{"name": "e2", "tel": "13520331152"},
{"name": "e3", "tel": "13520331153"}
]},
{"index": "F", "users": [
{"name": "f1", "tel": "13520331161"},
{"name": "f2", "tel": "13520331162"},
{"name": "f3", "tel": "13520331163"}
]}
]
Vue.component('my-list', {
template: `<div id="list">
<ul class="list_user">
<li v-for="item in userData">
<p>{{item.index}}</p>
<ul>
<li v-for="user in item.users">{{user.name}}</li>
</ul>
</li>
</ul>
<ul class="list_index">
<li>A</li>
<li>B</li>
</ul>
</div>`,
props: {
'user-data': {
type: Array,
default: function () {
return []
}
}
}
})
// 内容组件js结束
var vm = new Vue({
el: "#app",
data: {
userData: userData
},
methods: {
backBtn: function () {
alert("backBtn");
},
homeBtn: function () {
alert("homeBtn");
}
}
})
</script>
</body>
</html>
1.4.做内容分发
列表组件不需要做内容分发
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;}
/*头部组件css开始*/
#header {width: 100%; height: 40px; background-color: #666; color: #fff; text-align: center; line-height: 40px;top: 0; left: 0; z-index: 10;}
#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;}
/*头部组件css结束*/
/*内容组件css开始*/
#list { position: relative; top : 40px; overflow: hidden}
#list .list_user p { background-color: #ccc; padding-left: 10px;}
#list .list_user ul li { height: 50px; line-height: 50px;border-bottom: 1px #ccc solid; padding-left: 10px;}
#list .list_index { position: fixed; right: 10px; top: 50%; font-size: 20px; }
#list .list_index li { margin: 5px 0;}
/*内容组件css结束*/
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 头部组件html开始 -->
<my-header custom-title="通讯录" custom-fixed>
<button v-on:touchstart="backBtn" slot="left">返回</button>
<button v-on:touchstart="homeBtn" slot="right">主页</button>
</my-header>
<!-- 头部组件html结束 -->
<!-- 内容组件html开始 -->
<my-list :user-data="userData"></my-list>
<!-- 内容组件html结束 -->
</div>
<script>
// 头部组件开始
Vue.component('my-header', {
template: `<div id="header" v-bind:style="{'position': customFixed ? 'fixed' : 'absolute'}">
<slot name="left"></slot>
{{customTitle}}
<slot name="right"></slot>
</div>`,
props: {
'customTitle': {
type: String,
default: '标题'
},
'customFixed': {
type: Boolean,
default: false
}
}
})
// 头部组件结束
// 内容组件js开始
var userData = [
{"index": "A", "users": [
{"name": "a1", "tel": "13520331111"},
{"name": "a2", "tel": "13520331112"},
{"name": "a3", "tel": "13520331113"}
]},
{"index": "B", "users": [
{"name": "b1", "tel": "13520331121"},
{"name": "b2", "tel": "13520331122"},
{"name": "b3", "tel": "13520331123"}
]},
{"index": "C", "users": [
{"name": "c1", "tel": "13520331131"},
{"name": "c2", "tel": "13520331132"},
{"name": "c3", "tel": "13520331133"}
]},
{"index": "D", "users": [
{"name": "d1", "tel": "13520331141"},
{"name": "d2", "tel": "13520331142"},
{"name": "d3", "tel": "13520331143"}
]},
{"index": "E", "users": [
{"name": "e1", "tel": "13520331151"},
{"name": "e2", "tel": "13520331152"},
{"name": "e3", "tel": "13520331153"}
]},
{"index": "F", "users": [
{"name": "f1", "tel": "13520331161"},
{"name": "f2", "tel": "13520331162"},
{"name": "f3", "tel": "13520331163"}
]}
]
Vue.component('my-list', {
template: `<div id="list">
<ul class="list_user" ref="listUser">
<li v-for="item in userData">
<p>{{item.index}}</p>
<ul>
<li v-for="user in item.users">{{user.name}}</li>
</ul>
</li>
</ul>
<ul class="list_index" ref="listIndex">
<li @touchstart="setScroll" v-for="item in userIndex">{{item}}</li>
</ul>
</div>`,
props: {
'user-data': {
type: Array,
default: function () {
return []
}
}
},
computed: {
userIndex: function () {
return this.filterIndex(this.userData);
}
},
methods: {
//取出右侧索引栏的数据
filterIndex: function (data) {
var result = [];
for (var i = 0; i < data.length; i++) {
if (data[i].index) {
result.push(data[i].index);
}
}
return result;
},
// 让右侧索引上下居中对齐
setListIndexPos: function () {
var iH = this.$refs.listIndex.offsetHeight;
this.$refs.listIndex.style.marginTop = - iH / 2 + 'px';
},
// 点击索引按钮让页面滚动到当前索引的位置
setScroll: function (ev) {
var aP = this.$refs.listUser.getElementsByTagName('p');
for (var i = 0; i < aP.length; i++) {
if (aP[i].innerHTML == ev.target.innerHTML) {
window.scrollTo(0, aP[i].offsetTop)
}
}
}
},
mounted: function () {
// 在初始化的时候执行函数：让右侧索引上下居中对齐
this.setListIndexPos();
}
})
// 内容组件js结束
var vm = new Vue({
el: "#app",
data: {
userData: userData
},
methods: {
backBtn: function () {
alert("backBtn");
},
homeBtn: function () {
alert("homeBtn");
}
}
})
</script>
</body>
</html>
下一篇：同样的组件开发流程小案例演示
博主联系方式:
- 微信：34419369
- QQ: 34419369
- 公众号：前方录
- 有什么不懂的地方欢迎联系我，帮到你是我会很开心