🎯 Introduction

Vue.js provides powerful ways to connect data and UI, making your applications dynamic and interactive.

This is done using data binding, especially two-way binding with v-model, which is widely used in forms.

---

🔹 1. Data Binding in Vue.js

Data binding means connecting your JavaScript data → HTML UI.

---

✅ One-Way Binding (Data → UI)

<p>{{ message }}</p>

data() {
  return {
    message: "Hello Vue"
  }
}

👉 When message changes → UI updates automatically

---

🔹 2. Two-Way Data Binding (v-model)

Two-way binding means:

👉 Data ⇄ UI (both directions)

• Input changes → data updates
• Data changes → input updates

---

✅ Example:

<input v-model="name">
<p>Hello {{ name }}</p>

data() {
  return {
    name: ""
  }
}

👉 User types → UI updates instantly ⚡

---

🔥 How v-model Works Internally

v-model is shorthand for:

:value="data"
@input="data = $event.target.value"

---

🔹 3. Form Handling in Vue.js

Vue makes handling forms very easy using v-model.

---

✅ Example: Simple Form

<div id="app">
  <form @submit.prevent="submitForm">
    
    <input v-model="name" placeholder="Enter name">
    
    <input v-model="email" placeholder="Enter email">
    
    <button type="submit">Submit</button>
    
  </form>  <p>Name: {{ name }}</p>
  <p>Email: {{ email }}</p>
</div>

Vue.createApp({
  data() {
    return {
      name: "",
      email: ""
    }
  },
  methods: {
    submitForm() {
      alert("Form Submitted")
    }
  }
}).mount('#app')

---

🔹 4. Different Input Types with v-model

✅ Text Input

<input v-model="username">

---

✅ Checkbox

<input type="checkbox" v-model="isChecked">

---

✅ Radio Button

<input type="radio" value="Male" v-model="gender">
<input type="radio" value="Female" v-model="gender">

---

✅ Select Dropdown

<select v-model="city">
  <option>Delhi</option>
  <option>Mumbai</option>
</select>

---

🔹 5. Form Modifiers

🔹 .lazy

Updates only when input loses focus

<input v-model.lazy="name">

---

🔹 .number

Converts input to number

<input v-model.number="age">

---

🔹 .trim

Removes extra spaces

<input v-model.trim="name">

---

🔥 Real-World Example (Form + Binding)

<div id="app">
  <form @submit.prevent="submitForm">
    
    <input v-model.trim="name" placeholder="Name">
    <input v-model.number="age" placeholder="Age">
    
    <select v-model="city">
      <option disabled value="">Select City</option>
      <option>Delhi</option>
      <option>Mumbai</option>
    </select>    <button>Submit</button>
  </form>  <h3>Preview:</h3>
  <p>{{ name }} - {{ age }} - {{ city }}</p>
</div>

---

🧠 Quick Summary

• Data Binding → Connect data to UI
• v-model → Two-way binding
• Forms → Easy handling with Vue
• Modifiers → Control input behavior

---

🏁 Conclusion

Vue.js makes form handling extremely simple using v-model. With just a few lines of code, you can create dynamic, interactive, and user-friendly forms.