vue2 フォームの追加、削除、ビジネス ロジックの確認

最新の Web アプリケーションが継続的に開発されているため、フォームは依然としてユーザーとアプリケーション間の重要な対話方法です。人気のあるフロントエンド フレームワークとして、Vue2 はフォームの追加、削除、クエリ操作を迅速に実装できる便利なフォーム処理メソッドを提供します。 Vue2 フォームの追加および削除クエリを実装する前に、まず Vue2 とは何か、およびその基本概念を理解する必要があります。

Vue2 は、プログレッシブ開発をサポートする軽量の JavaScript フレームワークであり、ユーザー インターフェイスを迅速に構築する方法です。 Vue2 の中心となるアイデアは、DOM を JavaScript コードから分離し、オブジェクト モデルをビューにバインドし、コンポーネント化を通じてアプリケーションを構築することです。 Vue2 の主な機能はデータ駆動型ビューであり、コンポーネントの状態変数が変化すると、Vue2 はページ上の対応するビューを自動的に更新します。 Vue2 は、複雑なビジネス ロジックを簡単に実装できる命令やライフサイクル フックなどの機能もサポートしています。

次に、Vue2を使用してフォームの追加、削除、クエリのビジネスロジックを実装する方法を説明します。この例では、Vue2 を使用して簡単な ToDo リスト アプリケーションを作成します。 Vue2のコンポーネント機構を利用してリストフォームを構築し、コンポーネント間のデータ転送による追加・削除・確認操作を実装します。作成するコンポーネントのリストは次のとおりです。

1. TodoList - リスト コンポーネント
2. TodoItem - リスト項目コンポーネント

TodoList コンポーネントは表示に使用されます。すべての TodoList コンポーネント。ToDo 項目のリストですが、TodoItem コンポーネントは 1 つの ToDo 項目の内容を表示するために使用されます。 TodoList コンポーネント内に複数の TodoItem コンポーネントを作成して、完全な ToDo リストを構築します。

まず、単一の ToDo 項目コンテンツを表す TodoItem コンポーネントを作成する必要があります。小道具を使用してデータをコンポーネントに渡します。これらの小道具は、ビューをレンダリングするためにコンポーネントによって内部的に使用されます。 TodoItem コンポーネントで次のコードを定義します。

<template>
  <div>
    <input type="checkbox" v-model="completed">{{ item.text }}
    <button @click="deleteItem">删除</button>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      completed: false
    }
  },
  methods: {
    deleteItem() {
      this.$emit('delete-item', this.item)
    }
  }
}
</script>

上記のコードでは、最初にコンポーネントのテンプレート ファイルを定義し、v-model ディレクティブを使用してコンポーネントの状態を値に双方向にバインドします。入力ボックスの ToDo 項目をユーザーがチェックできるようにするかどうかを決定します。また、「削除」ボタンも追加しました。ユーザーがボタンをクリックすると、$emit メソッドを使用して「delete-item」イベントを発行し、ToDo 項目のデータ オブジェクトをパラメータとして渡します。

次に、TodoList コンポーネントの TodoItem コンポーネントを使用して、複数の ToDo 項目を作成する必要があります。 v-for ディレクティブを使用して、すべての ToDo 項目をループし、各 Todo 項目に TodoItem コンポーネントをレンダリングします。 TodoList コンポーネントで次のコードを定義します。

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <todo-item :item="item" @delete-item="deleteItem"></todo-item>
    </div>
    
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItemText" required />
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      items: [
        { id: 1, text: '完成Vue2表单增删查', completed: false },
        { id: 2, text: '学习JavaScript高级编程', completed: true },
        { id: 3, text: '尝试构建一个全栈应用', completed: false }
      ],
      newItemText: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItemText) {
        let newId = this.items.length + 1
        this.items.push({
          id: newId,
          text: this.newItemText,
          completed: false
        })
        this.newItemText = ''
      }
    },
    deleteItem(item) {
      let index = this.items.findIndex(x => x.id === item.id)
      if (index >= 0) {
        this.items.splice(index, 1)
      }
    }
  }
}
</script>

上記のコードでは、最初に 3 つの ToDo 項目を含むデータ リスト項目を定義します。また、ユーザーが入力した新しい To Do コンテンツを保存するために使用される newItemText 変数も定義します。テンプレートでは、v-for ディレクティブを使用してすべての ToDo 項目をループし、TodoItem コンポーネントを使用して各 ToDo 項目をレンダリングします。また、新しい項目を追加するために送信イベントをフォームにバインドし、メソッドに新しい ToDo 項目を追加しました。

ToDo 項目を削除するときは、findIndex メソッドを使用してフォーム内で削除する項目のインデックスを検索し、splice メソッドを使用してリストから項目を削除します。ユーザーが ToDo 項目をチェックすると、コンポーネントの状態変数が更新され、v-model ディレクティブを使用して入力ボックスの値にバインドされます。

このような単純な例を通して、Vue2 を使用してフォームの追加、削除、クエリを実装するのが非常に便利で高速であることがわかります。実際のアプリケーションでは、Vue2 のコンポーネント メカニズムとデータ バインディング機能を使用して、開発をスピードアップし、エラーの可能性を減らし、より複雑なビジネス要件を達成できます。

以上がvue2 フォームの追加、削除、ビジネス ロジックの確認の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。