图书管理案例（vue）

该案例主要实现功能为图书的添加、删除以及修改。
主要涉及的知识有事件绑定，聚焦、时间格式化、数量统计、侦听器、生命周期等

样式：

<style type="text/css">
    .grid {
      margin: auto;
      width: 500px;
      text-align: center;
    }
    .grid table {
      width: 100%;
      border-collapse: collapse;
    }
    .submit{
      background-color: orange;
      height: 35px;
      width: 500px;
      line-height: 35px;
      border-bottom: 1px dashed white;
    }
    .grid th,td {
      padding: 10;
      border: 1px dashed orange;
      height: 35px;
      line-height: 35px;
    }
    .grid th {
      background-color: orange;
    }
    .total{
      width: 500px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background-color: orange;
      border-bottom: 1px dashed white;
    }
    
  </style>

图书管理基本框架：

<div id="app">
    <div class="grid">
      <table>
        <!-- 编号 名称模块 -->
        <div class="submit">
          <span>编号:</span>
          <input type="text" v-model="id" :disabled="flag" v-focus>
          <span>名称:</span>
          <input type="text" v-model="name">
          <button type='submit' @click="submit" :disabled='submitFlag'>提交</button>
        </div>

        <!-- 图书总数 -->
        <div class='total'>
          <span>图书总数：</span>
          <span >{{total}}</span>
        </div>

        <!-- 编号 名称 时间 操作 -->
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>


        <!-- 图书具体信息 -->
        <tbody>
          <tr :key='item.id' v-for='item in books'>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
            <td>
              <a href="" @click.prevent='change(item.id)' >修改</a>
              <span>|</span>
              <a href="" @click.prevent='del(item.id)'>删除</a>
            </td>
          </tr>
        </tbody>

      </table>
    </div>
  </div>

具体实现：

<script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      图书管理-图书列表展示功能
      注意事项：<a href="" @click.prevent>修改</a>
      事件绑定时，可以只添加修饰符，而不绑定事件函数
    */

    // 聚焦
    Vue.directive('focus', {
      inserted: function (el) {
        el.focus();
      }
    });

    //时间格式化
    Vue.filter('format',function(value,arg){
             function dateFormat(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.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;
}  
        return dateFormat(value,arg);
    });


    var vm = new Vue({
      el: '#app',
      data: {
        submitFlag:false,
        flag:false,
        id:'',
        name:'',
        books: []
      },
      methods:{
        submit:function(){
          if(this.flag){
            this.books.some((item) => {
              if(item.id==this.id){
              item.name=this.name;
              return true;
              }
            });
            flag=false;
          }else{
          //添加新书
          var book={};
          book.id=this.id;
          book.name=this.name;
          book.date="";
          this.books.push(book);
          //信息置空
          this.id='';
          this.name='';
          }
          this.name='';
          this.id='';
        },

        //仅仅筛选数据填充到提交框中
        change:function(id){
          //获取该书
          this.flag=true;
          console.log(id);
          var book=this.books.filter(function(item){
            return item.id==id;
          });
          console.log(book);
          this.id=book[0].id;
          this.name=book[0].name;
        },

        //删除操作
        del:function(id){
          //第一种方法
          /*
          //找到索引
          var index=this.books.findIndex(function(item){
            return item.id==id;
          });
          console.log(index);
          //删除数组元素
          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.submitFlag=true;
        }
        else{
          this.submitFlag=false;
        }
      }
    },
    
    //  和后台连接，生命周期
      mounted:function(){
      var date=[{
          id: 1,
          name: '三国演义',
          date: 2525609975000
        },{
          id: 2,
          name: '水浒传',
          date: 2525609975000
        },{
          id: 3,
          name: '红楼梦',
          date: 2525609975000
        },{
          id: 4,
          name: '西游记',
          date: 2525609975000
        }]
        this.books=date;
    }
  });
  </script>

效果图：