vue js를 소개하는 가장 대표적인 기능이 양방향 데이터 바인딩이다.
공식 홈페이지 첫 화면에 대문짝만 하게 보여주는 progressive framework 취지에 맞게 낮은 진입장벽으로 일부분만 vue로 적용해 갈 수 있는데, vue로 바꿔나갈 때 당장 사용할 수 있는 기능이기 때문인 것 같다.
고수준의 양방향 데이터 바인딩을 하기 전에 html과 데이터 사이를 연결시키는 저수준의 문법부터 먼저 적용해보자.
단순히 vue 인스턴스의 데이터에 text라는 변수를 선언하면 html에서 사용할 수 있다. script에 있는 데이터를 html에서 사용하도록 바인딩한 것이다.
<body>
<div id="app">
{{ text }}
</div>
<script>
new Vue({
el: "#app",
data: {
text: "I am Vue"
}
})
</script>
</body>
그럼 반대로 html에서 text라는 변수를 업데이트하기 위해 input 태그를 추가해보자.
아래 사용하는 v-bind 문법은 vue에서 사용하는 v- prefix로 시작하는 html 문법으로 디렉티브라고 불린다. v-bind:는 :로 바꿔 사용해도 된다.
<div id="app">
<input type="text" v-bind:value="text"> <br>
{{ text }}
</div>
지금까지는 단방향 바인딩만 사용했기 때문에 input 태그의 값을 바꾼다고 해서 아래 {{ text }} 값이 바뀌진 않는다.
보통의 프론트 코드처럼 이벤트를 받아서 text 값을 업데이트하는 작업이 필요하다.
input 태그에 키보드 이벤트를 추가한다. 역시 v-on:은 @로 바꿔도 된다.
<input type="text" v-bind:value="text" v-on:keyup="updateText">
이벤트를 받아줄 updateText 함수를 vue 인스턴스에도 추가한다.
methods: {
updateText(e) {
this.text = e.target.value
}
}
이렇게 하면 단방향 바인딩 + 이벤트 처리로 양방향 바인딩을 구현할 수 있다.
vue에서는 v-model 디렉티브로 양방향 바인딩을 시킬 수도 있다. 아래 속성 하나로 위에서 작업한 내용을 모두 대체할 수 있다.
<input type="text" v-model="text">
'vue' 카테고리의 다른 글
| Vue - reactivity (0) | 2021.05.16 |
|---|
댓글