한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

v-model수식어

아래에 양방향데이터 바인딩을 구성해놓았습니다. 아래의 경우 한글을 작성할 때도 바로바로 갱신이 될 수 있다는 장점이 있습니다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg"
    @input="msg = $event.target.value" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!',
    }
  }
}
</script>

1. lazy 수식어

1-1 @change 이벤트

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg"
    @change="msg = $event.target.value" />
</template>

@input이벤트 대신 @change이벤트를 사용하는 경우 input요소에 데이터가 변경되어도 바로바로 반영이 되는 것이 아니라, tab키 또는 enter키를 누르거나, 포커스가 해지되어야 데이터가 갱신 되는 것을 확인할 수 있습니다. 즉, 입력이 완료되고 나서 데이터가 갱신됩니다.

1-2 v-model의 lazy수식어 사용

이를 v-model이라는 양방향데이터 바인딩 단축버전으로 아래와 같이 작성할 수 있습니다.

<template>
  <h1>{{ msg }}</h1>
  <input
    v-model.lazy="msg"
    type="text" />
</template>

이와 같은 역할을 수행하는 것이 v-model의 수식어 lazy입니다. lazy수식어를 붙여주는 경우, @change이벤트를 사용한 것과 같이 값이 다 입력되고 나서야 값이 갱신되게 됩니다.

2. number 수식어

2-1 input 값의 타입 확인

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model.lazy="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 123
    }
  }
}
</script>

msg의 데이터를 숫자데이터로 만들었지만 input요소에 연결되어서 사용자가 데이터를 입력하다보면 문자로 형변환 되어 다시 msg로 들어가게 됩니다.

이는 watch를 통해 확인해볼 수 있습니다. 확인을 위해 v-model의 lazy수식어는 잠시 지우고 사용합니다.

<template>
  <h1>{{ msg }}</h1>
  <input
    v-model="msg"
    type="text" />
</template>

<script>
export default {
  data() {
    return {
      msg: 123
    }
  },
    watch: {
    msg() {
      console.log(typeof this.msg)
    }
  }
}
</script>

v-model number수식어 사용

따라서 사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 됩니다.

<template>
  <h1>{{ msg }}</h1>
  <input
    v-model.number="msg"
    type="text" />
</template>

3. v-model trim 수식어

trim은 string의 메소드로 주변의 공백이 발생하게 되면, 이를 무시하는 trim메소드가 있습니다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World'
    }
  },
  watch: {
    msg() {
      console.log(this.msg.trim())
    }
  }
}
</script>

이러한 방법을 v-model의 수식어인 trim으로 조금 더 쉽게 이용할 수 있습니다.

<template>
  <h1>{{ msg }}</h1>
  <input
    v-model.trim="msg"
    type="text" />
</template>