1. 首先将文件夹进行分类
组件化
2. 分析
- 由上面的图可以看出，我们先将功能进行模块化划分，将公共部分提取出来，放到一个common的文件夹内，然后根据不同的页面进行创建不同的文件夹，详细如上图所示。
3. 源代码展示
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div id="app">
<app-goods></app-goods>
</div>
<!-- vue的全局组件, 全局自定义指令, 全局过滤器必须在vue实例之前定义, 否则vue实例无法解决 -->
<script src="./lib/vue.js"></script>
<!-- 公共组件 -->
<script src="./components/common/header.js"></script>
<script src="./components/common/footer.js"></script>
<script src="./components/common/list.js"></script>
<script src="./components/common/search.js"></script>
<!-- 页面级别组件 -->
<script src="./components/goods/goods.js"></script>
<script src="./components/home/home.js"></script>
<script src="./components/login/login.js"></script>
<!-- 导入过滤器 -->
<script src="./filter/date.js"></script>
<!-- 导入自定义指令 -->
<script src="./directive/focus.js"></script>
<!-- 入口 -->
<script src="./main.js"></script>
</body>
</html>
- style/main.css
.wrapper {
width: 800px;
margin: 20px auto;
}
.operation {
margin-bottom: 10px;
text-align: center;
line-height: 20px;
font-size: 18px;
}
.operation input {
padding: 5px;
border: 1px solid deepskyblue;
}
.operation button {
border-radius: 3px;
background-color: deepskyblue;
}
.search {
text-align: left;
line-height: 20px;
font-size: 18px;
}
.search input {
padding: 5px;
border: 1px solid deeppink;
}
#tb{
width: 800px;
border-collapse: collapse;
margin: 20px auto;
}
#tb th{
background-color: #0094ff;
color:white;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
#tb td{
padding: 5px;
text-align: center;
border: 1px solid black;
}
- ./components/common/header.js
/*
* @Author: Robyn
* @Date: 2017-11-12 19:27:25
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-12 19:27:25
*/
Vue.component('app-header', {
template: `
<header>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</header>`,
props: ['title'],
data: function() {
return {
content: '这是头部文件内容'
};
}
});
- ./components/common/footer.js
/*
* @Author: Robyn
* @Date: 2017-11-12 19:28:12
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-12 19:28:32
*/
Vue.component('app-footer', {
template: `
<footer>
<p>{{ content }}</p>
<address>{{ address }}</address>
</footer>`,
data: function() {
return {
content: '这里是尾部内容',
address: '北京市'
};
}
});
- ./components/common/list.js
/*
* @Author: Robyn
* @Date: 2017-11-12 19:29:30
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-12 19:29:30
*/
Vue.component('app-list', {
template: `
<table id="tb">
<tr>
<th>编号</th>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<!-- 没有数据才显示, 有数据隐藏 -->
<tr v-if="list.length == 0">
<td colspan="4">列表无数据</td>
</tr>
<!-- 渲染商品列表 -->
<tr v-for="item in list" >
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime | date }}</td>
<td>
<!-- @符号是v-on的简写方式 -->
<a href="#" @click="deleteBtn(item.id)">删除</a>
</td>
</tr>
</table>`,
props: ['list'],
data: function() {
return {};
},
methods: {
// 子组件里面监听删除按钮的点击事件, 但是不负责删除操作,
// 而是当收到点击事件的时候, 告诉父亲, 它要杀要刮随便
deleteBtn(id) {
this.$emit('del', id);
}
}
});
- ./components/common/search.js
/*
* @Author: Robyn
* @Date: 2017-11-12 19:30:12
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-12 19:30:12
*/
Vue.component('app-search', {
template: `
<div class="search">
<input type="text" placeHolder="请输入筛选内容" v-model="searchKey">
</div>`,
data: function() {
return {
searchKey: ''
};
},
watch: {
// 当这个值变量时, 我通过自定义事件通知父, 同时把最新的值也给传过去
searchKey() {
this.$emit('change', this.searchKey);
}
}
});
- ./components/goods/goods.js
/*
* @Author: Robyn
* @Date: 2017-11-12 19:31:03
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-12 19:31:03
*/
Vue.component('app-goods', {
template: `
<article>
<app-header v-bind:title="'商品管理'"></app-header>
<app-search v-on:change="search"></app-search>
<app-list v-bind:list="searchGoodsList" v-on:del="deleteGoods"></app-list>
<app-footer></app-footer>
</article>
`,
data: function() {
return {
goodsList: [
{ id: 1, name: '法拉利', ctime: new Date() },
{ id: 2, name: '玛莎拉蒂', ctime: new Date() },
{ id: 3, name: '兰博基尼', ctime: new Date() },
{ id: 4, name: '火箭', ctime: new Date() }
],
searchKeyword: ''
};
},
methods: {
// 通过id删除商品
deleteGoods(delId) {
this.goodsList = this.goodsList.filter(
goods => goods.id != delId
);
},
// 接收搜索子组件传递过来的新值
search(keyword) {
this.searchKeyword = keyword;
}
},
computed: {
// 搜索后的商品列表
searchGoodsList() {
return this.goodsList.filter(
goods => goods.name === this.searchKeyword || this.searchKeyword == ''
);
}
}
});
- ./components/home/home.js
/*
* @Author: Robyn
* @Date: 2017-11-12 19:31:33
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-12 19:31:33
*/
Vue.component('app-home', {
template: `
<article>
<app-header v-bind:title="'首页'"></app-header>
<app-footer></app-footer>
</article>
`,
data: function() {
return {};
}
});
- ./components/login/login.js
/*
* @Author: Robyn
* @Date: 2017-11-12 19:32:08
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-12 19:32:08
*/
Vue.component('app-login', {
// 每个组件的模版, 必须要使用一个根元素包裹起来
template: `
<article>
<app-header v-bind:title="'登陆'"></app-header>
<app-footer></app-footer>
</article>
`,
data: function() {
return {};
}
});
- ./filter/date.js
/*
* @Author: Robyn
* @Date: 2017-11-12 19:32:43
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-12 19:32:43
*/
// 实现一个处理日期的过滤器
Vue.filter('date', function(time) {
var date = new Date(time);
return `${ date.getFullYear() }-${ date.getMonth() + 1 }-${ date.getDate() }`;
});
- ./directive/focus.js
/*
* @Author: Robyn
* @Date: 2017-11-12 19:33:19
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-12 19:33:19
*/
// 实现一个全局自动焦点指令
Vue.directive('focus', {
inserted(node) {
node.focus();
}
});
- ./main.js
/*
* @Author: Robyn
* @Date: 2017-11-12 19:33:49
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-12 19:33:49
*/
new Vue({
el: '#app',
data: {}
});
