템플릿 문법

텍스트 보간법
데이터 바인딩의 가장 기본적인 형태는 Mustache(이중 중괄호) {{   }}

속성 바인딩

<div v-bind:id="dynamicId"></div>

v-bind 디렉티브는 엘리먼트의 id 속성을 컴포넌트의 dynamicId 속성과 동기화된 상태로 유지
바인딩 값이 null 또는 nudefined이면 엘리먼트의 속성이 제거된 상태롤 렌더링

단축 문법

<div :id="dynamicId"></div>

불리언 특성

<button :disabled="isButtonDisabled">버튼</button>

truthy 값이 있는경우 ture / 그 외 falsy 의 경우 속성 생략

여러 속성을 동적으로 바인딩
여러 속성을 나타내는 JavaScript 객체가 있는 경우

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

//template
<div v-bind="objectOfAttrs"></div>

자바스크립트 표현식 사용
지금까지는 템플릿의 간단한 속성 키에만 바인딩, 실제로 모든 데이터 바인딩 내에서 자바스크립트 표현식 기능 지원

//template
{{ number + 1 }}

{{ ok ? '예' : '아니오' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

하나의 표현식만 가능
각 바인딩에는 하나의 단일 표현식만 포함될 수 있음, 아래 코드들은 작동하지 않는다

//template

<!-- 이것은 표현식이 아니라 선언식입니다: -->
{{ var a = 1 }}

<!-- 흐름 제어도 작동하지 않습니다. 삼항 표현식을 사용하십시오. -->
{{ if (ok) { return message } }}

함수 호출
바인딩 표현식 내부에서 컴포넌트에서 노출하는 메서드를 호출 가능

//template
<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

디렉티브
v- 접두사가 있는 특수한 속성을 디렉티브라고 함
Vue는 위에서 소개한 v-html과 v-bind를 포함하여 빌트인 디렉티브를 제공
디렉티브 속성 값은 단일 자바스크립트 표현식이여야함(v-for, v-on, v-slot 제외)
디렉티브의 역할 : 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용하는 것

//template
<p v-if="seen">이제 이것을 볼 수 있습니다.</p>

v-if 디렉티브는 seen 의 불리언 (turthy / falsy) 값을 기반으로 <p> 엘리먼트를 삽입 또는 제거

인자
일부 디렉티브는 디렉티브 뒤에 콜론 ( : )으로 표시되는 "인자" 를 사용할 수 있음
예를 들어 디렉티브는 HTML 속성을 반응적으로 업데이트 하는데 사용

//template

<a v-bind:href="url"> ... </a>

<!-- 단축 문법 -->
<a :href="url"> ... </a>

DOM 이벤트를 수신하는 v-on 디렉티브
<a v-on:click="doSomething"> ... </a>

<!-- 단축 문법 -->
<a @click="doSomething"> ... </a>

동적인 인자
디렉티브의 인자를 대괄호로 감싸서 JS 표현식으로 사용할 수도 있음

//template

<!--
아래의 "동적인 인자 값 제약 조건" 및 "동적인 인자 문법 제약 조건" 섹션에 설명된 대로,
인자 표현식에는 몇 가지 제약 사항이 있음에 유의하십시오.
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 단축 문법 -->
<a :[attributeName]="url"> ... </a>

여기서 attributeName 은 JS 표현식으로 동적으로 평가, 평가된 값은 인자의 최종값으로 사용
예를 들어 컴포넌트 인스턴스의 데이터에 attributeName 속성값이 "href" 인 경우, 바인딩은 v-bind:href 와 같다
마찬가지로 동적 인자를 사용, 핸들러에 이벤트 이름을 동적으로 바인딩 가능

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 단축 문법 -->
<a @[eventName]="doSomething"> ... </a>

여기서 eventName 의 값이 "focus" 인 경우, v-on:[eventName] 은 v-on:focus 와 같다

동적 인자 값 제약조건
null or 문자열로 평가 되어야함, null 은 바인딩을 명시적으로 제거ㅡ 문자열이 아닌 다른 값은 에러를 트리거

동적 인자 문법 제약조건

<!-- 이렇게 하면 컴파일러 경고가 트리거 -->
<a :['foo' + bar]="value"> ... </a>

<a :[someAttr]="value"> ... </a>

someattr 로 변환됨, someAttr 속성을 사용했다면 코드가 작동하지 않음, 대문자로 키 이름을 지정하는 것을 피해야함

수식어
( . )으로 시작하는 특수한 접미사로, 디렉티브가 특별한 방식으로 바인딩되어야함
예를 들어 .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on 디렉티브에 지시

https://ko.vuejs.org/guide/essentials/template-syntax

Vue.js