使用vue实现简单的图书管理

这个小案例巩固了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>