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: {}
});
