How to implement responsive forms and custom form components under Vue?

Vue is a commonly used JavaScript framework that provides very convenient and powerful tools for processing form input. Vue provides reactive properties and events that allow us to easily handle form input, validation, and submission. This article will introduce how to implement responsive forms and custom form components under Vue.

1. Implementation of Vue responsive form

1. Form model binding

Vue provides a very simple way to input form data and automatic responses. Through the v-model directive, we can bind each input field on the form to the data attributes on the Vue instance to achieve two-way data binding.

For example: We can implement a simple form through the following code, in which the input value is bound to the message attribute in data through v-model. When we enter content in the input box, the content in the input box and the message attribute value in the data will be updated simultaneously:

<template>
  <div>
    <input type="text" v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>

2. Form verification

Form verification is An inevitable task in our daily web development. Vue also provides a unique way to handle form validation. By using the computed attribute and watcher attribute in conjunction with the v-model directive, we can easily implement form value validation.

For example: We can implement a simple form verification through the following code. When the user enters a password, we verify the password through the computed attribute and watcher attribute, and then prompt the user for the strength of the password:

<template>
  <div>
    <label>请输入密码：</label>
    <input type="password" v-model="password" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: "",
    };
  },

  computed: {
    message() {
      let pwd = this.password;
      if (pwd.length <= 5) return "密码强度较弱";
      if (pwd.length <= 9) return "密码强度一般";
      return "密码强度较高";
    },
  },

  watch: {
    password(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal.length >= 10) {
        alert("密码长度不能超过10");
        this.password = oldVal;
      }
    },
  },
};
</script>

3. Form submission

Form submission is a core function of Vue. Through the v-on directive and methods attribute, we can bind a Vue method to the form submission event. When the user fills out the form and clicks the submit button, Vue will call this method and pass the form data as a parameter. We can process the data submitted by the user in this method.

For example: We can implement a simple form submission through the following code. When the user clicks the submit button, we can format the form data in JSON and output it in the console:

<template>
  <div>
    <label>请输入用户名：</label>
    <input type="text" v-model="username" />

    <label>请输入密码：</label>
    <input type="password" v-model="password" />

    <button v-on:click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },

  methods: {
    submitForm() {
      let formData = {
        username: this.username,
        password: this.password,
      };

      console.log(JSON.stringify(formData));
    },
  },
};
</script>

2. Implementation of custom form components

In addition to the built-in form components provided by Vue, we can also define some custom form components according to our own needs to achieve code reuse and logic.

Vue provides the Vue.component() method to define a custom component. We only need to define a component through the Vue.component() method, and then use this component in the template.

The following is an example of a simple custom component, which contains a user-defined form field component and a built-in button button component. In this component, we put the user-defined form field component and the built-in button component in the same form. When the user clicks the button, a request to submit data will be issued.

<template>
  <form>
    <custom-input v-model="username" label="用户名：" />
    <custom-input v-model="password" label="密码：" />
    <button type="button" v-on:click="submitForm">提交</button>
  </form>
</template>

<script>
Vue.component("custom-input", {
  props: ["label", "value"],
  template: `
    <div>
      <label>{{ label }}</label>
      <input type="text" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />
    </div>
  `,
});

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },

  methods: {
    submitForm() {
      let formData = {
        username: this.username,
        password: this.password,
      };

      console.log(JSON.stringify(formData));
    },
  },
};
</script>

Summary:

Implementing responsive forms and custom form components under Vue is one of the essential skills in our web development. Through the two-way data binding of the v-model directive, the form validation of the computed attribute, the form input control of the watcher attribute and the custom form component definition of the Vue.component() method, we can easily implement an efficient, powerful, and easy-to-maintain Form processing system.

The above is the detailed content of How to implement responsive forms and custom form components under Vue?. For more information, please follow other related articles on the PHP Chinese website!