Vue 템플릿 문법

Template 문법

• Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용
• 내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일 함
• 반응형 시스템과 결합된 Vue는 앱 상태가 변경 될 때 최소한으로 DOM을 조작하고 다시 적용할 수 있는 최소한의 컴포넌트를 지능적으로 파악할 수 있음
• 가상 DOM 개념에 익숙하고 javascript의 기본 기능을 선호하는 경우 템플릿 대신 렌더링 함수를 직접 작성할 수 있으며 선택사항으로 JSX를 지원
  
  

Interpolations (보간법) - 값 대입

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

   • Mustache 태그는 해당 데이터 객체의 msg 속성 값으로 대체된다.
     또한 데이터 객체의 msg속성이 변경될 때마다 갱신된다.

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

   • v-once 디렉티브를 사용하여 데이터 변경 시,
     업데이트 되지 않는 일회성 보간을 수행할 수 있지만,
     같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 한다.

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

2. 원시 HTML(Raw HTML)
   Mustache 태그는 HTML이 아닌 일반 텍스트로 데이터를 해석한다.
   실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다.

   var rawHtml = <span>This should be red.</span>

   <p>{{ rawHtml }}</p>
   <!-- output : <span>This should be red.</span> -->
   
   <p><span v-html="rawHtml"></span></p>
   <!-- output : This should be red. -->

   웹사이트에서 임의의 HTML을 동적으로 렌더링하려면 XSS 취약점으로 쉽게 이어질 가능 성이 있기 때문에 사용을 지양해야 한다.

3. 속성(Attributes)
   Mustache는 HTML 속성에서 사용할 수 없다.
   대신 v-bind 디렉티브를 사용한다.

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

   • boolean 속성을 사용할 때 단순히 true인 경우,
     v-bind는 조금 한다.

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

     isButtonDisabled가 null, undefined, false 값을 가지면 disaled 되었기 때문에 랜더링 된 <button> 엘리먼트에 속성이 포함되지 않는다.

4. JavaScript 표현식 사용(Using JavaScript Expressions)
   Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원한다.
   (Vue에서 사용 가능한 JavaScript 표현식)

   {{ number + 1 }}
   {{ ok ? 'YES' : 'NO' }}
   {{ message.split('').reverse().join('') }}
   <div v-bind:id="'list-' + id"></div>

   • 아래는 구문이며, 표현식이 아니다.

     {{ var a = 1 }}

   • 조건문은 작동하지 않으며, 삼항 연산자를 사용해야 한다.

     {{ if (ok) { return message } }}

5. 디렉티브 (Directives)
   v- 접두사가 있는 특수 속성이다.
   디렉티브 속성 값은 단일 JavaScript 표현식이 된다. (v-for 제외)
   표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용하는 역할을 한다.

   • v-if 디렉티브는 seen 변수의 boolean 값에 기반하여 <p> 엘리먼트를 제거 또는 삽입

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

   • 전달인자
     일부 디렉티브는 콜론(:)으로 표시되는 전달인자를 사용할 수 있다.
     예를 들어, v-bind 디렉티브는 반응적으로 HTML 속성 갱신에 사용된다.

     <a v-bind:href="url"> ... </a>
     <!-- 전달인자 : href -->
     <a v-on:click="doSomething"> ... </a>
     <!-- 전달인자 : click -->

   • 동적인자
     2.6.0버전부터 JavaScript 표현식을 대괄호로 묶어 디렉티브의 argument로 사용하는 것도 가능해졌다.
     동적 전달인자는 동적 전달인자의 형식 제약에도 나와있듯 조금의 제약이 있다.

     <a v-bind:[attributeName]="url"> ... </a>
     <!-- attributeName이 "href"라고 한다면 v-bind:href 와 동등하다. -->
     <a v-on:[eventName]="doSomething"> ... </a>
     <!-- eventName이 "focus"라고 한다면 v-on:focus 와 동등하다. -->

     - 동적인자 값의 제약
     특수 값인 null은 명시적으로 바인딩을 제거하는데 사용된다.
     null을 제외한 string은 변환될 것을 예상하기 때문에 string이 아닌 값은 경고를 출력한다.
     
     - 동적인자 형식의 제약
     HTML의 속성명으로써 적합하지 않은 스페이스와 따옴표는 사용하지 않거나, 복잡한 표현식을 계산된 속성(Computed)으로 대체해야 한다.

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

     in-DOM 템플릿을 사용할 때에는, 브라우저가 모든 속성명을 소문자로 만드는 관계로 대문자 사용을 피하는 것이 좋다.

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

   • 수식어
     수식어는 점으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타낸다
     .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on 디렉티브에게 알려준다.

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