vue 활용하기 4편. 데이터 바인딩 v-bind, v-model

vue에서의 데이터 바인딩은, 최근 개발자들이 vue에 관심을 많이 갖는 최대의 이유가 아닐까한다. 특히 DB와 연결한 간편한 양방향 바인딩은 응용할 만한 분야의 폭이 넓다. 먼저 v-bind를 살펴보면, v-bind의 사용법은 아래와 같은 식이다.

v-bind:argument

vue에서는 바인딩을 걸때 " : " 혹은 " = "를 사용한다. 처음에는 클론을 사용할 지 이꼴을 사용할지 헷갈릴 수 있는데, 클론을 사용하는 경우는 v-bind와 v-on(이벤트)밖에 없다고 생각하면 쉽게 암기할 수 있다. 

1 단방향 바인딩

v-bind를 사용하면 간편하게 데이터와 연결할 수 있다. 여기서 '간편함'이란, 서버를 거치지않고 view영역에서 처리함을 의미한다. html태그에 있는 속성에 클론과 'v-bind'를 입력하는 것으로써 간단하게 데이터를 연결할 수 있다.

v-bind를 주로 사용할 수 있는 대표적인 속성은 아래와 같다.

1] 이미지 데이터 연결 : v-bind:src

2] 링크를 통한 연결 : v-bind:href

3] 스타일시트 연결 : v-bind:class, v-bind:style

4] 키를 통한 연결 : v-bind:key

이미지 데이터를 연결하는 바인딩은 src="data값"을 연결하는 방식으로 이미지를 쉽게 나열할 때 편리하다. 가령 이미지 100개 이상을 표시해야 한다면 아래와 같이 바인딩을 걸어주면 된다. 

---

<div id="app"> 

    <div v-for="img in myBG">

          <img v-bind:img.src="myBG"/>

    </div>

</div>

<script>

    let testVue = new Vue({

                     el: "#app"

                  data:{

                           myBG:[

                                    {src:'...', title:'...'},

                                    {src:'..', title:'...'},

                                    {src:'...',title:'...'},                                            

                                       (...중략...)       

                                   ]

                            }

                       })

</script>

---

v-for를 활용한다면 data에 있는 배열(myBG)속의 객체값들을 img변수에 담을 수 있다. src속성에 v-bind값으로 img.src를 설정해주면, data의 myBG객체의 src값을 이미지태그의 src값으로 지정할 수 있다. 앵커태그(a) 역시 img태그와 동일한 방식으로 data값을 불러올 수 있다. 문제는 class와 style속성이다.

class와 style속성은 바인딩에 앞서 계획을 세워야 한다. 주로 class의 경우에는 아래 예제처럼 class값의 참,거짓에 따라 style이 변경되는 방식으로 사용한다. 그리고 class="{}"의 문법에 주의한다. 아래에서는 input태그의 checkbox에 따라 onCheck의 boolean값이 달라진다.(양방향 바인딩)

---

<style>

   .onCheck{

         color:red;

    }

</style>

<div id="app"> 

         <h1 v-bind:class="{'onCheck':onCheck}">단방향 바인딩</h1>

        <input type="checkbox" v-model:"onCheck">

</div>

<script>

    let testVue = new Vue({

                              el: "#app"

                            data:{

                                   onCheck:false      

                                 }

                         })

</script>

---

그리고 사용자 반응에 따라 style값이 변할 필요가 없다면 아래와 같이 간단하게 작성한다.  

---

<div id="app">

        <h1 v-bind:style="myStyle">My Style</h1>

</div>

..(중략)

data : {

    myStyle{  color:'red', border:1px solid blue, fontSize:24px, textAlign:'center'}

}

---

2 양방향 바인딩

양방향 바인딩은 사용자의 입력값에 따라 데이터값이 변하고, 데이터값이 변하면 화면에 보이는 값도 달라진다. 양방향 바인딩의 대표적 사례는 로그인 값을 즉시 체크해주는 폼 기능이다. 최근 쇼핑몰에 접속한 경우를 떠올려보자. 

언제부터 로그인 폼에서 아이디와 비밀번호를 실시간으로 체크해주는 사이트가 많이 등장했다. 이른바 사용자가 입력한 값을 DB에서 즉시 체크해서 결과를 view로 전달해주는 양방향 통신인데, vue를 사용하면 간단하게 구사할 수 있다. 원리는 간단하다. 특정 페이지가 로딩되기 전에 서버에서 가져온 JSON데이터를 data프로퍼티에 저장해놓고, 사용자가 입력한 값을 form태그를 통해 체크하면 된다.

양방향 바인딩은 주로 Form태그와 함께 사용하며, V-model="속성값"형식으로 사용가능하다. 

<textarea v-model="message">{{myMessage}}</textarea>

양방향 바인딩에서 주의해야 할 점은 input태그의 file타입에는 사용할 수 없다는 점이다. file타입에서는 단방향 바인딩을 사용할 수 있으며, 아래와 같이 methods와 함께 사용해야 한다. 이 부분을 헷갈리면 꽤 많은 삽질을 하게 된다. 

---

  <div id="app2">

      <form>

          <input type="file" v-on:change="fileSlc">

          <img v-bind:src="slc2">

          <p>{{slc2}}</p>

      </form>

 </div>

---

file타입에는 자바스크립트 DOM에서 사용하는 change이벤트를 그대로 사용할 수 있고, methods에 있는 함수를 연결한다. 이때 함수명()과 같은 양식이 아닌 '함수명'만 입력한다. img태그에는 단방향 바인딩으로 src속성에 연결하고, vue인스턴스를 작성한다.

* vue 인스턴스

---

<script>

   let slc3='이미지경로';

   let vueImgTest = new Vue({

       el:'#app2',

       data : {

            slc2:slc3

          },

       methods:{

           fileSlc : function(event){

               let file = event.target.files[0]

               this.slc2 = window.URL.createObjectURL(file)

          }

       }

   });

</script>

---

file태그에 이미지 파일을 올려보자. {{slc2}}부분에 해당 파일에 관한 정보가 뜨고, 이미지가 나올 것이다. 이렇게 단방향 바인딩과 methods를 결합하면, 수동적인 양방향 바인딩을 구현할 수 있다. 또한 양방향 바인딩을 통해 아무말 변환기나 맞춤법 검사기도 가능하다. 단, 맞춤법 사전이나 아무말이 기록된 DB(json파일)가 있어야 한다.

 

{{slc2}}

결과

{{userText}}