[가이드] 템플릿 문법 - 필수요소 | Vue

 

Vue.js는 HTML 기반 템플릿 구문을 사용하여 렌더링된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있습니다. 모든 Vue.js 템플릿은 규격을 준수하는 브라우저 및 HTML 파서(구문 분석기)로 구문 분석할 수 있는 유효한 HTML입니다.

 

내부적으로 Vue는 템플릿을 Virtual DOM 렌더링 함수로 컴파일합니다. Vue는 반응성 시스템과 결합하여 최소 개수의 구성요소를 지능적으로 파악하여 애플리케이션 상태가 변경될 때 최소한의 DOM 조작을 적용할 수 있습니다.

 

Virtual DOM 개념에 익숙하고 JavaScript의 원시 기능을 선호하는 경우 옵션인 JSX 지원을 사용하여 템플릿 대신 렌더링 함수를 직접 작성할 수도 있습니다 .

 

 

보간법(Interpolations)

본문

데이터 바인딩의 가장 기본적인 형식은 "Mustache"구문 (이중 중괄호)을 사용하는 텍스트 보간입니다.

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

Mustache 태그는 해당 데이터 개체의 msg 속성 값으로 대체됩니다 . 또한 데이터 개체의 msg 속성이 변경 될 때마다 업데이트 됩니다.

 

v-once 지시문을 사용하여 데이터 변경시 업데이트되지 않는 일회성 보간을 수행 할 수도 있지만 이는 동일한 노드의 다른 바인딩에도 영향을 미친다는 점에 유의하십시오.

<span v-once>This will never change: {{ msg }}</span>

 

원시 HTML

Mustache은 데이터를 HTML이 아닌 일반 텍스트로 해석합니다. 실제 HTML을 출력하려면 다음 v-html 지시문을 사용해야합니다.

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

span의 내용은 일반 HTML로 해석되는 rawHtml 속성의 값으로 대체됩니다. - 데이터 바인딩은 무시됩니다. Vue는 문자열 기반 템플릿 엔진이 아니기 때문에 v-html을 사용하여 템플릿 부분을 구성할 수 없습니다. 대신 UI 재사용 및 구성의 기본 단위로 컴포넌트를 선호합니다.

 

웹 사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 XSS 취약성으로 쉽게 이어질 수 있기 때문에 매우 위험 할 수 있습니다 . 신뢰할 수있는 콘텐츠에만 HTML 보간을 사용하고 사용자가 제공한 콘텐츠에는 절대 사용하지 마십시오.

 

속성

Mustache은 HTML 속성 내에서 사용할 수 없습니다. 대신 v-bind 지시문을 사용하십시오 .

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

부울 속성의 경우, 부울 속성의 존재 자체가 true을 암시하는 경우, v-bind는 약간 다르게 작동합니다. 다음 예를 보면,

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

isButtonDisabled의 값이 null, undefined 또는 false인 경우 disabled 속성은 렌더링된 <button> 요소에 포함되지도 않습니다.

 

JavaScript 표현식 사용

지금까지 템플릿의 간단한 속성 키에만 바인딩했습니다. 그러나 Vue.js는 실제로 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원합니다.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

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

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

이러한 표현식은 소유자 Vue 인스턴스의 데이터 범위에서 JavaScript로 평가됩니다. 한 가지 제한은 각 바인딩이 하나의 표현식 만 포함 할 수 있으므로 다음은 작동 하지 않는다는 것입니다.

<!-- 이것은 expression 이 아니라 statement 이다 -->
{{ var a = 1 }}

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

 

 - expression : 하나 이상의 값으로 표현(reduce)될 수 있는 코드  *ex) 5+5

 - statement :  프로그래밍에서는 실행가능한(executable) 최소의 독립적인 코드 조각  *ex) a=3

 

템플릿 식은 샌드박스로 작성되며 Math 및 Date와 같은 전역의 whitelist에만 액세스할 수 있습니다. 템플릿 식에서 사용자 정의 글로벌에 액세스하려고 하면 안 됩니다.

 

지시어

지시문은 v- 접두사의 특수 속성입니다. 지시어 속성 값은 단일 JavaScript 식이어야 합니다(나중에 설명될 v-for 제외). 지시어의 작업은 표현식 값이 변경될 때 DOM에 부작용을 반응적으로 적용하는 것입니다. introduce에서 본 예를 살펴보겠습니다.

<p v-if="seen">Now you see me</p>

여기서 v-if 지시문은 표시된 seen 값의 true을 기준으로 <p> 요소를 제거/삽입합니다.

 

인수

일부 지시문은 지시문 이름 뒤에 콜론으로 표시되는 "인수"를 사용할 수 있습니다. 예를 들어, v-bind 지시문은 HTML 속성을 반응적으로 업데이트하는 데 사용됩니다.

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

여기서 href는 인수로, 요소의 href 속성을 표현식 url 값에 바인딩하도록 v-bind 지시문을 나타냅니다.

 

또 다른 예로는 DOM 이벤트를 수신하는 v-on 지시문이 있습니다.

<a v-on:click="doSomething"> ... </a>

여기서 인수는 수신할 이벤트 이름입니다. 이벤트 핸들링에 대해서도 더 자세히 이야기하겠습니다.

 

동적 인수

2.6.0+의 새로운 기능

 

버전 2.6.0부터는 대괄호로 묶어 지시문 인수에서 JavaScript 표현식을 사용할 수도 있습니다.

<!-- 
인수 표현식에는 몇 가지 제약이 있습니다. 
아래의 "동적 인수 표현식 제약 조건" 섹션에서 확인할 수 있습니다. 
-->
<a v-bind:[attributeName]="url"> ... </a>

여기서 attributeName은(는) JavaScript 표현식으로 동적으로 평가되며, 평가된 값은 인수의 최종 값으로 사용됩니다. 예를 들어 Vue 인스턴스에 데이터 속성인 attributeName이(가) 있고 값이 "href"인 경우 이 바인딩은 v-bind:href와 동일합니다.

 

마찬가지로 동적 인수를 사용하여 처리기를 동적 이벤트 이름에 바인딩할 수 있습니다.

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

이 예제에서 eventName의 값이 "focus"인 경우 v-on:[eventName]은(는) v-on:focus와 동일합니다.

 

동적 인수 값 제약 조건

동적 인수는 null을 제외하고 문자열로 평가되어야합니다 특수 값 null을 사용하여 바인딩을 명시적으로 제거 할 수 있습니다. 문자열이 아닌 다른 값은 경고를 트리거합니다.

 

동적 인수 표현식 제약 조건

동적 인수 표현식에는 공백 및 따옴표와 같은 특정 문자가 HTML 속성 이름 내에서 유효하지 않기 때문에 구문 제약이 있습니다. 예를 들어 다음은 유효하지 않습니다.

<!-- 이렇게 하면 컴파일러 경고가 발동됩니다. -->
<a v-bind:['foo' + bar]="value"> ... </a>

해결 방법은 공백이나 따옴표가 없는 식을 사용하거나 복잡한 식을 계산된 속성으로 바꾸는 것입니다.

또한 DOM 템플리트 내(HTML 파일에 직접 작성된 템플리트)를 사용할 경우 브라우저에서 특성 이름을 소문자로 강제 지정하므로 대문자로 키 이름을 지정하지 않아야 합니다.

<!--
이것은 DOM 내 템플릿에서 v-bind:[someattr]로 변환됩니다.
해당 인스턴스에 "someattr" 속성이 없으면 코드는 작동하지 않습니다.
-->
<a v-bind:[someAttr]="value"> ... </a>

 

수식어(Modifiers)

수식어는 점으로 표시된 특수 접미사로, 지시문이 특별한 방식으로 바인딩되어야 함을 나타냅니다. 예를 들어 .prevent 한정자는 v-on 지시문에 트리거된 이벤트에 대해 event.preventDefault()를 호출하도록 지시합니다.

<form v-on:submit.prevent="onSubmit"> ... </form>

나중에 v-on 및 v-model에 대한 다른 수식어 예제를 볼 수 있습니다. 이러한 기능을 살펴보십시오.

 

 

약칭(Shorthands)

v- 접두사는 템플릿에서 Vue 관련 특성을 식별하는 시각적 신호 역할을 합니다. 이 기능은 Vue.js를 사용하여 일부 기존 마크업에 동적 동작을 적용할 때 유용하지만 자주 사용되는 일부 지시사항에 대해 상세함을 느낄 수 있습니다. 동시에 Vue가 모든 템플릿을 관리하는 SPA를 구축할 때는 v- 접두사의 필요성이 줄어듭니다. 따라서 Vue는 가장 자주 사용되는 두 가지 지침(v-bind 및 v-on)에 대해 특별한 속기를 제공합니다.

 

v-bind 약칭

<!-- 전체 구문 -->
<a v-bind:href="url"> ... </a>

<!-- 약칭 -->
<a :href="url"> ... </a>

<!-- 동적 인수와 약칭 (2.6.0+) -->
<a :[key]="url"> ... </a>

 

v-on 약칭

<!-- 전체 구문 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약칭 -->
<a @click="doSomething"> ... </a>

<!-- 동적 인수와 약칭 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

일반 HTML과 약간 다르게 보일 수 있지만 : 및 @는 속성 이름에 유효한 문자이며 모든 Vue 지원 브라우저에서 올바르게 구문 분석할 수 있습니다. 또한 최종 렌더링된 마크업에는 나타나지 않습니다. 약칭 구문은 전적으로 선택 사항이지만, 나중에 사용법에 대해 더 자세히 알게 되면 감사하게 될 것입니다.