Vue - 템플릿 문법

• 텍스트 보간법 (Mustache - 이중 중괄호)
• 속성 바인딩
• JavaScript 표현식
• 디렉티브

 

템플릿 문법

 Vue는 컴포넌트 인스턴스의 데이터를 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용한다. 내부적으로 템플릿을 최적화된 JavaScript 코드로 컴파일하기 때문에 변경 사항을 적용할 때, 다시 렌더링할 필요가 있는 최소한의 컴포넌트를 파악하고 DOM 조작을 최소화 시켜준다.

 

1. 텍스트 보간법 (Mustache - 이중 중괄호)

• 데이터 바인딩의 가장 기본적인 형태는 이중 중괄호 문법을 사용한 텍스트 보간법
• 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석하므로 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다.

<!-- 텍스트 보간법 -->
<span>메세지 : {{ msg }}</span>

<!-- HTML 출력 -->
<p>텍스트 보간법 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

<!-- 결과 -->
텍스트 보간법 사용: <span>HTML을 포함한 텍스트</span>

v-html 디렉티브 사용: HTML을 포함한 텍스트

 

2. 속성 바인딩

• 이중 중괄호는 HTML 속성 내에서 사용할 수 없기 때문에 v-bind 디렉티브를 사용
• v-bind 디렉티브는 엘러먼트의 id 속성을 컴포넌트의 dynamicId 속성과 동기화된 상태로 유지
• 바인딩된 값이 null 또는 undefined 이면 엘리먼트의 속성이 제거된 상태로 렌더링

<!-- 속성 바인딩 -->
<div v-bind:id="dynamicId"></div>

 

2-1. 단축 문법

• v-bind 는 일반적으로 사용되기 때문에 단축 문법이 있다. ( v-bind: → : )

<!-- 단축 문법 -->
<div :id="dynamicId"></div>

 

2-2. Boolean 속성

• disabled 는 일반적으로 사용되는 Boolean 속성 중 하나이다.

<!-- Boolean 속성 -->
<button :disabled="isButtonDisabled">버튼</button>

 

2-3. Object 바인딩

• 여러 속성을 가진 Object를 동적으로 바인딩할 수 있다.

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

...

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

 

 

3. JavaScript 표현식 

• 바인딩 내에서 JavaScript 표현식을 사용할 수 있다.

{{ number + 1 }}

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

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

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

 

3-1. 함수 호출

• 바인딩 내에서 함수 호출 또한 가능하다.

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

 

4. 디렉티브

• v- 접두사가 있는 특수한 속성을 디렉티브라 한다. 
• 디렉티브의 속성 값은 단일 JavaScript 표현식이어야 한다.(v-for, v-on, v-slot 제외)
• 디렉티브의 역할은 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용

<!-- seen 이 false 이면 제거 된다 -->
<p v-if="seen">이제 이것을 볼 수 있습니다.</p>

디렉티브	역할
v-if	if문과 같다 true,false값에 따라 화면에 표시한다.
v-for	지정한 뷰 데이터의 개수만큼 반복하여 출력
v-show	css의 display:none 으로 속성을 준다. if문의 경우 태그를 완전삭제함.
v-bind	vue 데이터속성과 html태그 기본속성을 연결해줌
v-on	화면요소의 이벤트를 감지하여 처리 할 때 사용함
v-model	form에서 주로 사용되는 속성. form태그에 입력한 값을 vue인스턴스의 데이터와 동기화함. 화면에 입력된 값을 서버로 보낼때 사용.(watch와 같은 고급 속성을 이용하여 추가 로직 수행 가능함) 주의 사항으로는 <input>, <select>, <textarea>태그에만 사용 가능함.

 

4-1. 인자

• 일부 디렉티브는 디렉티브 뒤에 콜론(:)으로 표시되는 인자를 사용할 수 있다.

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

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


<a v-on:click="doSomething"> ... </a>

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

 

4-2. 수식어

• 수식어는 점(.)으로 시작하는 특수한 접미사로, 특별한 방식으로 바인딩되어야 할 때 사용한다.

<!-- event.preventDefault()를 호출하도록 v-on 디렉티브에 지시 -->
<form @submit.prevent="onSubmit">...</form>