Vue Template Syntax

Vue Template Syntax

 

1. Template Syntax

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

 

2. Interpolation(보간법)

 

1) 보간법 (Interpolation) - Text(문자열)

• 데이터 바인딩의 가장 기본 형태이며 "Mustache" 구문, (이중 중괄호)을 사용한 텍스트 보간법이다.

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

• Mustache 태그는 데이터 객체의 msg 속성 값으로 대체 ( 해당 값이 변경되면 대체)
• v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행한다.

<span v-once>다시는 변경하지 않습니다. {{ msg }} </span>

 

2) 보간법 (Interpolation) - Raw HTML (원시 HTML)

• 이중 중괄호는 HTML는 아닌 일반 텍스트로 해석하며 실제 HTML을 출력하기 위해서 v-html 디렉티브 사용
• 웹사이트에서 임의의 HTML을 동적으로 렌더링하려면 XSS 취약점으로 쉽게 이어질 수 있어 매우 위험할 수 있음. 따라서 신뢰할 수 있는 콘텐츠에서만 HTML 보간법을 사용해야 함.

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

 

3) 보간법 (Interpolation) - JavaScript 표현식 사용

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

{{ number+1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>


// 한가지 제한 사항은 각 바인딩에 하나의 단일 표현식만 포함될 수 있음
// 아래처럼 작성하면 안됨

<!-- 아래는 구문이며, 표현식이 아님 -->
{{ var a = 1 }}
<!-- 조건문은 작동되지 않음. 삼항 연산자를 활용해야함 -->
{{ if (ok) { return message } }}

 

 

3. Directive (디렉티브)

• v- 접두사가 있는 특수 속성
• 속성값은 단일 Javascript 표현식이 되며 v-for는 예외
• 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용

v-text	v-else-if	v-slot
v-html	v-for	v-pre
v-show	v-on	v-cloak
v-if	v-bind	v-once
v-else	v-model

 

 

1) Directive (디렉티브) : v-text

• 엘리먼트의 textContext를 업데이트
• 일부를 갱신해야 한다면 {{ }} 을 사용해야함

<span v-text="msg"></span>
<!-- 위와 같음 -->
<span>{{ msg }} </span>

 

2) Directive (디렉티브) : v-bind

• HTML 요소의 속성에 Vue 상태 데이터를 값으로 할당
• Object 형태로 사용하면 value가 true인 key가 class 바인딩 값으로 할당

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

<!-- 약어 사용 -->
<a :href="url">...</a>

 

3) Directive (디렉티브) : v-model

• HTML form 요소의 input 엘리멘트 또는 컴포넌트에 양방향 바인딩 처리
• 수식어
  • .lazy : input 대신 change 이벤트 이후에 동기화
  • .number : 문자열을 숫자로 변경
  • .trim : 입력에 대한 trim 진행
• form 엘리먼트 초기 'value'와 'checked', 'selected' 속성을 무시함

 

4) Directive (디렉티브) : v-show

• 조건에 따라 엘리먼트를 화면에 표시
• 항상 렌더링 되고 DOM에 남아 있음
• 단순히 엘리먼트에 display CSS 속성을 토글하는 것
• 조건이 바뀌면 트랜지션이 호출됨

<h1 v-show="ok">Hello ! </h1>

 

5) Directive (디렉티브) : v-if, v-else-if, v-else

• 표현식 값의 참 거짓을 기반으로 엘리먼트를 조건부 렌더링함
• 엘리먼트 및 포함된 디렉티브/컴포넌트는 토글하는 동안 삭제되고 다시 작성됨
• <template> 엘리먼트를 이용하여 v-if 사용가능, 최종 결과는 <template> 엘리먼트를 포함하지 않음

<span v-if="age < 10">무료</span>
<span v-else-if="age < 20">7000원</span>
<span v-else-if="age < 65">10000원</span>
<span v-else>3000원</span>

 

6) Directive (디렉티브) : v-for

• 원본 데이터를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링
• 디렉트리브의 값은 반복되는 현재 엘리먼트에 대한 별칭을 제공하기 위해 alias in expression을 사용함
• 또는 인덱스(아니면 객체의 경우 키)의 별칭 사용 가능
• v-for의 기본 동작은 엘리먼트를 이동하지 않고 그 자리에서 패치 시도, 강제로 엘리먼트의 순서를 바꾸려면 특수 속성 key 설정
• v-if와 함께 사용할 경우 v-for는 v-if보다 높은 우선순위를 갖음. 따라서 되도록 같이 작성하는 것을 피해야 함

<div v-for="item in items">
	{{ item.text }}
</div>

<!-- 인덱스 or 객체의 키 사용 -->
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

<div v-for="item in items" :key="item.id">
	{{ item.id }}
</div>

 

7) Directive (디렉티브) : v-on

• 엘리먼트에 이벤트 리스너를 연결
• 이벤트 유형은 전달인자로 표시
• 약어를 제공하여 v-on:click === @click

<div id="example">
	<button v-on:click="counter += 1">Add 1</button>
	<p> 위 버튼을 클릭한 횟수는 {{ counter }} 번입니다. </p>
</div>

 

8) Directive (디렉티브) : v-cloak

• Vue Instance가 준비될 때까지 Mustache 바인딩을 숨기는 데 사용
• [v-clock] { display : none }과 같이 CSS 규칙과 함께 사용
• Vue Instance가 준비되면 v-cloak는 제거됨