[Vue.js] Template Syntax

1. Template Syntax

Vue.js

 

---

가. Text Interpolation

 

<span> Message: {{msg}}</span>

 

가장 기본적인 데이터 바인딩 방식이다.

 

Mustache syntax (콧수염 구문)을 사용한다.

 

Mustache syntax tag는 상응하는 컴포넌트 인스턴스의 msg 프로퍼티의 값으로 대체된다.

 

또한 msg 프로퍼티의 값이 변경되면 언제든지 업데이트된다!

 

---

나. Raw HTML

 

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

 

Mustache syntax는 plain text로 해석된다.

 

만약 plain text가 아닌 HTML로 해석되기 원한다면 v-html라는 속성을 사용한다.

 

v-html는 directive라고 한다.

 

directive는 Vue에서 제공하는 특수한 속성임을 나타내기 위해 접두사 v-를 사용한다.

 

XSS 공격에 취약하기 때문에 되도록 v-html은 사용하지 말자.

 

---

다. Attribute Bindings

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

Mustache syntax는 HTML 속성(attribute) 내에서 사용할 수 없다.

 

대신에 v-bind 디렉티브를 사용한다.

 

v-bind 디렉티브는 엘리먼트의 id 속성을 컴포넌트의 dynamicId 속성과 동기화된 상태로 유지한다.

 

바인딩된 값이 null 또는 undefined이면 엘리먼트의 속성이 제거된 상태로 렌더링 된다.

 

1) 단축 문법

<div :id="dynamicId"></div>
<h1 :class="[colorCrimson, {'text-decorate' : isecorate}]" >Heading</h1>

v-bind:는 굉장히 많이 사용되기 때문에 :로 줄여 쓴다.

 

바인딩할 값이 여러 개라면 배열로 넣을 수도 있다.

 

2) 동일 이름 축약

<!-- :id="id" 와 동일 -->
<div :id></div>

<!-- 이것도 작동합니다 -->
<div v-bind:id></div>

더 나아가 속성 이름과 바인딩되는 이름이 같을 경우 생략할 수 있다.

 

3) Boolean Attributes

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

<!-- class에 포함하거나 안하거나 -->
<h1 :class="{'text-decorate' : isDecorate}" >Heading</h1> 

 

4) 여러 속성을 동적으로 바인딩

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

여러 속성을 묶은 JavaScript 객체.

 

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

v-bind로 한 번에 바인딩.

 

---

라. JavaScript Expressions

 

지금까지 배운 모든 데이터 바인딩 내에서 JavaScript 표현식을 지원한다.

 

💡 Q. Expression이란?

JavaScript 표현식(Expressions)은 값으로 평가되는 유효한 코드의 조각을 말합니다. 쉽게 말해 return 뒤에 사용할 수 있는 코드. 이는 변수, 리터럴, 연산자의 조합 등이 될 수 있으며, 이들은 단일 값을 반환합니다. 예를 들어, 5 * 10, "Vue" + ".js"와 같은 것들은 모두 JavaScript 표현식입니다.

 

<!-- Mustache syntax 내부 -->
{{ number + 1 }}

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

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

<!-- Vue directive 속성 내부 -->
<div :id="`list-${id}`"></div>

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

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

 

---