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 コマンドを使用して複数のファイルを解凍する方法

推薦する

Vue はコンポーネント間の通信をどのように実装しますか?

目次1. 父と息子のコミュニケーション1.1 親コンポーネント --> 子コンポーネント1.2...

JavaScript キャンバスでカラフルな太陽のハロー効果を実現

この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...

MySQLをインストールして設定し、ルートパスワードを変更する方法

1. インストールapt-get install mysql-server にはアカウントとパスワー...

ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション

ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...

VMware Workstation のインストール Linux (Ubuntu) システム

システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...

MySQLのorder byとlimitを混在させる際の落とし穴の詳細な説明

MySQL では、ソートには order by を、ページングには limit をよく使用します。最...

設計仕様に準拠した設計は良い設計でしょうか?

これまでの数年間、私はいわゆる「設計仕様」についてかなりの数の執筆やコンサルティングを行ってきました...

Docker.v19 で Docker Compose オーケストレーション ツールをインストールして構成する方法

1. Compose の紹介Compose は、マルチコンテナ Docker アプリケーションを定義...

フロントエンドJavaScriptのクラス

目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...

MySQL 8.0.12 インストール設定方法とパスワード変更

この記事ではMySQL 8.0.12のインストールと設定方法を参考までに記録します。具体的な内容は以...

MySQLは数百万のシミュレーションデータ操作コードを自動的に挿入します

私はデータベースツールとして Navicat を使用しています。他のものも同様です。 1. Navi...

光るテキストとちょっとしたJS特殊効果を実現するCSS

実装のアイデア: CSSでtext-shadowを使用してテキストの光る効果を実現します効果画像: ...

React Hooks の一般的な使用シナリオ (概要)

目次1. ステートフック1. 基本的な使い方2. 更新3. 合併を実現する4. 遅延初期化状態5. ...

JSは写真の自動再生効果を実現します

この記事では、写真の自動再生効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な...