Vue-组件化开发
组件化开发
概念
- 组件化开发就是将视图进行抽取,封装为一个可以重复使用的模块,提高了代码效率,增强可维护性.
举例:
1 | <body> |
多组件示例
header.js
1 | Vue.component('app-header', |
footer.js
1 | Vue.component('app-footer', { |
content.js
1 | Vue.component('app-content', |
1 | <body> |
项目实例
- 目录结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18$ tree .
.
├── components
│ ├── app.js
│ ├── appLeft.js
│ ├── appNavBarr.js
│ └── home
│ ├── AppHome.js
│ ├── dashboard.js
│ └── homeList.js
├── index.html
├── main.js
├── news.html
└── style
├── bootstrap.min.css
└── dashboard.css
3 directories, 11 files - 详细代码展示
- AppHome.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20;(function () {
const template = `
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<!--右边上半区域-->
<h1 class="page-header">Dashboard</h1>
<dashboard></dashboard>
<!--右边下半区域-->
<h2 class="sub-header">Section title</h2>
<home-list></home-list>
</div>`
window.AppHome = {
template,
components: {
Dashboard,
homeList
}
}
})() - dashboar.js
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;(function () {
window.Dashboard = {
template: ` <div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</div>`
}
})() - HomeList.js
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;(function () {
window.Dashboard = {
template: ` <div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</div>`
}
})() - app.js
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;(function () {
const template = ` <!--头部导航区域-->
<!--必须要有一个根元素, 有且仅有一个,下面添加div标签-->
<div>
<app-navbar></app-navbar>
<!--核心区域:分左右两边-->
<div class="container-fluid">
<div class="row">
<!--左边菜单栏区域-->
<app-left></app-left>
<!--右边主页面区域: 分上下两个区域-->
<app-home></app-home>
</div>
</div>
</div>`
window.App = {
template,
components: {
AppNavbar, //等价于AppNavbar:AppNavbar ,AppNavbar在appNavBarr.js中引入
appLeft,
AppHome,
}
}
})() - appLeft.js
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;(function () {
window.appLeft = {
template: `<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<!--<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>-->
<li @click="currentActive(item)" :class="{active: current === item}" v-for="item in top"><a :href="item.url">{{item.name}}</a></li>
</ul>
<ul class="nav nav-sidebar">
<li @click="currentActive(item)" :class="{active: current === item}" v-for="item in middle"><a :href="item.url">{{item.name}}</a></li>
</ul>
<ul class="nav nav-sidebar">
<li @click="currentActive(item)" :class="{active: current === item}" v-for="item in bottom"><a :href="item.url">{{item.name}}</a></li>
</ul>
</div>`,
data(){
return {
top:[
{name:'Overview',url:'#'},
{name:'Reports',url:'#'},
{name:'Analytics',url:'#'},
{name:'Export',url:'#'},
],
middle:[
{name:'Nav item',url:'#'},
{name:'Nav item again',url:'#'},
{name:'RepOne more navorts',url:'#'},
{name:'Another nav item',url:'#'},
{name:'More navigation',url:'#'},
],
bottom: [
{name:'Nav item again',url:'#'},
{name:'One more nav',url:'#'},
{name:'Another nav item',url:'#'},
],
current: top[1]
}
},
methods:{
currentActive(item){
this.current = item
}
}
}
})() - appNavBar.js
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// 自执行函数
;(function () {
window.AppNavbar = { // template: 为反单引号' ` ',用于杜航引入
template: ` <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{ProjectName}}</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" v-on:blur="searchFun" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>`,
data(){
return {
ProjectName:"XiaoXin"
}
},
methods: {
searchFun() {
alert('For search')
}
}
}
})() - main.js
1
2
3
4
5
6
7
8
9
10var vm = new Vue({
el: '#app',
// Vue的实例中引用了组件后, 会将这个组件的渲染结果替换掉"#app"中的元素
// <app></app>模板中已经存在一个根元素div标签,为了不会和入口处div标签重复
// 就可以通过template属性后面的值代替
template: '<app></app>',
components: {
App
}
}) - index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18$ tree .
.
├── components
│ ├── app.js
│ ├── appLeft.js
│ ├── appNavBarr.js
│ └── home
│ ├── AppHome.js
│ ├── dashboard.js
│ └── homeList.js
├── index.html
├── main.js
├── news.html
└── style
├── bootstrap.min.css
└── dashboard.css
3 directories, 11 files
- AppHome.js
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com
文章标题:Vue-组件化开发
文章字数:1.8k
本文作者:Aaron
发布时间:2019-12-08, 23:42:05
最后更新:2019-12-14, 10:10:04
原始链接:http://blog.linuxerbulo.com/2019/12/08/Vue-%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。