Langkah-langkah pelaksanaan komponen borang responsif dalam dokumentasi Vue

Vue ialah rangka kerja JavaScript yang popular Komponen borang responsif ialah fungsi yang biasa digunakan dalam proses pembangunan kerana ia boleh bertindak balas kepada input dan operasi pengguna dalam masa nyata, menjadikan pengalaman pengguna lebih lancar dan selesa. Artikel ini akan memperkenalkan langkah-langkah untuk melaksanakan komponen borang responsif dalam dokumen Vue.

1. Sediakan data

Sebelum anda mula melaksanakan komponen borang responsif, anda perlu menyediakan data. Data ini termasuk pelbagai kotak input, pilihan lungsur turun, dsb. dalam bentuk, serta nilai lalai dan peraturan pengesahannya. Dalam Vue, anda boleh menggunakan atribut data untuk menyimpan data ini.

Sebagai contoh, jika anda ingin melaksanakan borang log masuk, yang merangkumi dua kotak input untuk nama pengguna dan kata laluan, anda boleh menulis atribut data seperti ini:

data() {
  return {
    form: {
      username: '',
      password: '',
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ],
    },
  };
},

Di sini dua objek, borang dan peraturan, ditakrifkan, masing-masing Digunakan untuk menyimpan data borang dan peraturan pengesahan. Objek borang termasuk dua atribut, nama pengguna dan kata laluan, dan nilai lalainya kosong. Objek peraturan juga termasuk dua atribut, nama pengguna dan kata laluan Nilai mereka ialah tatasusunan, yang mengandungi peraturan pengesahan kotak input, seperti yang diperlukan, panjang minimum, panjang maksimum, dll.

2. Memberikan borang

Selepas menyediakan data, anda perlu memaparkan komponen borang dalam HTML. Dalam Vue, anda boleh menggunakan atribut templat untuk mentakrifkan templat, dan kemudian menjadikannya dalam kaedah pemaparan komponen.

Contohnya, untuk memaparkan komponen borang ringkas, termasuk kotak input nama pengguna dan kotak input kata laluan, dan untuk menggunakan komponen borang dalam perpustakaan UI Elemen:

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">登录</el-button>
    </el-form-item>
  </el-form>
</template>

Elemen digunakan di sini Komponen el-form dan el-input dalam UI digunakan untuk menghasilkan borang, dan arahan model-v digunakan untuk mengikat data borang dua hala kepada nilai kotak input.

3. Borang pengesahan

Selepas memberikan borang, anda perlu menambah fungsi pengesahan pada borang. Dalam Vue, anda boleh menggunakan atribut jam tangan untuk memantau perubahan dalam data borang dan mengesahkan apabila data berubah.

Contohnya, tambahkan fungsi pengesahan borang pada komponen borang log masuk di atas:

watch: {
  'form.username'(value) {
    this.$refs.form.validateField('username');
  },
  'form.password'(value) {
    this.$refs.form.validateField('password');
  },
},
methods: {
  handleSubmit() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        // 表单验证通过，可以提交表单了
        // ...
      } else {
        // 表单验证失败，不提交表单
        return false;
      }
    });
  },
},

Atribut jam tangan digunakan di sini untuk memantau perubahan dalam data borang Jika nama pengguna atau kata laluan berubah, kaedah validateField komponen borang untuk pengesahan. Selain itu, kaedah handleSubmit juga ditulis Semasa menyerahkan borang, pengesahan keseluruhan dilakukan terlebih dahulu.

4. Kesimpulan

Di atas ialah langkah-langkah untuk melaksanakan komponen borang responsif dalam dokumen Vue. Dengan menyediakan data, memberikan borang, mengesahkan borang dan langkah-langkah lain, anda boleh dengan cepat melaksanakan komponen borang responsif berfungsi sepenuhnya, memberikan pengalaman pengguna yang lebih mudah, lebih pantas dan mesra.

Atas ialah kandungan terperinci Langkah-langkah pelaksanaan komponen borang responsif dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!