05 데이터 양방향 바인딩 (Data Two Way Binding - v-model)
인풋태그에 내용을 입력하면 아래에 입력한 내용을 미리 볼 수 있는 코드
이벤트를 이용한 바인딩
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="submit">
<input type="text" :value="text" v-on:keyup="updateText" />
<button type="submit">제출</button>
<p>결과화면</p>
<div>{{text}}</div>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
text:'',
},
methods: {
updateText(event) {
this.text = event.target.value;
},
},
})
</script>
</body>
</html>결과화면
v-on:keyup="updateText"에서 함수를 사용할 때 인자(Argument, 아규먼트)를 넣어주지 않았지만
keyup이벤트에서 event 오브젝트를 자동으로 넣어줬기 때문에 methods에서 아래와 같이 사용할 수 있다.
updateText(event) {
console.log(event)
this.text = event.target.value;
},v-on은 @로 축약해서 사용 가능
<input type="text" :value="text" @keyup="updateText" />양방향 바인딩(v-model디렉티브)를 이용한 데이터 바인딩
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="submit">
<input type="text" v-model="text" />
<button type="submit">제출</button>
<p>결과화면</p>
<div>{{text}}</div>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
text:'test',
},
methods: {},
})
</script>
</body>
</html>결과화면
Hello!