[Vue.js] 데이터 바인딩 방법

문자열

• Mustache(이중 중괄호({})) 활용
  <span>{{ msg }}</span>
  • JavaScript 표현식 하나씩도 넣을 수 있으나 조건문은 삼항연산자로 넣어야 함
    {{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
    • 하지만 가능하면 뷰모델의 computed 속성을 활용하는 것이 좋음
  • 한 번 삽입 후 변경하지 않으려면 v-once 디렉티브 활용
    <span v-once>{{ msg }}</span>
• v-text 디렉티브 활용
  <span v-text="msg"></span>

raw HTML

• v-html 디렉티브 활용
  <span v-html="html"></span>

태그 속성

• v-bind 디렉티브 활용
  <div v-bind:property="dynamicProperty">...</div>
  • 단, 값이 null, undefined, false이면 해당 속성은 렌더링 되지 않음
  • 약어로 콜론(:)만 쓸 수도 있음
    <div :property="dynamicProperty">...</div>

class

• v-bind:class 활용
  • 직접 입력된 일반 class 속성과 함께 쓸 수 있음
    1. 인라인: 중괄호 활용
       <div v-bind:class="{ active: isActive }">...</div>
    2. 뷰모델: 일반 속성이나 computed 속성 활용

<!--html-->
<div v-bind:class="classObject">...</div>

// vm
...
data: {
  classObject: {
    active: true
  }
}
// 또는
computed: {
  classObject: function() {
    return { active: this.isActive && this.error }
  }
}
...

• component에도 일반 태그와 동일하게 사용
  <my-compenent v-bind:class="{ active: isActive }"></my-component>

style

• v-bind:style 활용
  • class 바인딩과 거의 동일하지만 class는 진리값에 따라서 이름만 남는데 반해서, style은 해당 값이 남는다는 차이가 있음
  • 중괄호 안은 CSS 문법과 비슷해보이지만 엄연히 JavaScript임
  1. 인라인
     <div v-bind:style="{ fontSize: fontSize + 'px' }">...</div>
  2. 뷰모델 (권장)
     <div v-bind:style="styleObject">...</div>
     • 배열도 사용 가능
       <div v-bind:style="[baseStyles, overridingStyles]"></div>

디렉티브의 전달인자

• 대괄호([]) 활용
  <a v-on:[eventName]="doSomething">...</a>
  • 모든 결과는 string으로 전환됨
    • 예외: null은 명시적으로 바인딩을 제거할 때 사용
  • HTML 속성명으로 렌더링 되므로 따옴표나 스페이스 등의 문자는 사용할 수 없음
  • 탬플릿이 HTML파일에 직접 쓰여진 경우, 브라우저가 모든 속성명을 소문자로 만들기 때문에 대문자 사용을 피할 것

참고한곳

• 템플릿 문법 @ Vue.js
• API/디렉티브 @ Vue.js