[Vue.js] 02. 템플릿 문법

참조) 템플릿 문법 | Vue.js (vuejs.org)

템플릿 문법 | Vue.js

Vue.js는 컴포넌트 인스턴스의 데이터를 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용한다.

.vue 파일들은 크게 Template, script, style 태그를 통해 세가지로 구분되는데,

<Template> 태그 내부에 HTML문법을 사용하여 script 태그에 작성한 데이터들을 바인딩 할 수 있다는 것.

 

보간법(Interpolation)

문자열

데이터 바인딩의 가장 기본 형태는 Mustache(이중 중괄호 구문)을 사용한 문자열 보간법이다.

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

이렇게 작성하게 되면 span태그는 msg의 내용이 들어가게 되며, msg의 내용이 변경되면 갱신된다.

 

원시 HTML (v-html 디렉티브)

이중 중괄호(Musctache)는 데이터를 HTML이 아닌, 일반 텍스트로 해석하게 된다.

따라서 데이터 바인딩을 하면 전체 문자열을 그대로 출력하게 된다.

HTML문법을 적용하여 출력하기 위해서는 v-html 디렉티브를 사용하여 직접 태그에 html로 바인딩을 해야한다.

 

다만 여기서의 문제는 XSS(Cross Site Scripting)의 취약점으로 활용될 수 있으므로 반드시 신뢰할 수 있는 콘텐츠에서만 사용해야하며 사용자가 제공한 컨텐츠에는 절대 사용하면 안된다.

 

따라서 v-html 디렉티브 대신 컴포넌트를 사용하는 것이 권장된다.

 

속성

Mustaches(이중 중괄호 구문)는 HTML 속성으로 사용이 불가능하다.

속성에 동적 바인딩을 원한다면 v-bind 디렉티브를 이용해야 한다.

콜론 기호(:) 다음에는 '전달인자'를 적어 바인딩 된 데이터를 어디에 연결할 것인지를 명시해준다.

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

v-bind 디렉티브의 약어는 : (콜론) 기호이다.

  <div :id="dynamicId"> ID HERE </div>

boolean 데이터는 v-bind에서 조금 다르게 동작한다.

<button v-bind:disabled="isButtonDisabled">Button</button>

만약 isButtonDisabled라는 속성이 null 또는 undefined라면 disabled 속성은 렌더링되지 않는다.

(버튼 엘리먼트만 렌더링 됨)

버튼을 누르게 되면 버튼에 disabled 옵션이 추가되면서 비활성화 된다.

JavaScript 표현식 사용

Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식 기능을 제공한다.

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

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

위 표현식들은 활성 Vue 인스턴스 데이터 범위 내에서 JavaScript로 계산된다.

그러나 각 바인딩은 하나의 단일 표현식만을 포함해야 하는 제약이 있다.

다음은 작성하면 안되는 예제들이다.

<!-- 아래는 문장입니다. 표현식이 아닙니다. -->
{{ var a = 1 }}

<!-- 조건문은 작동하지 않습니다. 삼항 연산자를 사용해야 합니다. -->
{{ if (ok) { return message } }}

 

동적 전달인자

JavaScript 표현식을 대괄호로 묶어 디렉티브 전달인자로 사용할 수도 있다.

<a v-bind:[attributeName]="url"> ... </a>

여기서 attributeName은 JavaScript 표현식으로 동적 변환되며, 변환된 결과는 전달인자의 최종값으로 사용된다.

이처럼 attr값을 미리 지정한 후 전달인자에 대괄호를 이용하면 동적으로 전달인자를 구성할 수 있다.

 

V-On

해당 인스턴스에 일어나는 일을 감지하는 디렉티브.

<a v-on:[eventName]="doSomething"> ... </a>

만약 eventName이 click이라면 a 태그 인스턴스에 클릭을 하는 행위를 감지하여 doSomething 메소드를 실행시킨다.

 

v-on의 약어는 @ 이다.

 

주의사항

동적 전달인자 값의 제약

동적 전달인자는 null을 제외하고 string으로 변환되어야 한다.

특수값 null을 사용하면 명시적으로 바인딩을 제거할 수 있다.

그 외의 값은 경고를 출력한다.

동적 전달인자 형식의 제약

동적 전달인자 형식에는 일부 문자상의 제약이 있다.

HTML 속성명에 공백이나 따옴표와 같은 특정 문자는 유효하지 않다.

<!-- 컴파일러 경고가 발생합니다. -->
<a v-bind:['foo' + bar]="value"> ... </a>

복잡한 표현식을 넣어야 한다면 computed 속성으로 대체하는 것이 좋다.

 

in-DOM 템플릿(HTML 파일 내에 템플릿을 직접 작성한 경우)을 쓰면 브라우저가 강제로 속성명을 소문자로 만드므로

속성명에 대문자를 넣지 않도록 주의한다.

<!--
in-DOM 템플릿에서는 이 부분이 v-bind:[someattr]로 변환됩니다.
인스턴스에 "someattr" 속성이 없는 경우, 이 코드는 동작하지 않습니다.
-->
<a v-bind:[someAttr]="value"> ... </a>