[Vue.js] 사용자가 입력한 input 받는 2가지 방법

사용자가 입력한 input을 vue 웹앱에서 받는법은

간단하게 2가지 방법으로 나눌 수 있다.

 

1. Vue 이벤트 핸들러를 활용 ex) "@input" , "v-on:input"

2. 양방향 데이터바인딩을 간단하게 해주는 Vue의 디렉티브 "v-model"

 

아래의 기능을 구현하고자 할때 예시를 확인해보자

-month라는 데이터를 생성해서 사용자가 input에 입력시 몇개월인지 출력하는 기능을 만들고자 한다. 

 

1. Vue 이벤트 핸들러 활용법

<template>
    <p>{{ month }}</p>
    <input type="text" @input="month = $event.target.value" />
</template>

<script>
export default {
    data() {
        return {
            month: 0,
        }
    }
}
</script>

-@input를 사용하거나 @onchange를 사용해도 된다. 

 

-사용자가 input입력시에 month라는 데이터에 vue의 event object인 $event 변수를 활용하여 사용자값을 실시간으로 month라는 값에 저장한다.

 

 

2. v-model 활용법

<template>
	<p>{{ month }}</p>
    
    <input type="text" v-model="month" />
</template>

<script>
export default({
    data() {
        return {
        	month: 0,
        }
    }
});
</script>

 

-사용법은 위와 거의 동일하다. @input을 v-model로 변경

 

- v-model에 입력받고싶은 데이터값을 입력해주는것이다.

 

 

v-model? 

v-model이 어떤기능인지 간단하게 요약하자면 "이곳에 입력된 값을 data로 곧바로 저장해라" 라는 의미를 가진 디렉티브이다. 즉, 데이터 모델과 사용자 인터페이스간 상호작용을 의미하는 양방향 데이터 바인딩을 쉽게 구현 할 수 있게 해준다.

 

*) v-model은 textarea,select,radio,checkbox 사용자의 선택,입력값을 받는 모든 input에 적용이 가능하다.