初心者のための Vue.js VueJs パートフォームとイベントリスナー-jsチュートリアル-php.cn

初心者のための Vue.js VueJs パートフォームとイベントリスナー

Patricia Arquette

リリース： 2024-10-03 11:16:29

オリジナル

1026 人が閲覧しました

Vue.js for Beginners VueJs Part Form & Event Listener

フォームに Vue.js を使用する理由

フォーム作成における Vue.js の利点:

シンプルなデータバインディング: Vue.js は v-model を使用してフォーム入力とコンポーネントデータの間でデータをバインドし、同期を簡単にします。
反応性: モデルデータに変更を加えるとビューが自動的に更新されるため、ユーザーは大量のコードを記述することなく常に最新のデータを確認できます。
フォーム検証: 計算されたプロパティや VeeValidate などのライブラリを使用して、フォーム入力に検証を簡単に追加できます。
再利用可能なコンポーネント: アプリケーションのさまざまな部分で再利用できるフォームコンポーネントを作成して、コードの可読性と保守性を向上させることができます。
サードパーティライブラリとの統合: Vue.js は、状態管理用の Vuex など、より複雑なフォームを処理するためにさまざまなライブラリと統合できます。

イベントリスナーの処理における Vue.js の利点:

簡単な構文: v-on または略記 @ を使用してイベントリスナーを追加するのは、非常に直感的で読みやすいです。
さまざまなイベントタイプのサポート: Vue.js を使用すると、クリック、入力、送信などの幅広いイベントを一貫した方法で処理できます。
イベント修飾子: Vue.js は、イベントのバブリングを防ぐ .stop など、イベントの動作をより効率的に管理するための修飾子を提供します。
イベントの反応性: Vue.js の強力な反応性システムのおかげで、発生したイベントに基づいてコンポーネントの状態を簡単に変更できます。
カスタムイベントのサポート: コンポーネントを使用する場合、コンポーネント間で通信するためのカスタムイベントを簡単に作成してリッスンできます。

Vue.js でフォームを作成する手順

Vue.js プロジェクトをセットアップする Vue.js プロジェクトがまだない場合は、Vue CLI を使用して作成できます。新しいプロジェクトをセットアップする方法は次のとおりです。

npm install -g @vue/cli
vue create my-form-app
cd my-form-app
npm run serve

ログイン後にコピー

フォームコンポーネントの作成プロジェクトが実行されたら、単純なフォームコンポーネントを作成しましょう。 src/components フォルダーに、MyForm.vue という新しいファイルを作成します。

<template>
  <div>
    <h1>Simple Form</h1>
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" v-model="form.name" required />
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" v-model="form.email" required />
      </div>
      <button type="submit">Submit</button>
    </form>
    <p v-if="submitted">Form has been submitted!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      submitted: false
    };
  },
  methods: {
    handleSubmit() {
      console.log('Submitted data:', this.form);
      this.submitted = true;
      // Reset form
      this.form.name = '';
      this.form.email = '';
    }
  }
};
</script>

ログイン後にコピー

フォームコンポーネントを使用するここで、MyForm コンポーネントをアプリケーションに追加する必要があります。 src/App.vue ファイルを開き、作成したばかりのコンポーネントを含めます。

<template>
  <div id="app">
    <MyForm />
  </div>
</template>

<script>
import MyForm from './components/MyForm.vue';

export default {
  components: {
    MyForm
  }
};
</script>

ログイン後にコピー