Bagaimana untuk melaksanakan borang responsif dan komponen borang tersuai di bawah Vue?

Vue, sebagai rangka kerja JavaScript yang biasa digunakan, menyediakan alatan yang sangat mudah dan berkuasa untuk memproses input borang. Vue menyediakan sifat dan peristiwa reaktif yang membolehkan kami mengendalikan input, pengesahan dan penyerahan borang dengan mudah. Artikel ini akan memperkenalkan cara melaksanakan borang responsif dan komponen borang tersuai di bawah Vue.

1. Pelaksanaan borang responsif Vue

1. Pengikatan model borang

Vue menyediakan cara yang sangat mudah untuk melaksanakan input data borang dan respons automatik. Melalui arahan model-v, kita boleh mengikat setiap medan input pada borang kepada atribut data pada contoh Vue untuk mencapai pengikatan data dua hala.

Contohnya: Kita boleh melaksanakan bentuk mudah melalui kod berikut, di mana nilai input terikat pada atribut mesej dalam data melalui model v. Apabila kami memasukkan kandungan dalam kotak input, kandungan dalam kotak input dan nilai atribut mesej dalam data akan dikemas kini secara serentak:

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

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

2. Pengesahan borang

Pengesahan borang adalah tugas yang tidak dapat dielakkan dalam pembangunan web harian kami. Vue juga menyediakan cara unik untuk mengendalikan pengesahan borang Dengan menggabungkan atribut yang dikira dan atribut pemerhati dengan arahan model-v, kami boleh melaksanakan pengesahan nilai borang dengan mudah.

Sebagai contoh: Kami boleh melaksanakan pengesahan borang mudah melalui kod berikut Apabila pengguna memasukkan kata laluan, kami mengesahkan kata laluan melalui atribut pengiraan dan atribut pemerhati, dan kemudian meminta pengguna untuk kekuatan kata laluan:

<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. Penyerahan borang

Penyerahan borang ialah fungsi teras Vue Melalui arahan v-on dan atribut kaedah, kita boleh mengikat kaedah Vue dengan acara penyerahan borang. Apabila pengguna mengisi borang dan mengklik butang hantar, Vue akan memanggil kaedah ini dan menghantar data borang sebagai parameter Kami boleh memproses data yang diserahkan oleh pengguna dalam kaedah ini.

Sebagai contoh: Kami boleh melaksanakan penyerahan borang mudah melalui kod berikut Apabila pengguna mengklik butang hantar, kami boleh memformat data borang dalam JSON dan mengeluarkannya dalam konsol:

<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. Pelaksanaan komponen borang tersuai

.

Selain komponen borang terbina dalam yang disediakan oleh Vue, kami juga boleh menentukan beberapa komponen borang tersuai mengikut keperluan kami sendiri untuk mencapai penggunaan semula dan logik kod.

Vue menyediakan kaedah Vue.component() untuk menentukan komponen tersuai. Kami hanya perlu mentakrifkan komponen melalui kaedah Vue.component() dan kemudian gunakan komponen ini dalam templat.

Berikut ialah contoh komponen tersuai mudah, yang mengandungi komponen medan borang yang ditentukan pengguna dan komponen butang terbina dalam. Dalam komponen ini, kami meletakkan komponen medan borang yang ditentukan pengguna dan komponen butang terbina dalam dalam bentuk yang sama Apabila pengguna mengklik butang, permintaan untuk menyerahkan data akan dikeluarkan.

<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>

Ringkasan:

Melaksanakan borang responsif dan komponen borang tersuai di bawah Vue ialah salah satu kemahiran penting dalam pembangunan web kami. Melalui pengikatan data dua hala bagi arahan v-model, pengesahan bentuk atribut yang dikira, kawalan input borang bagi atribut pemerhati dan takrifan komponen bentuk tersuai bagi kaedah Vue.component(), kita boleh melaksanakan dengan mudah sistem pemprosesan Borang yang cekap, berkuasa dan mudah diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan borang responsif dan komponen borang tersuai di bawah Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!