Vue 문법 : 데이터 바인딩

vue의 데이터 바인딩 방식

vue에서 데이터나 JS 표현식을 삽입할 때는 크게 두 가지 방식을 사용할 수 있다.

1. 템플릿 문법 ``
2. 디렉티브 (‘v-‘ 형태로 시작하는)

두 가지 모두 JS 표현식의 경우 단일 표현식만 들어갈 수 있다.
여기에서 ‘단일 표현식’이란 값으로 평가할 수 있는 코드를 말한다.
공식 문서의 설명에 의하면,

각 바인딩에는 하나의 단일 표현식만 포함될 수 있습니다. 표현식은 값으로 평가할 수 있어야 하는 코드 조각입니다. 쉽게 말해 return 뒤에 사용할 수 있는 코드여야 하는 것입니다.
(출처: Vue 공식 한국어 문서)

템플릿 문법

``을 이용해 동적인 값을 html에 삽입할 수 있다.
내부에 동적 값이나 단일 JS 표현식을 넣으면 된다.

<p>안녕하세요! 제 이름은  입니다.</p>

이렇게 사용할 수 있다.
이렇게 대체된 값은 텍스트로 인식된다.

디렉티브

디렉티브는 DOM 표현에 필요한 동적인 값을 넣을 수 있는 vue의 문법이다.
동적으로 DOM을 업데이트할 때 사용된다.
html의 속성과 유사한 형태를 갖고 있다.
v-[디렉티브명]="[속성값]" 구조로 이루어진다.
템플릿 문법과 마찬가지로 속성값에는 동적 값이나 단일 JS 표현식이 들어간다.
(단 특정 디렉티브 - v-for, v-on, v-slot - 은 특수한 값이 들어감)

디렉티브의 경우 종류가 다양하나 대표적인 것들을 짚어보자면

1. v-if, v-else, v-else-if: 조건문 역할
2. v-for: 반복문 역할
3. v-bind: HTML 속성과 동적 값을 바인딩해줌
4. v-on: DOM 이벤트를 수신해줌

등이 있다.

---

레퍼런스

• Vue.js 한국 공식 문서 - 템플릿 문법