Vue.js 문법 - 폼 입력 바인딩

 

단방향 데이터 바인딩(연결)

 

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg" />
</template>

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

 

코드 이해하기

- data() 부분에 msg 데이터를 input 요소에 value라는 속성에 연결

- 추가로 h1 요소에 콘텐트 (content)로도 연결하여 화면에 출력

- 데이터 부분에서 HTML (template) 방향으로만 흐른다 (연결되어 있다)

- 이러한 개념을 단방향 데이터 바인딩 이라고 부름

- 그렇기 때문에 input 요소를 수정하여도, 수정된 내용이 data의 msg 데이터를 갱신하지 않음

 

양방향 데이터 바인딩

 

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg"
    @input="handler" />
</template>

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

 

코드 이해하기

- @input 이벤트는 input 요소에 데이터가 입력되면 handler() 동작

- handler() 는  input 요소에 데이터를 가져와서 msg 데이터를 갱신

- 갱신된 msg 데이터는 연결된 각각의 HTML 요소에 반영 (반응성)

- 데이터가 input 요소에 영향을 주고, input 요소를 수정하면 데이터에 영향을 준다

- 이러한 개념을 양방향 데이터 바인딩 이라고 부름

- input 요소를 수정하면 데이터가 갱신됨

 

v-model

 

- vue.js 에서는 v-model 을 통해 양항뱡 데이터 바인딩을 간소화 할 수 있다

- 한글을 입력하는 경우에는 하나의 글자가 완성되기 전까지 딜레이가 있다

 

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

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