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