這個小案例鞏固了vue的基礎知識，主要涉及了各種指令的操作，自定義指令、生命周期、偵聽器、過濾器、計算屬性等的實踐。完成的功能有對圖書的增刪改和統計圖書的總量。

功能介紹：

• 添加圖書：輸入編號和名稱點擊提交按鈕即可添加圖書，這里在名稱表單中有一個監聽器（name），如果名稱相同提交按鈕就失效，主要是使用數組的push()方法；
• 修改圖書：點擊修改按鈕將圖書的信息填充到表單中，但是編號不能修改，使用disabled=‘true’來使其失效，然后修改名稱之后再點擊提交進行修改。將數據填充到表單使用數組的filter()方法，然后使用some()方法來對數組進行遍歷，修改指定索引的圖書信息；
• 刪除圖書：方法一是通過獲取刪除圖書的id來進行刪除，使用的是數組的findIndex()方法，再使用splice()方法進行刪除；方法二通過數組的filter()方法來進行過濾。
• 自定義指令：使用Vue.directive()定義一個獲取焦點的全局指令（v-focus）并應用在輸入編號的表單中；
• 過濾器：使用Vue.filter()定義一個過濾器（format）將將日期轉為自己想要的格式；
• 計算屬性：在vue實例中添加一個參數屬性computed來統計圖書的總數量，直接統計圖書的長度即可實現；
• 偵聽器：在vue實例中添加一個參數屬性watch來驗證圖書是否存在，并且應用在輸入名稱的表單里，如果圖書已經存在則提交按鈕則會失效。
• 生命周期：使用mounted()鉤子函數將數據填充到模板中。

頁面展示：

HTML靜態模板結構：

<div id="app"><div class="title">圖書管理</div><div class="book"><label for="id">編號：</label><input type="text" id="id" v-model='id' :disabled='flag' v-focus><label for="name">名稱：</label><input type="text" id="name" v-model='name'><button @click='handle' :disabled='handleflag'>提交</button></div><div class="total"><span>圖書總量：</span><span>{{total}}</span></div><table cellspacing="0"><tr><th>編號</th><th>名稱</th><th>時間</th><th>操作</th></tr><tr :key='item.id' v-for='item in books'><td v-cloak>{{item.id}}</td><td v-cloak>{{item.name}}</td><td v-cloak>{{item.date | format('yyyy-MM-dd')}}</td><td><button @click='edit(item.id)'>修改</button> | <button @click='del(item.id)'>刪除</button></td></tr></table></div>

css樣式結構：

<style>* {padding: 0;margin: 0;}#app {width: 1200px;margin: 100px auto;text-align: center;}.title {font-size: 25px;}.book {margin-top: 20px;}table {margin: 30px 0 0 410px;}table tr:first-child {background-color: peru;}tr td,th {width: 100px;border: 1px dotted peru;}button {/* background-color: pink; */border: none;}.total {margin-top: 20px;background-color: orange;width: 100px;margin-left: 548px;}</style>

js代碼：

<script>// 定義一個帶參數的過濾器Vue.filter('format', function(value, arg) {if (arg == 'yyyy-MM-dd') {return value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();}});// 自定義全局指令`v-focus`Vue.directive('focus', {bind: function(el) {// 只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置},//當被綁定的元素插入到 DOM 中時……inserted: function(el) {// 獲得焦點el.focus();},update: function() {// 所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。}});var vm = new Vue({el: '#app',data: {id: '',name: '',date: new Date(),flag: false,handleflag: false,books: []},methods: {handle: function() {if (this.id == '' || this.name == '') {alert("請輸入內容！！！");} else if (this.flag) {//修改后重新提交this.books.some(item => {if (item.id == this.id) {item.name = this.name;item.date = this.date;//完成更新后終止循環遍歷return true;};})this.flag = false;} else {//添加圖書var book = {};book.id = this.id;book.name = this.name;book.date = this.date;this.books.push(book);}this.id = '';this.name = '';},edit: function(id) {//禁止修改編號this.flag = true;//根據ID編輯數據//點擊修改后將數據填充到表單進行修改var book = this.books.filter(function(item) {return item.id == id;});this.id = book[0].id;this.name = book[0].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;});}},computed: {total: function() {//利用計算屬性統計書本的總量return this.books.length;}},watch: {name: function(val) {//驗證圖書是否存在var flag = this.books.some(function(item) {return item.name == val;});if (flag) {this.handleflag = true;} else {this.handleflag = false;}}},mounted: function() {//該生命周期函數被觸發的時候，模板已經可以使用//一般此時用于獲取后臺數據，然后把數據填充到模板var data = [{id: 1,name: '水滸傳',date: new Date()}, {id: 2,name: '三國演義',date: new Date()}];this.books = data;}})</script>

總結

以上是生活随笔為你收集整理的使用vue实现简单的图书管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。