v-on:submit を使用して Vue でフォーム送信イベントをリッスンする方法

Vue は、開発者がインタラクティブなフロントエンド アプリケーションを構築するのに役立つ人気のある JavaScript フレームワークです。フォームは、Vue アプリケーションで非常に一般的なインターフェイス要素です。ユーザーがフォームにデータを入力して送信すると、フォーム送信イベントをリッスンする必要がある場合があります。この記事では、Vue で v-on:submit ディレクティブを使用してフォーム送信イベントをリッスンする方法を紹介します。

まず、Vue でフォーム要素を定義するには、Vue のデータ バインディング構文を使用する必要があります。入力ボックスと送信ボタンのあるフォームがあるとします。

<div id="app">
  <form v-on:submit="handleSubmit">
    <label for="username">用户名:</label>
    <input type="text" id="username" v-model="username">

    <label for="password">密码:</label>
    <input type="password" id="password" v-model="password">

    <button type="submit">提交</button>
  </form>
</div>

上記のコードでは、v-on:submit ディレクティブを通じて、フォームの送信イベントを Vue インスタンスの handleSubmit メソッドにバインドします。ユーザーがフォームにデータを入力して送信ボタンをクリックすると、Vue は自動的に handleSubmit メソッドを呼び出します。 Vue インスタンスでは、フォーム送信イベントを処理するために handleSubmit メソッドを定義する必要があります。

var app = new Vue({
  el: "#app",
  data: {
    username: '',
    password: ''
  },
  methods: {
    handleSubmit: function() {
      alert('用户名：' + this.username + '，密码：' + this.password);
    }
  }
})

上記のコードでは、handleSubmit メソッドはダイアログ ボックスをポップアップし、ユーザーが入力したユーザー名とパスワードを表示します。形で。

handleSubmit メソッドでは、this キーワードを使用して Vue インスタンス内のデータを参照していることに注意してください。したがって、Vue アプリケーションでは、フォーム内のデータに簡単にアクセスして処理することができます。フォーム送信イベントに加えて、Vue は v-on:click、v-on:mouseover、v-on:keydown などの他のイベントもサポートします。

要約すると、Vue の v-on:submit ディレクティブを使用してフォーム送信イベントを簡単にリッスンできます。 Vue インスタンスのメソッド属性でフォーム送信イベントを処理するメソッドを定義します。 Vue のデータ バインディング構文を使用して、フォーム内のデータに簡単にアクセスして操作します。この記事が Vue フォームの開発に役立つことを願っています。

以上がv-on:submit を使用して Vue でフォーム送信イベントをリッスンする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。