데이터 바인딩

https://vuejs.org/v2/guide/syntax.html

data binding

- dom 기반 html template에 vue데이터를 바인딩하는 방법

 1) Interpolation(값 대입)

: 가장 기본적인 데이터 바인딩 체계 Mustache {{ }}를 이용해서 대입

<div>Message : {{ msg }}</div>  <div id="item-{{ id }}"></div>

 2) Binding Expressions (값 연결)

: {{ }}를 이용한 데이터 바인딩을 할때 자바스크립트 표현식을 사용할수있다.

<div>{{ number + 1 }}</div>  <div>{{ message.split('').reverse().join('') }}</div> //true  <div>{{ if (ok) { return msg } }}</div>  //false

: Vue에 내장된 Filter를  {{ }} 안에 사용가능

{{ message | capitalize }}   {{ message | capitalize | upcapitalize }}

 3) Directives(디렉티브 사용)

  : Vue에서 제공하는 특별한 Attributes이며 v-의 prefix(접두사)를 갖는다. 자바스크립트 표현식, filter 모두 적용됨

 v- if, v- on, v-bind 등

Class binding

 : css 스타일링을 위해서 class를 아래 2가지 방법으로 추가가 가능하다.

1) class="{{ className}}"

2) v-bind:class

-> 가급적 한가지 방법을 적용해야 에러가 나지 않음

class 속성과 v-bind속성은 동시 사용가능

<div class="static" v-bind:class="{ 'class-a':isOn, 'class-b': isOff }"></div>   <script>   data: {      isOn : true,      isOff : false  }   </script>

Array구문도 사용할 수 있음

<div v-bind:class="[ classA, classB ]"></div>     <script>   data: {      classA : 'class-a',      classB : 'class-b'  }   </script>