Lesson 5, vue3. X DOM operation $refs and form combined with weekend data binding to achieve online booking function

1、 Implementation of personnel registration system based on weekend data binding in vue3. X

2、 Vue3. X DOM operation

1. The first method is native JS

<template>
  <h2>Personnel registration system</h2>

  <div class="people_list">
    <ul>
      <li>Name: < input type = text "id = user name / ></li>
    </ul>
    < button @ Click = "dosubmit()" class = "submit" > get the content of the form < / button >
  </div>
</template>

<script>
export default {
  data() {
    return {
      Message: "hello.",
    };
  },
  methods: {
    doSubmit() {
      var username = document.querySelector("#username");

      alert(username.value);
    },
  },
};
</script>

2. The second method is to get DOM node by Ref

<template>
<h2>Personnel registration system</h2>

<div class="people_list">
    <ul>
        <li>Name: < input type = text "id = user name / ></li>
        <li>Age: < input type = "text" ref = "age" / ></li>
    </ul>
    < button @ Click = "dosubmit()" class = "submit" > get the content of the form < / button >
</div>
</template>

export default {
    data() {
        return {
            Message: "hello.",
        };
    },
    methods: {
        doSubmit() {
            var username = document.querySelector("#username");
            alert(username.value);

            var ageDom = this.$refs.age;
            alert(ageDom.value);
        },
    },
};

3、 Vue3. X weekend data binding

MVVM is what we often call bidirectional data binding, and Vue is a MVVM framework. M stands formodel， V view

In the framework of MVVM, the change of model will affect the view, which in turn affects the model.

be careful:Weekend data binding is mainly used in forms.

<template>
  <h2>Personnel registration system</h2>

  <div class="people_list">
    <ul>
      <li>Name: < input type = "text" V-model=“ peopleInfo.username " /></li>
      <li>Age: < input type = "text" V-model=“ peopleInfo.age " /></li>
    </ul>
    < button @ Click = "dosubmit()" class = "submit" > get the content of the form < / button >
  </div>
</template>

export default {
  data() {
    return {
      peopleInfo: {
        username: "",
        age: "",
      },
    };
  },
  methods: {
    doSubmit() {
      console.log(this.peopleInfo);
    },
  },
};

4、 Double weekend data binding in input, check box, radio, select and textarea

Template

<template>
<h2>Personnel registration system</h2>

<div class="people_list">
    <ul>
        <li>Name: < input type = "text" V-model=“ peopleInfo.username " /></li>
        <li>Age: < input type = "text" V-model=“ peopleInfo.age " /></li>
        <li>Gender:</li>
        <input type="radio" value="1" id="sex1" v-model="peopleInfo.sex" />
        < label for = "sex1" > male < / label >
        <input type="radio" value="2" id="sex2" v-model="peopleInfo.sex" />
        < label for = "sex2" > female < / label >
        <li>
            city:
            <select name="city" id="city" v-model="peopleInfo.city">
                <option v-for="(item, index) in peopleInfo.cityList" :key="index" :value="item">
                    {{ item }}
                </option>
            </select>
        </li>

        <li>
            Hobbies:

            <span v-for="(item, index) in peopleInfo.hobby" :key="index">
                <input type="checkbox" :id="'check' + index" v-model="item.checked" />
                <label :for="'check' + key"> {{ item.title }}</label>
                &nbsp;&nbsp;
            </span>
        </li>

        <li>
            remarks:

            <textarea name="mark" id="mark" cols="30" rows="4" v-model="peopleInfo.mark"></textarea>
        </li>

    </ul>

    < button @ Click = "dosubmit()" class = "submit" > get the content of the form < / button >
</div>
</template>

Business logic:

export default {
    data() {
        return {
            peopleInfo: {
                username: "",
                age: "",
                sex: "2",
                CityList: [Beijing, Shanghai, Shenzhen],
                City: "Shanghai",
                hobby: [{
                        Title: "eat",
                        checked: false,
                    },
                    {
                        Title: "sleep",
                        checked: false,
                    },
                    {
                        Title: "code tapping",
                        checked: true,
                    },
                ],
                mark: "",
            },
        };
    },
    methods: {
        doSubmit() {
            console.log(this.peopleInfo);
        },
    },
};

css:

ul {
    list-style-type: none;
}

h2 {
    text-align: center;
}

.people_list {
    width: 400px;
    margin: 40px auto;
    padding: 40px;
    border: 1px solid #eee;
}

.people_list li {
    height: 50px;
    line-height: 50px;
}

.form_input {
    width: 300px;
    height: 28px;
}

.submit {
    float: right;
    margin-top: 10px;
}

This work adoptsCC agreementReprint must indicate the author and the link of this article