[Vue] [Vue3] 템플릿 문법

Vue는 HTML 기반 템플릿 문법을 사용합니다.

내부적으로 Vue는 템플릿을 고도의 최적화된 자바스크립트 코드로 컴파일 합니다.

<pre><code></code></pre>

텍스트 보간법

• 데이터 바인딩의 가장 기본적인 형태는 Mustache"(이중 중괄호) 문법
  

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

HTML 출력

• 이중 중괄호는 데이터를 일반 텍스트로 해석하기 떄문에,
  실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 합니다.

디렉티브

• Vue에서 제공하는 특수한 속성임을 나타내기 위해 접두사 -v를 사용
• 렌더링된 DOM에 특별한 반응적 동작을 적용

속성 바인딩

• 다음 예시에서 v-bind 디렉티브는 id 속성을 컴포넌트의 dynamicId 속성과 동기화된 상태로
  유지하도록 Vue에 지시 합니다.

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

• v-bind는 다음과 같이 단축 문법을 활용 합니다.

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

• boolean 속성은 엘리먼트에 표기했는지 여부로 참/거짓 값을 나타내는 속성입니다. 대표적인 예로 disbled가 있습니다.

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

• 여러속성을 동적으로 바인딩
• 여러 속성을 나타내는 자바르스크립트 객체가 있는 경우 다음과 같이
  v-bind 사용하여 바인딩 할 수 있습니다.

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}
 
<div v-bind="objectOfAttrs"></div>

JavaScript 표현식 사용

• Vue는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원합니다:
  

{{ number + 1 }}
 
{{ ok ? '예' : '아니오' }}
 
{{ message.split('').reverse().join('') }}
 
<div :id="`list-${id}`"></div>

• 하나의 표현식만 가능
  각 바인딩에는 하나의 단일 표현식만 포함될 수 있습니다.
  표현식은 값으로 평가할 수 있어야 하는 즉, return 뒤에 사용할 수 있는 코드여야 합니다. (다음과 같은 코드는 동작하지 않습니다.)

{{ var a = 1 }}
 
{{ if (ok) { return message } }}

• 함수 호출 가능

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

• 제한된 전역 접근
  제한된 전역 리스트에만 접근할 수 있습니다. Math 및 Date 등 일반적으로 사용되는 기본 제공 전역 객체를 표시

 

디렉티브

v- 접두사가 있는 특수한 속성

v-for, v-on, v-slot을 제외하고 디렉티브 속성 값은 단일 자바스크립트 표현식 이어야 합니다.

• 인자
  • 일부 디렉티브 뒤에 콜론으로 인자를 사용할 수 있습니다. 
  • 
    
    • 동적인 인자
      • 디렉티브 인자를 대괄호로 갑싸서 자바스크립트 표현식으로 사용할 수 도 있습니다. 
        • 동적인 인자 값 제약 조건
          • 동적인 인자는 null 또는 문자열로 평가 되어야 합니다. 값이 null일 경우, 바인딩을 명시적으로 제거 합니다.
        • 동적인 인자 문법 제약 조건
          • 동적인 인자 표현식에는 공백 및 따옴표와 같은 특정문자가 HTML 속성 이름 내에서 유효하지 않기 떄문에
            문법에 일부 제약 조건이 있습니다.
          • 
            
          • 브라우저가 속성 이름을 소문자로 강제 변환하므로 대문자로 키 이름을 지정하는 것도 피해야 합니다.
          • 
            
        • 수식어
          • 수식어는 점(.)으로 시작하는 특수한 접미사로, 디렉티브가 특별한 방식으로 바인딩되어야 함을 나타냅니다.
            예를 들어 .prevent라는 수식어는 트리거된 이벤트에서 event.prventDefault()를 호출하도록 지시 합니다.
     
   
• 빌트인 디렉티브
  • v-text
    • 엘리먼트의 텍스트 컨텐츠 업데이트
    •  
  • v-html
    • 엘리먼트의 innerHTML을 업데이트
    •  
  • v-show
    • 엘리먼트의 가시성 전환
  • v-if, v-else-if, v-else
    • 엘리먼트 또는 템플릿 일부를 조건부로 렌더링
  • v-for
    • 소스데이터 기반으로 엘리먼트 또는 템플릿 블록 여러 번 렌더링
  • v-on
    • 엘리먼트에 이벤트 리스너 연결
    • 수식어
      
      • .stop - event.stopPropagation() 호출.
      • .prevent - event.preventDefault() 호출.
      • .capture - 캡처 모드로 이벤트 등록.
      • .self - 이벤트가 이 엘리먼트에서 전달된 경우에만 트리거 됨.
      • .{keyAlias} - 이벤트가 특정 키에 대해서만 트리거 됨.
      • .once - 이벤트가 한 번만 트리거 됨(일회용처럼).
      • .left - 마우스 왼쪽 버튼으로만 이벤트가 트리거 됨.
      • .right - 마우스 오른쪽 버튼으로만 이벤트가 트리거 됨.
      • .middle - 마우스 중앙(힐 클릭) 버튼으로만 이벤트가 트리거 됨.
      • .passive - { passive: true } 옵션으로 DOM 이벤트를 등록
  • v-bind
    • 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩 합니다.
  • v-model
    • 사용자 입력을 받는 폼 엘리먼트 또는 컴포넌트에 양방향 바인딩을 만듭니다
  • v-slot
    • 이름이 있는 슬롯 또는 props를 받을 것으로 예상되는 슬롯을 나타냅니다.
  • v-pre
    • 이 엘리먼트와 모든 자식 엘리먼트의 컴파일을 생략
  • v-once
    • 엘리먼트와 컴포넌트를 한 번만 렌더링 하고, 향후 업데이트를 생략합니다.
  • v-cloak
    • 준비될 때까지 컴파일 되지 않은 템플릿을 숨기는 데 사용됩니다.

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

 

<a :href="url"> ... </a>