Template Syntax

Template Syntax

렌더링 된 DOM을 기본 Vue instance의 data에 선언적으로 바인딩 할 수 있는 HTML 기반 template syntax를 사용

• 렌더링 된 DOM - 브라우저에 의해 보기좋게 그려질 HTML 코드
• HTML 기반 template syntax - HTML 코드에 직접 작성할 수 있는 문법 제공
• 선언적으로 바인딩 - Vue instance와 DOM을 연결

 

1. 보간법 (Interpolation)

2. 디렉티브 (Directive)

 

 

Interpolation (보간법) - 문자열

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

// 일회성 보간
<span v-once>다시는 변경하지 않아 : {{ msg }}</span>

• 데이터 바인딩의 가장 기본 형태 "Mustache" 구문(이중 중괄호)을 사용한 텍스트 보간
• Mustache 태그는 데이터 객체의 msg 속성 값으로 대체 (해당 값이 변경되면 갱신)
• v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간 수행

 

 

 

Interpolation - Raw HTML

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

• 이중 중괄호는 HTML이 아닌 일반 텍스트로 해석, 실제 HTML을 출력하기 위해서는 v-html 사용

 

 

 

Interpolation - JavaScript 표현식 사용

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

{{ num + 1 }}
{{ ok ? 'Yes' : 'No' }}
{{ msg.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

// 각 바인딩에는 하나의 단일표현식만 포함될 수 있으므로 아래와 같이 작성하면 X
// 아래는 표현식이 아닌 구문
{{ var a = 1 }}
// 조건문은 작동 X -> 삼항연산자 사용해야 ㅇㅇ
{{ if (ok) {return a} }}

 

Directive

: v- 접두사가 있는 특수 속성

• 속성값은 단일 JS 표현식이 됨
• 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM 에 적용

 

기본 구성

v-on:submit.prevent="onSubmit"

-> ` : ` 을 통해 전달인자 받을 수 있음

-> ` , ` 으로 표시되는 특수 접미사 - directive를 특별한 방법으로 바인딩 해야 함

 

 

 

Directive : v-text

: 엘리먼트의 textContext를 업데이트

• 일부를 갱신해야 한다면 {{ }} 를 사용해야 함

// 둘 다 같은 코드
<span v-text="msg"></span>
<span>{{ msg }}</span>

 

 

 

Directive : v-html

: RAW HTML을 표현할 수 있는 방법

단, 사용자가 입력하거나 제공하는 컨텐츠 에서는 절대 사용금지

 

 

 

Directive : v-show

: 조건에 따라 엘리먼트를 화면에 표시

• 항상 렌더링 되고  DOM에 남아있음
• 단순히 엘리먼트에 display CSS 속성을 토글하는 것

<h1 v-show="ok">안녕</h1>

 

Directive : v-if

: 표현식 값의 참 거짓을 기반으로 엘리먼트를 조건부 렌더링 함

• v-show와 사용방법 동일
• 단, 값이 false인 경우 DOM에서 사라짐
• v-if v-else-if, v-else 형태로 사용

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

v-show	v-if
표현식 결과와 관계없이 렌더링 -> 렌더링에 필요한 비용은 상대적으로 높을 수 있음 display 속성 변경으로 표현여부를 판단하므로 렌더링 후 toggle 비용은 적음	표현식 결과가 false인 경우 렌더링조차 되지 않음 -> 초기 렌더링 비용은 v-show 보다 낮을 수 있음 단, 표현식 값이 자주 변경되는 경우 잦은 재 랜더링으로 비용 증가

 

 

 

Directive : v-for

: 반복한 데이터 타입에 사용 가능

for ... in ... 형식으로 작성

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

 

1) 반복한 데이터 타입에 모두 사용 가능

-> (char, index) 형태로 사용 가능

2) 배열은 문자열과 동일하게 사용 가능

-> 각 요소가 객체라면 dot notation으로 접근할 수 있음

3) 객체 순회 시 value가 할당되어 출력

-> 두번째 변수 할당 시 key 출력 가능

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

 

[참고] 특수 속성 key

"v-for 사용 시 반드시 key 속성을 각 요소에 작성"

vue 화면 구성 시 이전과 달라진 점을 확인하는 용도로 활용

-> 따라서 key가 중복되어서는 안됨

각 요소가 고유한 값을 가지고 있지 않다면 생략할 수 있음

 

 

 

Directive : v-model

: HTML form 요소의 input 엘리먼트 또는 컴포넌트에 양방향 바인딩 처리

• form 엘리먼트 초기 'value'와 'checked', 'selected' 속성을 무시함

 

 

Directive : v-on

: addEventListener의 역할

• ` : ` 을 통해 전달 받은 인자 확인
• 약어 제공 : v-on:click === @click

<div id='test'>
    <button v-on:click='count += 1'>ADD 1</button>
    <p>버튼을 {{ count }}번 클릭했어요</p>
</div>

 

 

Directive : v-bind

: HTML 요소의 속성에 Vue 상태 데이터를 값으로 할당

• Object 형태로 사용하면 value가 true인 key가 class 바인딩 값으로 할당
• 약어 제공: v-bind:herf === :herf

// 둘 다 같은 코드
<a v-bind:herf='url'>...</a>
<a :herf='url'>...</a>

 

 

[공식 문서]

Template Syntax — Vue.js

 

 

 

 

 

 

겹벚꽃이 벚꽃보다 더 좋아

불편한 마음이 커지는건 어떻게 멈추는건지,, 뼛속까지 다정한 사람이 되고싶다