Vue.js 폼과 입력 바인딩

폼은 웹 애플리케이션의 핵심 부분으로, 사용자가 데이터를 입력하고 제출할 수 있도록 합니다. Vue.js는 사용자 입력을 관리하고 애플리케이션 데이터와 동기화하는 직관적인 방법을 제공하여 폼과 입력 바인딩을 처리하는 것을 간소화합니다. 이 문서에서는 Vue.js에서 폼과 입력 바인딩을 사용하는 기본 사항을 안내합니다.

입력 바인딩의 기본

Vue.js에서 폼 입력에 대한 양방향 데이터 바인딩은 v-model 지시문을 사용하여 달성됩니다. 이 지시문은 입력 요소의 값을 데이터 속성에 바인딩하여 입력에 대한 모든 변경 사항이 데이터에 반영되고 그 반대의 경우도 마찬가지입니다.

<template>
  <div>
    <input v-model="message" placeholder="Type something"/>
    <p>Message: {{ message }}</p>
  </div>
</template>

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

이 예에서 v-model 지시문은 입력 필드의 값을 message 데이터 속성에 바인딩합니다. 입력 필드에 입력된 모든 텍스트는 즉시 message 속성에 반영되고 문단에 표시됩니다.

다양한 입력 유형으로 작업하기

v-model 지시문은 텍스트 필드, 체크박스, 라디오 버튼, 선택 드롭다운을 포함한 다양한 입력 유형에서 작동합니다. 다양한 입력 유형에서 v-model를 사용하는 방법은 다음과 같습니다.

텍스트 입력:<input type="text" v-model="text" />
체크박스:<input type="checkbox" v-model="checked" />
라디오 버튼:<input type="radio" v-model="selected" value="option1" />
드롭다운 선택:<select v-model="selected"> <option value="option1">Option 1</option> </select>

양식 제출 처리

폼 제출을 처리하려면 <form> 요소에서 @submit 이벤트 리스너를 사용할 수 있습니다. 다음은 Vue.js에서 폼 제출을 처리하는 방법에 대한 간단한 예입니다.

<template>
  <form @submit.prevent="submitForm">
    <input v-model="username" placeholder="Enter your username"/>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    submitForm() {
      alert('Form submitted with username: ' + this.username);
    }
  }
};
</script>

이 예에서 @submit.prevent 지시문은 양식의 제출 이벤트를 수신하고 기본 동작을 방지합니다. 제출된 사용자 이름과 함께 경고를 표시하는 submitForm 메서드가 호출됩니다.

폼 검증 사용

폼 입력을 검증하는 것은 폼을 처리하는 데 필수적인 부분입니다. Vue.js는 기본 제공 검증을 제공하지 않지만, 사용자 지정 메서드나 VeeValidate와 같은 타사 라이브러리를 사용하여 검증을 처리할 수 있습니다. 간단한 검증 메서드를 구현하는 방법에 대한 기본적인 예는 다음과 같습니다.

<template>
  <form @submit.prevent="validateForm">
    <input v-model="email" placeholder="Enter your email"/>
    <span v-if="!isEmailValid">Invalid email address</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      isEmailValid: true
    };
  },
  methods: {
    validateForm() {
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      this.isEmailValid = emailPattern.test(this.email);
      if (this.isEmailValid) {
        alert('Form submitted with email: ' + this.email);
      }
    }
  }
};
</script>

이 예에서 validateForm 메서드는 이메일 주소가 정규 표현식 패턴과 일치하는지 확인합니다. 이메일이 유효하면 양식을 제출하고, 그렇지 않으면 오류 메시지를 표시합니다.

결론

Vue.js 폼과 입력 바인딩을 이해하는 것은 대화형 및 데이터 기반 웹 애플리케이션을 구축하는 데 필수적입니다. v-model 지시문을 활용하고 폼 제출을 처리하면 사용자 입력을 효율적으로 관리하고 동적 폼을 만들 수 있습니다. 이러한 기술을 사용하면 Vue.js 애플리케이션에서 다양한 폼 관련 작업을 처리할 준비가 됩니다.

폼 입력 vuejs 모델 바인딩 검증 제출 체크박스 라디오 선택 핸들러 이벤트 메서드 상호 작용