[Vue] Data Binding

Two Way Data Binding

양방향 데이터 바인딩은 Vue의 핵심이라고 할 수 있습니다. 우리가 지금까지 한 component에 값을 주입하는 것은 Vue 인스턴스의 값을 component에 준 것이기 때문에 단방향 데이터 바인딩이라고 할 수 있습니다.

양방향 데이터 바인딩은 Vue 인스턴스와 component가 서로 데이터를 접근하는 것을 말합니다. Vue에서는 v-model 디렉티브를 이용하야 양방향 데이터 바인딩을 지원합니다.

Input[text]

v-model은 state 값을 꼭 사용해야 합니다. props로 내려받은 값은 v-model에서 사용할 수 없습니다.

<template>
	<div>
    	<h1>{{title}}</h1>
        <input v-model="title">
    </div>
</template>

<script>
export default() {
	data() {
    	return {
        	title: ""
        };
    }
}
</script>

title 이름을 가진 state를 갖고 있게 되고 input 태그와 양방향 DataBinding 연결이 되게 됩니다. 그래서 input에 입력한 값이 화면에 보이게 되는 데이터 바인딩이 연결되게 됩니다.

기존의 jQuery를 이용하여 DOM에 접근하여 화면 변경을 하던 방식에서 단순히 데이터의 값을 변경함으로서 화면이 변경되게 됨으로 개발이 쉽게 변경되었습니다.

Input[checkbox]

<template>
	<div>
    	<input id="one" type="checkbox" v-model="checkDatas">
        <label id="one">one</label>
        <input id="two" type="checkbox" v-model="checkDatas">
        <label id="two">two</label>
    <div>
    </div>
</tempate>

<script>
	export default() {
    	return {
        	checkDatas: [],
        };
    }
</script>

checkbox를 v-model로 연결한 경우 배열에 데이터를 받을 수 있습니다. 즉 복수의 선택에 대한 데이터를 배열로 받게 되므로 간편하게 사용할 수 있습니다.

Input[radio]

<template>
	<input type="radio" id="male" value="M" v-model="gender"/>
    <label for="male">남성</label>
    <input type="radio" id="female" value="W" v-model="gender"/>
    <label for="female">여성</label>
</template>

<script>
	export default() {
    	data() {
        	return {
            	gender: null,
            };
        }
    }
</script>

Select

<template>
	<select v-model="category">
		<option disabled value>선택</option>
    	<option value="a">a</option>
	</select>
</template>
<script>
	export default() {
    	data() {
        	return {
            	catrgory: null,
            };
        };
    }
</script>