vue2 フォームの追加、削除、ビジネスロジックの確認-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-05-08 09:11:07

オリジナル

566 人が閲覧しました

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

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

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

TodoList - リストコンポーネント
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 サイトの他の関連記事を参照してください。