Vue 데이터 바인딩 input v-model

Vue에서 데이터를 바인딩하는 방법입니다. 먼저 input 태그를 이용해서 input value에 바인딩해보겠습니다.

ref 함수를 이용해서 name 변수를 사용하겠습니다. 보여주는 template 부분에 input 을 추가하고 v-bind를 사용합니다. 기본 태그에는 모두 사용할 수 있어요. input 태그에는 value와 type 같은 것들이 있는데요. 모두 v-bind:value v-bind:type v-bind:class 처럼 활용 가능 합니다.

<template>
  <div class="name">
    {{ name }} 
  </div>
  <input type="text" v-bind:value="name" />
  <button class="btn btn-primary" v-on:click="clickHandler">
    버튼
  </button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {    
    const name = ref("Vue Code")

    const clickHandler = () => {      
      name.value = "Vue Hello"    
    }
    
    return {
      name,
      clickHandler
    }
  }
}
</script>

v:bind를 줄여서 콜론 : 만 넣어서 사용 할 수 있습니다. v-on 대신에는 @를 사용 할 수 있어요.

<template>
  <div class="name">
    {{ name }} 
  </div>
  <input type="text" :value="name" />
  <button class="btn btn-primary" @:click="clickHandler">
    버튼
  </button>
</template>

이렇게 하면 단방향입니다. input 에서 타이핑하는 정보가 name 변수에 저장되는 것은 아닙니다. input 태그에 작성하는 것이 적용되도록 하는 태그와 함수를 추가할 수 있어요. v-on:input을 활용할 수 있습니다. updateName 함수를 만들어서 연결해봅니다. v-on:input을 대신하여 역시 @input으로 활용 할 수 있습니다.

<template>
  <div class="name">
    {{ name }} 
  </div>
  <input type="text" :value="name" v-on:input="updateName" />
  <button class="btn btn-primary" @:click="clickHandler">
    버튼
  </button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {    
    const name = ref("Vue Code")

    const clickHandler = () => {      
      name.value = "Vue Hello"    
    }

    const updateName = (e) => {
      name.value = e.target.value
    }
    
    return {
      name,
      clickHandler,
      updateName
    }
  }
}
</script>

v-model 사용하여 input과 value 조작하던 것을 간략하게 vue에서 알아서 해주는 방법으로 수정할 수 있어요. 이렇게 하면 updateName과 같은 함수는 필요 없습니다.

<template>
  <div class="name">
    {{ name }} 
  </div>
  <input type="text" v-model="name" />
  <button class="btn btn-primary" @:click="clickHandler">
    버튼
  </button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {    
    const name = ref("Vue Code")

    const clickHandler = () => {      
      name.value = "Vue Hello"    
    }

    return {
      name,
      clickHandler
    }
  }
}
</script>

v-model 알아가는 과정이었습니다.