Vue 문서의 반응형 양식 구성 요소 구현 단계-View.js-php.cn

Vue 문서의 반응형 양식 구성 요소 구현 단계

WBOY

풀어 주다： 2023-06-21 10:51:09

원래의

1178명이 탐색했습니다.

Vue는 널리 사용되는 JavaScript 프레임워크이며, 반응형 양식 구성 요소는 사용자 입력 및 작업에 실시간으로 응답할 수 있어 사용자 경험을 더욱 원활하고 편안하게 만들어 주기 때문에 개발 프로세스에서 일반적으로 사용되는 기능입니다. 이 기사에서는 Vue 문서에서 반응형 양식 구성 요소를 구현하는 단계를 소개합니다.

데이터 준비

반응형 양식 구성 요소 구현을 시작하기 전에 먼저 데이터를 준비해야 합니다. 이 데이터에는 양식의 다양한 입력 상자, 드롭다운 옵션 등은 물론 기본값 및 유효성 검사 규칙도 포함됩니다. Vue에서는 data 속성을 사용하여 이 데이터를 저장할 수 있습니다.

예를 들어, 사용자 이름과 비밀번호에 대한 두 개의 입력 상자가 포함된 로그인 양식을 구현하려는 경우 다음과 같이 데이터 속성을 작성할 수 있습니다.

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

로그인 후 복사

여기에는 양식과 규칙이라는 두 개의 개체가 정의되어 사용됩니다. 양식 데이터와 유효성 검사 규칙을 각각 저장합니다. 양식 객체에는 사용자 이름과 비밀번호라는 두 가지 속성이 포함되어 있으며 기본값은 비어 있습니다. 규칙 객체에는 사용자 이름과 비밀번호라는 두 가지 속성도 포함됩니다. 해당 값은 필수, 최소 길이, 최대 길이 등과 같은 입력 상자 확인 규칙을 포함하는 배열입니다.

양식 렌더링

데이터를 준비한 후 양식 구성 요소를 HTML로 렌더링해야 합니다. Vue에서는 template 속성을 사용하여 템플릿을 정의한 다음 이를 컴포넌트의 render 메서드에서 렌더링할 수 있습니다.

예를 들어 사용자 이름 입력 상자와 비밀번호 입력 상자를 포함한 간단한 양식 구성 요소를 렌더링하고 Element UI 라이브러리의 양식 구성 요소를 사용하려면:

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

로그인 후 복사

여기에서는 Element UI의 el-form 및 el이 사용됩니다. - v-model 지시문을 사용하여 양식 데이터를 입력 상자의 값에 양방향으로 바인딩하는 양식을 렌더링하는 입력 구성 요소입니다.

Verification form

양식을 렌더링한 후 양식에 유효성 검사 기능을 추가해야 합니다. Vue에서는 watch 속성을 사용하여 양식 데이터의 변경 사항을 모니터링하고 데이터가 변경되는 시기를 확인할 수 있습니다.

예를 들어 위의 로그인 양식 구성 요소에 양식 확인 기능을 추가합니다.

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;
      }
    });
  },
},

로그인 후 복사

여기서는 watch 속성을 사용하여 양식 데이터의 변경 사항을 모니터링합니다. 사용자 이름이나 비밀번호가 변경되면 양식 구성 요소의 verifyField 메서드가 호출됩니다. 확인을 위해. 또한, form을 제출할 때 먼저 전체 검증을 수행하고, 그렇지 않으면 form을 제출하지 않고 사용자에게 검증에 실패했다는 알림을 보냅니다.