Contents

1. Template Syntax

Vue.js

Vue.js – The Progressive JavaScript Framework

가. Text Interpolation

<span> Message: {{msg}}</span>
Code language: HTML, XML (xml)

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

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

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

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

나. Raw HTML

<p>텍스트 보간법 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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

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

2) 동일 이름 축약

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

<!-- 이것도 작동합니다 -->
<div v-bind:id></div>
Code language: HTML, XML (xml)

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

3) Boolean Attributes

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

<!-- class에 포함하거나 안하거나 -->
<h1 :class="{'text-decorate' : isDecorate}" >Heading</h1> 
Code language: HTML, XML (xml)

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

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}
Code language: JavaScript (javascript)

여러 속성을 묶은 JavaScript 객체.

<div v-bind="objectOfAttrs"></div>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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

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

[Vue.js] Template Syntax