Vue は書籍管理ケースを実装します

<スタイル タイプ="text/css">
    .グリッド{
      マージン: 自動;
      幅: 550ピクセル;
      テキスト配置: 中央;
    }

    .gridテーブル{
      幅: 100%;
      境界線の折りたたみ: 折りたたみ;
    }

    .グリッド th、
    td {
      パディング: 10;
      境界線: 1px 破線オレンジ;
      高さ: 35px;
    }

    .grid th {
      背景色: オレンジ;
    }

    .grid .book {
      幅: 550ピクセル;
      パディング下部: 10px;
      パディング上部: 5px;
      背景色: 芝生の緑;
    }

    .grid .total {
      高さ: 30px;
      行の高さ: 30px;
      背景色: 芝生の緑;
      border-top: 1px 実線オレンジ;
    }
</スタイル>

<div id="アプリ">
    <div クラス = 'グリッド'>
      <div>
        <h1>書籍管理</h1>
        <div class="book">
          <div>
            <ラベル for='id'>
              シリアルナンバー：
            </ラベル>
            <input type="text" id="id" v-model='id' :disabled='flag' v-focus>
            <ラベル名="name">
              名前：
            </ラベル>
            <input type="text" id='名前' v-model='名前'>
            <button @click='handle' :disabled='submitFlag'>送信</button>
          </div>
        </div>
      </div>
      <div クラス = 'total'>
        <span>書籍の総数:</span><span>{{total}}</span>
      </div>
      <テーブル>
        <頭>
          <tr>
            <th>番号</th>
            <th>名前</th>
            <th>時間</th>
            <th>オペレーション</th>
          </tr>
        </thead>
        <t本文>
          <tr :key="item.id" v-for="書籍内のアイテム">
            <td>{{item.id}}</td>
            <td>{{アイテム名}}</td>
            <td>{{item.date | format('yyyy-MM-dd hh:MM:ss')}}</td>
            <td><a href="" @click.prevent='toEdit(item.id)'>編集</a>
              <span>|</span>
              <a href="" @click.prevent='deleteBook(item.id)'>削除</a>
            </td>
          </tr>

        </tbody>
      </テーブル>
    </div>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    Vue.directive('focus', {
      挿入: 関数 (el) {
        el.focus();
      }
    })
    Vue.filter('format', 関数(値, 引数) {
      関数 dateFormat(日付, 形式) {
        if (typeof date === "文字列") {
          var mts = date.match(/(\/Date\((\d +)\)\/)/);
          （mts && mts.length >= 3）の場合{
            日付 = parseInt(mts[2]);
          }
        }
        date = 新しい Date(date);
        if (!date || date.toUTCString() == "無効な日付") {
          戻る "";
        }
        varマップ = {
          "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.replace(/([yMdhmsqS])+/g, 関数(all, t) {
          var v = map[t];
          (v != 未定義)の場合{
            （すべて長さ＞1）の場合{
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            v を返します。
          } そうでなければ (t === 'y') {
            戻り値: (date.getFullYear() + '').substr(4 - all.length);
          }
          すべてを返します。
        });
        戻り形式;
      }
      dateFormat(値、引数)を返します。
    })
    var vm = 新しい Vue({
      el: '#app',
      データ： {
        フラグ: false、
        送信フラグ: false、
        id: ''、
        名前： ''、
        書籍: []
      },
      メソッド: {
        ハンドル: 関数 () {
          if (this.flag) {
            // 編集操作 // は、現在の ID に従って配列内の対応するデータを更新することです this.books.some((item) => {
              （item.id == this.id）の場合{
                アイテム名 = this.name
                //更新操作が完了したらループを終了します。true を返します。
              }
            })
            this.flag = false;
          } それ以外 {
            // 本を追加します var book = {};
            このブックのidは、
            このブックの名前は、
            this.data = '';
            this.books.push(本);
          }
          // フォームをクリアします this.id = '';
          this.name = '';
        }, toEdit: 関数 (id) {
          // IDの変更を無効にする
          this.flag = true;
          // 編集するデータをIDに基づいてクエリする var book = this.books.filter(function (item) {
            item.id == id を返します。
          });
          コンソール.log(ブック)
          //取得したIDをフォームに送信します。this.id = book[0].id;
          this.name = 本[0].name;
        },
        deleteBook: 関数 (id) {
          // 本を削除する // ID に従って配列から要素のインデックスを検索する // var index = this.books.findIndex(function (item) {
          // item.id == id を返します。
          // });
          // インデックスに従って配列要素を削除します // this.books.splice(index, 1)
          // -----------------
          // 方法 2: フィルターメソッドによる削除 this.books = this.books.filter(function (item) {
            item.id != id を返します。
          })
        }
      },
      計算: {
        合計: 関数 () {
          // 本の総数を計算します。 return this.books.length;
        }
      },
      時計：
        名前: 関数 (値) {
          // 書籍名がすでに存在することを確認する var flag = this.books.some(function (item) { return item.name == val; })
          if (フラグ) {
            // 書籍名が存在する this.submitFlag = true
          } それ以外 {
            // 書籍名が存在しません this.submitFlag = false
          }
        }

      },
      マウント: 関数 () {
        // ライフサイクルフック関数がトリガーされたとき。テンプレートはすぐに使用できます // 通常は背景データを取得し、そのデータをテンプレートに入力するために使用されます var data = [{
          id: 1,
          タイトル:『三国志演義』
          日付: 252597867777

        }, {
          id: 2,
          作品名:『水滸伝』
          日付: 564634563453
        }, {
          id: 3,
          タイトル: 『紅楼夢』
          日付: 345435345343
        }, {
          id: 4,
          題名:『西遊記』
          日付: 345345346533
        }]
        this.books = データ
      }
    });
</スクリプト>