這是在學習 Vue 的模板語法和常用特性后自己敲的一個小練習，目的是避免眼高手低，做到掌握 Vue 的基本使用，其中具體涉及的模板語法和常用特性詳細介紹在 xxx 記錄（相關筆記還未總結~~），
頁面結構的搭建
靜態頁面如下圖所示：
功能簡要描述：在表單中輸入編號和圖書名稱在編號唯一（且還未存在）情況下可以添加書籍，添加成功后在表格中展示所有的圖書資訊，點擊洗掉時可以洗掉回應的書籍，點擊修改時將相應的圖書資訊展示到表單中，用戶可以書籍名稱進行修改（編號無法修改），點擊提交即可完成修改，
書寫頁面結構是第一個步驟，根據上圖的靜態頁面書寫的頁面結構示例如下：
<body>
<div class="container">
<div class="header">
<h2>圖書管理</h2>
<div class="form">
<label for="bookId"> 編號：</label>
<input type="text" id="bookId">
<label for="bookName"> 名稱：</label>
<input type="text" id="bookName">
<button>提交</button>
</div>
</div>
<table>
<thead>
<tr>
<th>編號</th>
<th>名稱</th>
<th>時間</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 由于只是結構所以就只寫一行了 -->
<tr>
<td>1</td>
<td>三國演義</td>
<td>2021-04-28</td>
<td><a href="#">修改</a> | <a href="#">洗掉</a></td>
</tr>
</tbody>
</table>
</div>
</body>
簡單的樣式書寫
樣式的話能看就行，純粹只是為了練習 Vue 基礎，沒有必要那么嚴格，所以下面的示例代碼可以略過（不同的人可以不一樣的實作），
<style>
.container {
width: 530px;
height: 700px;
margin: auto;
/* background-color: yellow; */
text-align: center;
}
.form {
padding: 5px 0 10px;
border-bottom: 1px solid black;
background-color: rgb(243, 220, 171);
}
table {
width: 100%;
border-collapse: collapse;
line-height: 35px;
}
thead {
background-color: rgb(243, 220, 171);
}
tbody {
border-left: 1px dashed rgb(243, 220, 171);
border-top: 1px dashed rgb(243, 220, 171);
}
td {
height: 35px;
border-right: 1px dashed rgb(243, 220, 171);
border-bottom: 1px dashed rgb(243, 220, 171);
}
a {
text-decoration: none;
color: #333;
}
a:hover {
color: red;
}
/* button {
height: 22px;
line-height: 22px;
} */
button:hover {
cursor: pointer;
}
input {
outline-style: none;
}
</style>
功能的實作的步驟
互動功能包含圖書添加功能，圖書編輯功能、圖書洗掉功能和圖書的總數統計功能，其中圖書的添加和編輯功能均在表單內操作圖書資訊，其中編輯功能需要在表單中展示圖書資訊，并且圖書 id 資訊無法修改（其實就是只能修改圖書名稱），
添加圖書功能
1、實作圖書例表的展示功能，利用 Vue 生命周期中執行的鉤子函式 mounted() 模擬從后端獲取資料并展示至頁面，
2、在展示資料時對于時間資料需要使用過濾器 dataFormat 將原始資料轉換為特定的格式（在次需要注意過濾器的使用語法），
3、提交按鈕添加點擊事件，但是由于后面編輯功能同時用到該按鈕所以需要設定一個 flag 標記執行的是編輯功能（true）還是添加功能（false），
4、為驗證表單資訊是否完整和圖書名稱是否存在可以設定兩個監聽 id 和 name 的偵聽器（判斷圖書 id 是否已存在放在事件處理函式內的添加邏輯內處理，因為圖書編輯功能 id 無法編輯，即 id 沒有必要在偵聽器內判斷是否存在，），
5、當填寫的資料資訊完整時，提交按鈕不再禁用，可以進行提交，提交后驗證圖書名稱或者 id 是否已存在，如果不存在則進行添加操作，反之進行用戶提示和終止操作，
6、最后添加一個自定義指令用于表單自動獲取焦點，至此整個添加功能已經全部實作，
圖書編輯功能
1、為洗掉按鈕添加點擊事件，因為是 a 元素所以需要使用事件修飾符阻止默認的跳轉行為，系結 modify 事件處理函式，
2、將用于區分提交按鈕的添加和修改功能的 flag 標記值改為 true（修改功能，id 表單不可編輯），并將相應的圖書 id 和 name 資料填充至表單，
3、在提交按鈕的點擊事件處理程式中實作圖書編輯邏輯，但是這里需要深刻理解資料回應式，特別是陣列和物件參考型別資料的回應式特點，
4、最后還需要注意的是，書籍名稱可以不修改直接提交，但是修改后的名稱不能和其他的書籍名稱重復（重名），最后恢復表單狀態，即完成整個編輯功能，
書籍洗掉功能
1、洗掉功能相對比較簡單，為洗掉按鈕系結點擊事件并向事件處理函式傳遞該書籍 id ，
2、可以通過書籍 id 在 books（保存書籍資料的集合）使用 findIndex() 首先查找出該物件在陣列中的索引，然后使用 splice() 方法洗掉陣列中對應索引的元素，
3、還可以使用 filter() 方法篩選出新陣列，然后將新陣列賦值給 books ，
書籍總數的統計
在此使用的是 Vue 中計算屬性的方式實作，設定一個計算屬性 total 用于統計書籍總數，這里主要是鞏固計算屬性的相關知識，需要理解其和方法的區別，
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div class="container" id="app">
<div class="header">
<h2>圖書管理</h2>
<div class="form">
<label for="bookId"> 編號：</label>
<input type="text" id="bookId" v-model.trim="id" v-focus :disabled="flag">
<label for="bookName"> 名稱：</label>
<input type="text" id="bookName" v-model.trim="name">
<button @click="submit" :disabled='!isFull'>提交</button>
</div>
<div class="total">
<span>圖書總數： </span>
<span>{{total}}</span>
<button @click="booksSort(-1)">降序</button>
<button @click="booksSort(1)">升序</button>
</div>
</div>
<table>
<thead>
<tr>
<th>編號</th>
<th>名稱</th>
<th>時間</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 由于只是結構所以就只寫一行了 -->
<tr :key="item.id" v-for="item in books" v-cloak>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<a href="#" @click.prevent="modify(item)">修改</a>
<span>|</span>
<a href="#" @click.prevent="del(item.id)">洗掉</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
flag: false,
isExist: false,
isFull: false,
books: []
},
methods: {
submit: function() {
if (this.flag) {
var index = this.books.findIndex((item) => {
return this.id == item.id;
});
// console.log(index);
// 防止修改名稱為其他書籍名稱
if (this.isExist && this.books[index].name != this.name) {
return alert('書籍重名，無法修改');
}
// 要深刻理解使用陣列索引的方式更新陣列資料不是回應式的問題
this.books[index].name = this.name;
this.id = '';
this.name = '';
this.flag = false;
} else {
// 圖書添加功能
if (this.isExist) {
return alert('圖書已存在不能重復添加');
}
// 這里需要使用箭頭函式否則里面的this指向的就不再是vm
var flag = this.books.some((item) => {
// console.log(this);
return item.id == this.id;
})
if (flag) {
return alert('該圖書 id 已被占用請重新編輯');
}
var book = {};
book.id = this.id;
book.name = this.name;
book.date = +new Date();
this.books.push(book);
this.id = '';
this.name = ''
}
},
modify: function(item) {
this.flag = true;
this.id = item.id;
this.name = item.name
},
del: function(id) {
// 洗掉圖書
// 根據id從陣列中查找元素的索引
// var index = this.books.findIndex(function(item){
// return item.id == id;
// });
// 根據索引洗掉陣列元素
// this.books.splice(index, 1);
// -------------------------
// 方法二：通過filter方法進行洗掉
this.books = this.books.filter(function(item) {
return item.id != id;
});
},
booksSort: function(flag) {
this.books = this.books.sort((a, b) => {
if (flag == -1) return b.id - a.id;
if (flag == 1) return a.id - b.id;
})
}
},
// 監聽name和id的偵聽器
watch: {
name: function(val) {
// 資料完整時將isFull設定為true,默認為false
this.isFull = this.id && this.name;
// 如果書籍名稱已經存在則將isExist設定為true
this.isExist = this.books.some(function(item) {
return item.name == val;
});
},
id: function(val) {
this.isFull = this.id && this.name;
}
},
mounted: function() {
this.books = [{
id: '1',
name: '三國演義',
date: 1619776363317
}]
},
directives: {
focus: {
// 指令定義
inserted: function(el) {
el.focus();
}
}
},
filters: {
// 用于格式化時間資料的過濾器
dateFormat: function(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小時
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.toString().replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
},
computed: {
total: function() {
return this.books.length ? this.books.length : '0';
}
}
})
</script>
在實作上述功能后，發現了一個不足的地方，書籍的展示順序完全與添加時的順序有關，為什么不能按照書籍 id 的大小來顯示呢？常用的開發場景是有一個按鈕可以控制排序方式，可以給按鈕添加事件的形式添加排序功能，但是在添加新的書籍后新增的書籍并未按照該規則進行排序展示，因此我將新增的書籍使用 unshift 方法將其展示在最前面，這樣可能比較符合用戶需求，
各部分功能實作效果展示，
按照上述的思路將各部分功能實作，當然對于排序功能的實作代碼我就不去貼代碼了，現在展示各部分功能實際的效果，
1、添加功能效果演示：書籍資訊不全時提交按鈕禁用，書籍 id 或名稱已存在還試圖添加書籍時終止操作并提示，所有資訊符合時添加成功，將添加的書籍資訊在第一項展示，注意此時的圖書總數和升降序按鈕也可以正常使用，
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-VvZrvFgc-1619789792587)(https://z3.ax1x.com/2021/04/30/gE6528.gif)]](https://img.uj5u.com/2021/05/02/240940021847252.gif)
2、編輯功能：點擊修改按鈕自動在表單展示書籍資訊，id 表單項禁用，當輸入的書籍名稱為已有名稱且不是其原有名稱時終止修改操作并提示，但是注意，如果是原名稱則可以提交修改操作（這里沒有演示，所以特別說明了一下），因為客戶可能誤點了修改而不想做出修改，
3、洗掉功能：點擊洗掉洗掉對應的書籍，不妥之處就是直接洗掉沒有給用戶確定操作的互動效果，會出現誤刪，因此可以添加一個 confirm() 進行詢問，
總結
所有的需求都已經實作，某些需求是為了能夠覆寫所學知識而增加的或者刻意使用所學知識去實作的，整個練習是本人在看完教程后，為避免眼高手低而自己去從零開始實作的，并對其進行了小小的改進，感覺識訓還是有的，下一站 Vue 組件化開發小練習，沖~~~~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/282126.html
標籤：其他
下一篇：開源一個Vue電商專案，歡迎交流