[Vuejs] v-model (양방향 바인딩)

 

v-model (양방향 바인딩)

자동으로 input의 value로 입력된 값이

Vuejs의 data와 바인딩 된다.

입력 이벤트가 발생하면, 입력된 값을 Vuejs의 data의 name 속성에 바인딩하고,

이를 통해 Vuejs의 data의 name 속성 값이 바뀌면, 그 값이 input의 value에 바인딩된다.

양방향으로 통신하기 때문에, 양방향 바인딩이라고 한다.

<input type='text'
    v-model='name'>

 

아래의 코드와 동일하다고 보면 된다.

<input type='button'
    v-bind:value='name'
    v-on:input='setName' />

v-model을 사용하면, 

• 위 코드에서 사용되는 setName()  메소드는 작성하지 않아도 된다.
• data에 'name' 속성은 필요하다.