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

功能介紹：

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

頁面展示：

HTML靜態(tài)模板結(jié)構(gòu)：

<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樣式結(jié)構(gòu)：

<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>// 定義一個帶參數(shù)的過濾器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) {// 只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置},//當(dāng)被綁定的元素插入到 DOM 中時……inserted: function(el) {// 獲得焦點(diǎn)el.focus();},update: function() {// 所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。}});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("請輸入內(nèi)容！！！");} else if (this.flag) {//修改后重新提交this.books.some(item => {if (item.id == this.id) {item.name = this.name;item.date = this.date;//完成更新后終止循環(huán)遍歷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;//根據(jù)ID編輯數(shù)據(jù)//點(diǎn)擊修改后將數(shù)據(jù)填充到表單進(jìn)行修改var book = this.books.filter(function(item) {return item.id == id;});this.id = book[0].id;this.name = book[0].name;},del: function(id) {//刪除圖書// 方法一：根據(jù)id從數(shù)組中查找元素的索引// var index = this.books.findIndex(function(item) {// return item.id == id;// });// //根據(jù)索引刪除數(shù)組元素// this.books.splice(index, 1);//方法二 通過數(shù)組的filter方法this.books = this.books.filter(function(item) {return item.id != id;});}},computed: {total: function() {//利用計(jì)算屬性統(tǒng)計(jì)書本的總量return this.books.length;}},watch: {name: function(val) {//驗(yàn)證圖書是否存在var flag = this.books.some(function(item) {return item.name == val;});if (flag) {this.handleflag = true;} else {this.handleflag = false;}}},mounted: function() {//該生命周期函數(shù)被觸發(fā)的時候，模板已經(jīng)可以使用//一般此時用于獲取后臺數(shù)據(jù)，然后把數(shù)據(jù)填充到模板var data = [{id: 1,name: '水滸傳',date: new Date()}, {id: 2,name: '三國演義',date: new Date()}];this.books = data;}})</script>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。