Vue的组件化编码------小案例------初始化显示
1.组件化编码的步骤
分三步: ①拆分页面. ②先实现一个静态页面. ③再实现动态页面.
静态组件显示的内容数据是固定的、没有交互, 动态组件数据是动态的、存在交互.
将本例中的静态页面划分为如下4个组件:
本例的HTML:
One More Thing 👇
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./bootstrap.css">
<style>
.reply {
margin-top: 0px;
}
li {
transition: .5s;
overflow: hidden;
}
.handle {
width: 40px;
border: 1px solid #ccc;
background: #fff;
position: absolute;
right: 10px;
top: 1px;
text-align: center;
}
.handle a {
display: block;
text-decoration: none;
}
.list-group-item .centence {
padding: 0px 50px;
}
.user {
font-size: 22px;
}
</style>
</head>
<body>
<div id="app">
<div>
<header class="site-header jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>请发表对Vue的评论</h1>
</div>
</div>
</div>
</header>
<div class="container">
<div class="col-md-4">
<form class="form-horizontal">
<div class="form-group">
<label>用户名</label>
<input type="text" class="form-control" placeholder="用户名">
</div>
<div class="form-group">
<label>评论内容</label>
<textarea class="form-control" rows="6" placeholder="评论内容"></textarea>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default pull-right">提交</button>
</div>
</div>
</form>
</div>
<div class="col-md-8">
<h3 class="reply">评论回复：</h3>
<h2 style='display: none'>暂无评论，点击左侧添加评论！！！</h2>
<ul class="list-group">
<li class="list-group-item">
<div class="handle">
<a href="javascript:;">删除</a>
</div>
<p class="user"><span >xxx</span><span>说:</span></p>
<p class="centence">Vue不错!</p>
</li>
<li class="list-group-item">
<div class="handle">
<a href="javascript:;">删除</a>
</div>
<p class="user"><span >yyy</span><span>说:</span></p>
<p class="centence">Vue有点难!</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
|
之后开始正式拆分组件.
2.创建Vue组件
- ①先清空src目录, 并新建空白main.js入口文件.
- ②将第三方库bootstrap.css文件放在static/css目录下, 并在当前Vue项目的index.html中引入.
- ③拆分编写各组件, 实现静态页面.
- ④在静态页面添加数据和交互, 实现动态页面.
①拆分搭建静态页面
App.vue:
One More Thing 👇
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <template>
<div>
<header class="site-header jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>请发表对Vue的评论</h1>
</div>
</div>
</div>
</header>
<div class="container">
<Add/>
<List/>
</div>
</div>
</template>
<script>
import Add from './components/Add'
import List from './components/List'
export default {
components: {
Add,
List
}
}
</script>
<style scoped>
</style>
|
main.js:
One More Thing 👇
1
2
3
4
5
6
7
8
9
| import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: {
App
},
template: '<App/>'
})
|
Add.vue:
One More Thing 👇
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <template>
<div class="col-md-4">
<form class="form-horizontal">
<div class="form-group">
<label>用户名</label>
<input type="text" class="form-control" placeholder="用户名">
</div>
<div class="form-group">
<label>评论内容</label>
<textarea class="form-control" rows="6" placeholder="评论内容"></textarea>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default pull-right">提交</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'Add'
}
</script>
<style scoped>
</style>
|
List.vue:
One More Thing 👇
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| <template>
<div class="col-md-8">
<h3 class="reply">评论回复：</h3>
<h2 style='display: none'>暂无评论，点击左侧添加评论！！！</h2>
<ul class="list-group">
<li class="list-group-item">
<div class="handle">
<a href="javascript:;">删除</a>
</div>
<p class="user"><span >xxx</span><span>说:</span></p>
<p class="centence">Vue不错!</p>
</li>
<li class="list-group-item">
<div class="handle">
<a href="javascript:;">删除</a>
</div>
<p class="user"><span >yyy</span><span>说:</span></p>
<p class="centence">Vue有点难!</p>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'List'
}
</script>
<style scoped>
.reply {
margin-top: 0px;
}
li {
transition: .5s;
overflow: hidden;
}
.handle {
width: 40px;
border: 1px solid #ccc;
background: #fff;
position: absolute;
right: 10px;
top: 1px;
text-align: center;
}
.handle a {
display: block;
text-decoration: none;
}
.list-group-item .centence {
padding: 0px 50px;
}
.user {
font-size: 22px;
}
</style>
|
目前, 还没进一步拆分List.vue组件, 等到添加动态组件时再进一步拆分.
最后, npm run dev当前项目显示如下图, 达到了预期效果.
②添加数据
观察下面图片, 先分析图中一条条的评论中数据类型. 每条数据是一个对象, 包含: username、content属性. List组件区域整体数据构成对象数组 comments. 在分析数据 comments 放在哪个组件. 由于 Add 组件也会用到该数据(向数组中添加新的评论信息), 所以将 comments 放到 Add 和 List 组件的父组件 App 中定义.
在哪定义数据
被多个组件共用的数据, 放到它们的父组件中. 只有当前组件用到的数据, 放到当前组件中即可.
如何传递数据
本组件中定义的数据, 仅在当前组件中可用. 但在父组件中定义的数据, 如何传递到其他组件呢?
这就涉及到一个术语: 组件间通信.
最简单最原始的方式: 通过标签属性传递
例: 在App组件中将comments传递给List组件
1
2
3
| <!--注意属性名一定要用强制数据绑定-->
<!--注意属性名可以自定义, .但一般与要传递的数据一致-->
<List :comments='comments'/>
|
如何接收数据
接收数据, 在Vue中叫做声明接收属性: 这个属性就会成为组件对象的属性.
1
2
3
4
5
6
7
| <script>
export default {
props: {
comments: Array
}
}
</script>
|
