13. v-model modifiers

주제

이 강의에서는 Vue에서 v-model 디렉티브에 적용할 수 있는 특별한 수정자들에 대해 배웁니다. 사용할 수 있는 세 가지 수정자는 각각의 기능에 대해 탐색합니다.

우선, 사용자가 나이를 직접 수정할 수 있도록 나이 데이터 속성에 바인딩된 입력 필드를 만듭니다. 이 입력 필드에서는 값이 변경될 때마다 나이 데이터도 업데이트됩니다. 하지만 입력 필드에서의 타입은 항상 문자열로 반환됩니다. 이는 브라우저가 입력 요소에서 반환하는 기본 동작 때문입니다.

이 문제를 해결하기 위한 첫 번째 방법은 입력 필드의 타입을 'text'에서 'number'로 변경하는 것입니다. 이렇게 하면 비숫자 문자 입력을 방지할 수 있습니다. 그러나 이것만으로는 타입이 문자열로 변환되는 문제를 해결하지 못합니다. 이를 해결하기 위해 v-model 디렉티브에 'number' 수정자를 추가합니다. 이 수정자는 타입을 숫자로 변환하여, 계산 시 발생할 수 있는 예상치 못한 문제를 방지합니다.

또 다른 두 가지 수정자인 'lazy'와 'trim'도 살펴봅니다. 'trim' 수정자는 값을 문자열로 변환하고 과도한 공백을 제거하는 역할을 합니다. 'lazy' 수정자는 데이터 속성이 각 키 입력마다 업데이트되는 것이 아니라, 입력 필드에서 벗어날 때까지 변경을 지연시킵니다. 이는 문서 업데이트를 줄이고 싶을 때 유용합니다.

이러한 수정자들을 사용함으로써 v-model 디렉티브의 동작을 변경하고, 애플리케이션에서 발생할 수 있는 문제를 방지할 수 있습니다.

v-model 디렉티브에 적용 가능한 특별한 수정자들 학습
세 가지 주요 수정자 탐색:
1. number 수정자: 입력 필드 값의 타입을 숫자로 변환하여 계산 시 발생할 수 있는 문제 방지
2. trim 수정자: 입력 값에서 과도한 공백 제거
3. lazy 수정자: 데이터 속성의 업데이트를 키 입력마다가 아니라 입력 필드에서 벗어날 때까지 지연
사용자가 나이를 직접 수정할 수 있도록 입력 필드에 나이 데이터 속성 바인딩
입력 필드 타입 'number' 설정으로 비숫자 문자 입력 방지
v-model에 'number' 수정자 추가로 타입을 숫자로 자동 변환
'trim'과 'lazy' 수정자를 사용하여 입력 데이터 처리 방식 변경
이러한 수정자 사용으로 v-model 디렉티브의 동작 변경 및 애플리케이션의 문제 방지 가능

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app" v-cloak>
  <p>{{  fullName() }}</p>
  <p><a :href="url" target="_blank">Google</a></p>
  <p>{{ raw_url }}</p>
  <p v-html="raw_url"></p>
  <p>{{ age }}</p>
  <hr />

  <label>First Name</label>
  <input type="text" v-model.lazy.trim="firstName">

  <br />
  <br />

  <label>Middle Name</label>
  <input type="text" @keyup.enter="updateMiddleName">

  <br />
  <br />

  <label>Last Name</label>
  <input type="text" :value="lastName" @input.prevent="updateLastName('Last name event triggered!', $event)">

  <br />
  <br />

  <label>Age</label>
  <input type="number" v-model.number="age">

  <br />
  <br />

  <button type="button" @click="increment">Increment</button>
  <button type="button" @click="age--">Decrement</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

const vm = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      middleName: '',
      lastName: 'Doe',
      url: 'https://google.com',
      raw_url: '<a href="https://google.com" target="_blank">Google</a>',
      age: 20,
    }
  },
  methods: {
    fullName() {
      return `${this.firstName} ${this.middleName} ${this.lastName.toUpperCase()}`
    },
    increment() {
      this.age++;
    },
    updateLastName(msg, event) {
      console.log(msg, event)
      this.lastName = event.target.value;
    },
    updateMiddleName(event) {
      console.log(event.target.value)
      this.middleName = event.target.value;
    },
  }
}).mount('#app');

main.css

[v-cloak] {
    display: none;
}

# 13. v-model modifiers

# 주제

13. v-model modifiers

주제