[Vue.js][Ch2][Vue 문법] 폼 입력 바인딩

단방향 데이터 바인딩

msg를 h1 요소의 content / input 요소의 value로 연결한다 -> 한쪽 방향으로 바인딩

<template>
  <!-- msg를 h1 요소의 content, input 요소의 value로 연결 
  -> 한쪽 방향으로만 바인딩 => 단방향 데이터 바인딩 -->
  <h1>{{ msg }}</h1>
  <input 
    type="text"
    :value="msg" />   <!-- 데이터를 연결하는 v-bind의 약어 : 사용 -->
</template>

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

 

 

 

 

단방향 데이터 바인딩이기 때문에

input 요소의 데이터를 변경해도

msg의 데이터는 변하지 않는다.

 

 

양방향 데이터 바인딩

<template>
  <h1>{{ msg }}</h1>
  <input 
    type="text"
    :value="msg"    
    @input="hendler" /> <!-- input 요소에 데이터가 입력되면 handler 메소드 실행 -->
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  },
  methods: {
    hendler(event) {
      console.log(event.target.value);
      this.msg = event.target.value;
    }
  }
}
</script>

입력한 내용이 데이터에 영향을 주고

데이터는 input 요소에 영향을 주고

input 요소는 다시 데이터에 영향을 주는 것.

메소드가 아닌 인라인 방식으로 작성하면

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

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

v-model을 이용하면 더 간략하게 작성

v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다.

사용자의 입력을 받는 UI 요소들에 v-model 이라는 속성을 사용하면 입력 값이 자동으로 뷰 데이터 속성에 연결된다.

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

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

v-model 주의사항

글자가 완성되기 전까지는 반영되지 않는다. -> 한글을 입력할 때 주의해야한다.

한글을 입력하는 상황에선 인라인 방식으로 코딩하는 것을 추천한다. (Ex. @input="msg = $event.target.value" /> )