데이터 바인딩(Data Binding)

Vue는 Angular와 마찬가지로 양방향 데이터 바인딩(Two-way data binding)을 지원함

참고로 React는 단방향 데이터 바인딩만을 지원함

여기서 양방향 데이터 바인딩이라는 것은 Model에서 정의한 데이터를 정의한 후 View와 연결하면 Model과 View 중 어느 한쪽에 변경이 일어났을 때 다른 한 쪽으로 자동으로 반영되는 것을 의미함

 

서버로부터 받아온 데이터를 바인딩 하는 경우

 - 데이터가 html tag 안에 텍스트로 바인딩 되는 경우

 - 데이터가 html tag의 속성(Attribute)로 바인딩 되는 경우

 - 데이터가 html의 Form element의 value에 바인딩 되는 경우

 - 다중 데이터가 html의 다중 element를 생성하기 위해서 바인딩 되는 경우

 

문자열 데이터 바인딩

<template>
  <h1>Hello, {{ title }}!</h1>
</template>

<script>
  export default {
    data() {
      return {
        title: 'World'
      }
    }
  }
</script>

 - 코드를 보면 <template>에는 {{title}}, <script>에는 data() 부분에 title: 'World'라는 코드가 있습니다. data 프로퍼티에 정의된 title이 template의 {{title}}에 바인딩 되는 구조입니다. 이렇게 Vue 컴포넌트에서는 data에 정의되는 데이터를 이중괄호( {{ }} )를 이용해서 html에 데이터 바인딩할 수 있습니다.

 

raw(원시) HTML 데이터 바인딩

 - HTML 태크를 바인딩 할 때는 문자열을 바인딩 할 때 사용한 이중 중괄호를 이용하면 안됨

 - 이중 중괄호를 이용해서 바인딩 하면 html 태그가 아니라 문자열, 즉 텍스트로 인시하게 됨

 - 실제 HTML로 출력되기 위해서는 v-html 디렉티를 사용해야 함

 - 참고로 Vue에서 사용하는 디렉티브는 v-를 접두사로 사용함

<template>
  <div>
    <div>{{ htmlString }}</div>		<!-- <p>This is text</p> -->
    <div v-html="htmlString"></div>	<!-- This is text -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        htmlString: '<p>This is text</p>'
      }
    }
  }
</script>

 

Form 입력 데이터 바인딩

 - 웹 페이지에서 사용자로부터 데이터를 입력받을 수 있는 필드를 Form Element라고 함

 - v-model 디렉티브를 사용하여 양방향 데이터 바인딩을 생성할 수 있음

 - 주의해야 할 점은 v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송한다는 것이다

 

 - Input type=text

   : 사용자로부터 텍스트를 입력받을 수 있는 input type=text의 경우, 입력받은 텍스트는 value에 저장이 되게 됨

   : input type=text에서 v-model은 내부적으로 input type=text의 value 속성을 사용하게 됨

   : data()에 정의된 데이터 키명을 v-model에 넣어주면 모델인 data와 뷰인 input type=text의 value 속성이 서로 양방향으로 데이터 바인딩 설정됨

 

 - Input type=number

   : v-model.number 디렉티브를 사용하여 데이터 바인딩

   : 나중에 프로그램 코드 내에서 사용자가 입력한 값은 문자가 아니라 숫자로 관리가 됨

 

 - Textarea

   : <textarea>텍스트 영역 메시지</textarea> 형태로 사용해왔기 때문에

   : Vue 컴포넌트에서 역시 <textarea>{{message}}</textarea> 형태로 사용될거라 생각할 수도 있지만

   : <textarea v-model="message"></textarea>로 사용해야 함

 

 - Select

   : Select 객체 역시 input type=text와 동일하게 v-model은 내부적으로 select의 value 속성을 사용해서 양방향 데이터 바인딩을 함

 

 - Input type=checkbox

   : 체크박스의 경우에는 input type=text, select와 다르게 v-model은 내부적으로 체크박스의 checked 속성을 사용함.

   : 체크박스에서는 v-model이 체크박스의 value 속성이 아닌 checked 속성을 사용하기 때문에 value 속성에 데이터 바인딩을 하려면 v-model이 아닌 v-bind:value 를 사용해야 함

 

 - Input type=radio

   : 라디오 역시 체크박스와 마찬가지로 v-model은 내부적으로 checked 속성과 바인딩이 이루어짐

   : value 속성에 데이터 바인딩을 하려면 v-model이 아닌 v-bind:value를 사용해야 함

 

 - 속성 (Attribute)

   : value를 제외한 HTML 객체의 속성에 데이터를 바인딩 하기 위해서 v-bind: 디렉티브를 사용함

   : v-bind: 디렉티브는 v-bind를 생략하고 :(콜론)으로 사용할 수도 있음

 

 - Img 객체의 src

   : 이미지의 주소를 img 객체의 src에 바인딩할 경우 v-bind:src="주소"로 사용

 

 - Button 객체의 disabled

   : 데이터 바인딩을 통해 v-bind:disabled="변수 == 0" 처럼 변수가 0일 경우에는 disabled 처리를 할 수 있음

 

 - 클래스 바인딩

   : v-bind:class를 이용하여 원하는 조건에만 해당 클래스가 들어가도록 설정할 수 있다.

   : 다른 속성의 경우에는 하나의 속성만을 이용해서 바인딩 해야 하지만 클래스의 경우에는 기본 클래스와 데이터 바인딩 처리를 하는 클래스를 공존해서 사용할 수 있다

   : 바인딩할 클래스를 Key로 잡고 바인딩 여부를 true/false로 지정함

   : v-bind:class="[testClass, subClass]" 처럼 배열을 사용하여 클래스를 바인딩 할 수도 있음 (아래 코드)

<template>
  <div
    class='container'
    :class='[testClass, SubClass]'
  >
    Class Binding
  </div>
  <div
    :class="'test': isTrue"
  >
    Class Binding
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isTrue: true,
        testClass: 'test',
        subClass: 'sub'
      }
    },
  }
</script>

 

 - 인라인 스타일 바인딩

   : 인라인 스타일의 경우 데이터를 오브젝트로 선언해서 바인딩할 수 있음

   : 클래스 바인딩처럼 배열을 이용해서 바인딩 가능

<template>
  <div
    :style="styleObject"
  >
    Inline Style Bind
  </div>
</template>
<script>
  export default {
    data() {
      return {
        styleObject: {
          color: 'red',
          fontSize: '15px',
        }
      }
    },
  }
</script>