ホームページ > 記事 > ウェブフロントエンド > 初心者のための Vue.js VueJs パート フォームとイベント リスナー
Vue.js でフォームを作成する手順
npm install -g @vue/cli vue create my-form-app cd my-form-app npm run serve
<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>
<template> <div id="app"> <MyForm /> </div> </template> <script> import MyForm from './components/MyForm.vue'; export default { components: { MyForm } }; </script>
npm run serve
Vue.js は、Web アプリケーションでフォームを開発し、イベント リスナーを管理する場合に最適です。
Vue.js を使用すると、インタラクティブで応答性の高いフォームを簡単に作成できます。アプリケーションに必要な検証、状態管理、その他の機能を追加することで、このフォームをさらに強化できます。
コーディングを楽しんでください!!!
以上が初心者のための Vue.js VueJs パート フォームとイベント リスナーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。