v-model, :model 차이점

v-model과 :model은 Vue.js에서 데이터 바인딩을 설정하는 두 가지 방법입니다.

v-model: v-model은 폼 요소와 데이터를 양방향으로 바인딩하는 데 사용됩니다. v-model은 폼 요소의 값을 변경하면 데이터가 업데이트되고, 데이터를 변경하면 폼 요소의 값도 자동으로 업데이트됩니다. 예를 들어, 요소의 값을 바인딩하려면 v-model을 사용할 수 있습니다. 예시:

:model: :model은 단방향 데이터 바인딩을 설정하는 데 사용됩니다. :model은 폼 요소의 값에 데이터를 바인딩하지만, 데이터의 변경은 폼 요소에 영향을 주지 않습니다. 이 방법은 일반적으로 컴포넌트 간에 데이터를 전달하거나 초기 데이터 값을 설정하는 데 사용됩니다. 예를 들어, 에서 message 변수의 값을 요소의 값에 바인딩할 수 있습니다. 이 경우 message 변수가 변경되어도 요소의 값은 변경되지 않습니다.

즉, v-model은 양방향 데이터 바인딩을 위해 사용되고, :model은 단방향 데이터 바인딩을 위해 사용됩니다. 선택은 사용하는 상황과 요구에 따라 달라집니다.

el-form은 주로 폼 입력을 처리하기 위해 사용되는 요소입니다. el-form에서 단방향 데이터 바인딩을 적용하는 방법은 다음과 같습니다.

<template>
  <el-form :model="formData" :rules="formRules" ref="formRef">
    <!-- 폼 입력 요소들 -->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
        email: '',
      },
      formRules: {
        username: [
          { required: true, message: '사용자 이름을 입력해 주세요', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '비밀번호를 입력해 주세요', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '이메일을 입력해 주세요', trigger: 'blur' },
          { type: 'email', message: '올바른 이메일 형식이 아닙니다', trigger: 'blur' },
        ],
      },
    };
  },
};
</script>

위의 예시에서 formData는 폼 입력 요소들의 데이터를 담고 있는 객체입니다. :model을 사용하여 formData 객체를 el-form에 바인딩하면, 폼 입력 요소들과 formData 객체가 연결됩니다. 이렇게 연결되면 폼 입력 요소들의 값을 formData 객체에 반영하고, formData 객체의 값이 변경되면 폼 입력 요소들에도 자동으로 반영됩니다.

formRules는 각 폼 입력 요소에 대한 검증 규칙을 정의하는 객체입니다. :rules를 사용하여 formRules 객체를 el-form에 바인딩하면, 해당 검증 규칙이 폼 입력 요소에 적용됩니다. 예를 들어, username 필드에는 required 규칙이 적용되어 필수 입력 필드임을 나타내고, email 필드에는 required와 type 규칙이 적용되어 필수 입력 필드이면서 올바른 이메일 형식이어야 함을 나타냅니다.

이렇게 단방향 데이터 바인딩을 사용하면 사용자가 폼 입력 요소에 값을 입력하거나 변경할 때마다 formData 객체에 변경된 값이 저장되며, formData 객체의 값에 따라 폼 입력 요소들에 초기값이 설정되거나 변경되는 것을 확인할 수 있습니다.