Vue でレスポンシブ フォームとカスタム フォーム コンポーネントを実装するにはどうすればよいですか?

Vue は、フォーム入力を処理するための非常に便利で強力なツールを提供する、一般的に使用される JavaScript フレームワークです。 Vue は、フォームの入力、検証、送信を簡単に処理できるようにするリアクティブ プロパティとイベントを提供します。この記事では、Vue でレスポンシブ フォームとカスタム フォーム コンポーネントを実装する方法を紹介します。

1. Vue レスポンシブ フォームの実装

1. フォーム モデル バインディング

Vue は、フォーム データと自動応答を入力するための非常に簡単な方法を提供します。 v-model ディレクティブを使用すると、フォーム上の各入力フィールドを Vue インスタンスのデータ属性にバインドして、双方向のデータ バインディングを実現できます。

例: 次のコードを通じて単純なフォームを実装できます。このコードでは、入力値が v-model を通じてデータ内のメッセージ属性にバインドされます。入力ボックスに内容を入力すると、入力ボックスの内容とデータ内のメッセージ属性値が同時に更新されます。

<template>
  <div>
    <input type="text" v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>

2. フォーム検証

フォーム検証は日常の Web 開発において避けられないタスクです。 Vue はフォーム検証を処理する独自の方法も提供しており、計算属性とウォッチャー属性を v-model ディレクティブと組み合わせて使用​​することで、フォーム値の検証を簡単に実装できます。

例: 次のコードを使用して簡単なフォーム検証を実装できます。ユーザーがパスワードを入力すると、計算属性とウォッチャー属性を使用してパスワードを検証し、ユーザーにパスワードの強度の入力を求めます。パスワード:

<template>
  <div>
    <label>请输入密码：</label>
    <input type="password" v-model="password" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: "",
    };
  },

  computed: {
    message() {
      let pwd = this.password;
      if (pwd.length <= 5) return "密码强度较弱";
      if (pwd.length <= 9) return "密码强度一般";
      return "密码强度较高";
    },
  },

  watch: {
    password(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal.length >= 10) {
        alert("密码长度不能超过10");
        this.password = oldVal;
      }
    },
  },
};
</script>

3. フォーム送信

フォーム送信は Vue のコア機能です。v-on ディレクティブとメソッド属性を通じて、Vue メソッドをフォーム送信イベント。ユーザーがフォームに記入して送信ボタンをクリックすると、Vue はこのメソッドを呼び出し、フォーム データをパラメーターとして渡します。このメソッドでユーザーが送信したデータを処理できます。

例: 次のコードを通じて単純なフォーム送信を実装できます。ユーザーが送信ボタンをクリックすると、フォーム データを JSON でフォーマットし、コンソールに出力できます:

<template>
  <div>
    <label>请输入用户名：</label>
    <input type="text" v-model="username" />

    <label>请输入密码：</label>
    <input type="password" v-model="password" />

    <button v-on:click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },

  methods: {
    submitForm() {
      let formData = {
        username: this.username,
        password: this.password,
      };

      console.log(JSON.stringify(formData));
    },
  },
};
</script>

2. カスタム フォーム コンポーネントの実装

Vue が提供する組み込みフォーム コンポーネントに加えて、コードの再利用とロジックを実現するための独自のニーズに従っていくつかのカスタム フォーム コンポーネントを定義することもできます。

Vue は、カスタム コンポーネントを定義するための Vue.component() メソッドを提供します。 Vue.component() メソッドを通じてコン​​ポーネントを定義し、このコンポーネントをテンプレートで使用するだけです。

次は、ユーザー定義のフォーム フィールド コンポーネントと組み込みのボタン ボタン コンポーネントを含む、単純なカスタム コンポーネントの例です。このコンポーネントでは、ユーザー定義のフォームフィールドコンポーネントと組み込みボタンコンポーネントを同じフォーム内に配置し、ユーザーがボタンをクリックするとデータの送信リクエストを発行します。

<template>
  <form>
    <custom-input v-model="username" label="用户名：" />
    <custom-input v-model="password" label="密码：" />
    <button type="button" v-on:click="submitForm">提交</button>
  </form>
</template>

<script>
Vue.component("custom-input", {
  props: ["label", "value"],
  template: `
    <div>
      <label>{{ label }}</label>
      <input type="text" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />
    </div>
  `,
});

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },

  methods: {
    submitForm() {
      let formData = {
        username: this.username,
        password: this.password,
      };

      console.log(JSON.stringify(formData));
    },
  },
};
</script>

概要:

Vue でレスポンシブ フォームとカスタム フォーム コンポーネントを実装することは、Web 開発において不可欠なスキルの 1 つです。 v-model ディレクティブの双方向データ バインディング、計算された属性のフォーム検証、ウォッチャー属性のフォーム入力コントロール、および Vue.component() メソッドのカスタム フォーム コンポーネント定義を通じて、効率的、強力、そして保守が容易なフォーム処理システム。

以上がVue でレスポンシブ フォームとカスタム フォーム コンポーネントを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。