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

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

この記事では、書籍管理を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

ケース効果

ケースアイデア

1. 書籍リスト

  • 静的リスト効果の実装
  • データに基づいたテンプレート効果の実装
  • 各行のアクションボタンを処理する

2. 本を追加する

  • フォームの静的効果を実現する
  • ブックフォームフィールドのデータバインディングを追加する
  • ボタンイベントバインディングを追加する
  • ビジネスロジックの追加実装

3. 本を修正する

  • 情報を修正してフォームに入力してください
  • 変更後にフォームを再送信する
  • 追加および変更メソッドを再利用する

4. 本を削除する

  • 削除ボタンバインディング時の処理方法
  • 削除ビジネスロジックの実装

5. 一般的な機能適用シナリオ

  • フィルター (日付のフォーマット)
  • カスタム指示(フォームのフォーカスを取得)
  • 計算されたプロパティ(本の数を数える)
  • 聞き手(本と番号の存在を確認する)
  • ライフサイクル(書籍データ処理)

コード

基本スタイル

<スタイル タイプ="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 = データ
      }
    });
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueはライブラリ管理システムを実装します
  • Vue による書籍管理の実装に関する小規模なケーススタディ
  • Vue.jsは書籍管理機能を実装します
  • vue.js をベースにした書籍管理プラットフォームを素早く構築
  • Vueのライブラリ管理デモの詳しい説明
  • Vueベースの書籍管理機能の実現

<<:  CentOS7 構成 Alibaba Cloud yum ソースメソッドコード

>>:  Linux で unzip コマンドを使用して複数のファイルを解凍する方法

推薦する

XHTML 1.0 リファレンス

機能別に並べ替えNN: このタグをサポートする Netscape の以前のバージョンを示しますIE:...

MySql データベースにおける単一テーブル クエリと複数テーブル結合クエリの効率の比較

この間、プロジェクトに取り組んでいるときに、データ間の接続が非常に複雑なモジュールに遭遇しました。テ...

Linux で TCP 接続の最大数をテストする方法

序文TCP サーバの最大同時接続数に関して、「ポート番号の上限が 65535 であるため、TCP サ...

仕事でよく使うLinuxコマンドまとめ

仕事では、docker や kubernetes などのオープンソース ツールをさらに活用しましょう...

uniappとvueの違いの詳細な説明

目次1. シンプルなページの例2.uni-appはvueコンポーネントとミニプログラムネイティブコン...

JSはマップを使用してdouble配列を統合します

目次序文データのシミュレーション結合されたデータ合併のアイデアコードの表示と分析最初のステップステッ...

よく使われるHTMLタグのインライン要素とブロックレベル要素の詳細な説明

ブロック要素HTMLタグ分類の詳細* 住所 - 住所* blockquote - ブロック引用* c...

MySQL 5.5 の導入に関する問題

MySQL の導入現在、会社ではプラットフォーム運用を通じてMySQLを導入しています。金曜日、プラ...

Linuxはscpコマンドを使用してファイルをローカルコンピュータにコピーし、ローカルファイルをリモートサーバーにコピーします。

以下のように表示されます。リモート サーバーのファイルをローカルにコピーします。 scp -r -P...

一般的なメールボックスで正常に表示できる HTML メールを作成するためのヒント

HTML メールを送信するためのヒント: スタイルを使用してインライン CSS を記述する、使用する...

sqlite を mysql スクリプトに移行する方法

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 パーレル # # https:/...

Zabbix ベースの Jenkins プロセス監視の詳細な説明

1. 監視アーキテクチャ図 2. 実装のアイデアJenkins に Metrics プラグインをイン...

docker インストール後に hello-world を実行する問題を解決する

yumを使用してcentos7.3にDocker V1.13.1をインストールしましたしかし、doc...

IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決策

この記事では、主に、IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決...

HTML 要素に注釈を付けるときにクラスと ID のどちらが優れているかを分析する

Web ページには、非常に複雑な HTML 構造があります。CSS を使用して関連するスタイルを定義...