3. Vue 템플릿 문법

템플릿 문법

Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용

내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일함
반응형 시스템과 결합된 Vue는 앱 상태가 변경 될 때 최소한으로 DOM을 조작하고
다시 적용할 수 있는 최소한의 컴포넌트를 지능적으로 파악할 수 있음

#보간법

---

문자열

바인딩의 가장 기본 형태는 Mustache({{ }})를 사용한 텍스트 보간

<span>메시지: {{ msg }}</span>

원시 HTML

<div v-html="msg"></div>

컨텐츠는 일반 HTML 형식으로 삽입

속성

HTML 내부의 값을 데이터로 하고싶은데
Mustaches는 HTML 속성으로 사용 불가 => v-bind 사용해야함

<img v-bind:src="image.jpg" />
<img :src="image.jpg" /> 
//v-bind생략가능

JavaScript 표현식

Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원함

{{ number + 2 }}
{{ ok ? 'YES' : 'NO }}
<div v-bind:id="'list-+' + id></div>

이때 변수선언이나 조건문을 넣으면 작동하지 않으니 유의할 것

#디렉티브

---

디렉티브란?

v- 접두사가 있는 특수 속성
디렉티브 속성 즉 v-뒤에 오는 값은 단일 JavaScript 표현식이 됨(v-for예외)

전달인자

일부 디렉티브는 콜론으로 표시되는 “전달인자”를 사용
<a v-bind:href="url"></a>
이때 href는 전달인자로 href속성을 url의 값에 바인드하는 v-bind에게 알려줌

수식어

점으로 표시되는 특수 접미사로 디렉티브를 특별한 방법으로 바인딩할때 사용
나중에 v-on, v-model을 볼때 다시 나오니 그 때 정리할 예정

#필터

---

일반 텍스트 서식을 적용할 때 사용 가능한 필터를 정의할 수 있음
Mustaches 와 v-bind 두곳에서 사용 가능
파이프( | ) 기호로 표시

{{ message | capitalize }} // message의 내용을 capitalize 하겠다

필터를 통해 데이터 변환을 할 때는 계산된 속성을 사용해야함

여러 필터를 동시에 적용 가능함(체이닝)

{{ message | filterA | filterB }}

필터는 JS함수이므로 전달인자 사용 가능

#약어

---

v- 접두사는 Vue 특정 속성을 식별하기 위해 사용
가장 많이 쓰이는 v-bind와 v-on에 대해 특별한 약어 제공

v-bind약어

<a v-bind:href="url"></a>
<a :href="url"></a> // v-bind 생략가능

v-on약어

<a v-on:click="do"></a>
<a @click="do"></a> // v-on: 대신 @사용 가능