vue.js - HTML forms are a mystery

Question

I am taking a Vue.js course and I just learned about forms and managing them(the code is down below). I don't understand how does the tag work. It's value is determined by the option value and the selected text is the text of that specific option? Also, I am confused when it comes to checkboxes and Vue. Why do the checkboxes need different "value"s when you use v-model on that checkbox? Why would I want to create a checkbox group (inputs with the same value for the name attribute)? I don't really understand how v-model works with forms and I would love to. Thanks in advance for the person that's taking time to help me.

The Code

<template>
  <form @submit.prevent="submitForm">
    <div class="form-control">
      <label for="user-name">Your Name</label>
      <input id="user-name" name="user-name" type="text" v-model="userName" />
    </div>
    <div class="form-control">
      <label for="age">Your Age (Years)</label>
      <input id="age" name="age" type="number" v-model.number="userAge" />
    </div>
    <div class="form-control">
      <label for="referrer">How did you hear about us?</label>
      <select id="referrer" name="referrer" v-model="referrer">
        <option value="google">Google</option>
        <option value="wom">Word of mouth</option>
        <option value="newspaper">Newspaper</option>
      </select>
      {{ referrer }}
    </div>
    <div class="form-control">
      <h2>What are you interested in?</h2>
      <div>
        <input id="interest-news" name="interest" value="news" type="checkbox" v-model="interests"/>
        <label for="interest-news">News</label>
      </div>
      <div>
        <input id="interest-tutorials" name="interest" value="tutorials" type="checkbox" v-model="interests"/>
        <label for="interest-tutorials">Tutorials</label>
      </div>
      <div>
        <input id="interest-nothing" name="interest" value="nothing" type="checkbox" v-model="interests"/>
        <label for="interest-nothing">Nothing</label>
      </div>
    </div>
    <div class="form-control">
      <h2>How do you learn?</h2>
      <div>
        <input id="how-video" name="how" value="video" type="radio" v-model="how"/>
        <label for="how-video">Video Courses</label>
      </div>
      <div>
        <input id="how-blogs" name="how" value="blogs" type="radio" v-model="how"/>
        <label for="how-blogs">Blogs</label>
      </div>
      <div>
        <input id="how-other" name="how" value="other" type="radio" v-model="how"/>
        <label for="how-other">Other</label>
      </div>
    </div>
    <div class="form-control">
      <input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm">
      <label for="confirm-terms">Agree to terms of use?</label>
    </div>
    <div>
      <button>Save Data</button>
    </div>
    <div class="form-control">
      <select></select>
    </div>
  </form>
</template>
<script>
export default {
  data() {
    return {
      userName: "",
      userAge: null,
      referrer: "newspaper",
      interests: [],
      how: null,
      confirm: false
    };
  },
  methods: {
    submitForm() {
      // console.log("Username: " + this.userName);
      // this.userName = "";
      // console.log("User age: ");
      // console.log(this.userAge);
      // console.log(31);
      // this.userAge = null;
      // console.log("Referrer: " + this.referrer);
      // this.referrer = "wom";
      // console.log("Checkboxes: ");
      // console.log(this.interests);
      console.log("Radio Buttons");
      console.log(this.how);
      this.interests = [];
      this.how = null;
      // console.log('Confirm? ');
      // console.log(this.confirm);
      // this.confirm = false;
    },
  },

};
</script>

Answer 1

v-model is syntactical sugar for :value and @change

Instead of <input v-model="name">, you could use

<input :value="name" @update:model-value="v => name=v"> which would have the same result.

Here is an example that perhaps belabors it a bit.

const app = Vue.createApp({
  data() {
    return {
      name: ""
    }
  }
})

app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
})
app.mount("#app")

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

<div id="app">
  <custom-input :value="name" @update:model-value="v => name=v"></custom-input><br />
  <custom-input v-model="name"></custom-input><br />
  <input :value="name" @update:model-value="v => name=v"><br />
  <input v-model="name"><br />
  Name: {{name}}
</div>