[Vue.js] Vue 템플릿 문법 (Template Syntax)

템플릿 문법 (Template Syntax)

Vue.js의 템플릿 문법은 HTML과 JavaScript를 결합한 형태로, 

Vue 컴포넌트 인스턴스의 데이터를 렌더링된 DOM에 선언적으로 바인딩할 수 있습니다. 

(JSX 문법 지원)

 

<template>
  <div>
    <h1>{{ msg }}</h1>
    <p>{{ desc }}</p>
  </div>
</template>

 

# 텍스트 보간법 (Text Interpolation)

1. 문자열 

데이터 바인딩의 가장 기본 형태는 '이중 중괄호(mustaches)'를 사용한 텍스트 보간.

(보간은 중간에 무언가 끼워넣는다는 의미가 있습니다.)

<span>메시지: {{ msg }}</span>
<!--데이터 객체의 msg 속성이 변경될 때 마다 갱신.-->

 

 

2. 원시 HTML (Raw HTML)

이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 해석하여, 실제 HTML을 출력 시, v-html 디렉티브를 사용해야 함.

<script>
	const rawHtml = 'Hello Vue.js';
</script>

<template>
    <p>이중 괄호: {{ rawHtml }}</p>
    <p>v-html 디렉티브: <span v-html="rawHtml"></span></p>
    <!-- 둘다 동일하게 Hello Vue.js 출력되지만 이중괄호는 일반 텍스트로 출력 
    	 v-html는 HTML 로 출력-->
</template>

<script setup>
    const rawHTML = '<a href="">Link</a>';
</script>

<template>
    <p>{{ rawHTML }}</p> <!-- 텍스트 출력-->
    <p><span  v-html="rawHTML"></span></p>  <!-- html 출력 -->
</template>

 

3. 속성 (Attribute Bindings)

이중 중괄호는 HTML이 아닌, v-bind 디렉티브를 사용하여 속성 사용.

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

 v-bind:속성 → :속성 으로 축약 가능 

<script setup>
    const pid = 10;
</script>

<template>
    <h2>속성 바인딩</h2>
    <div v-bind:id ="pid"></div> <!-- id=10 -->
    <div :id ="pid"></div> <!-- id=10 -->
    <div id ="pid"></div>  <!-- id = pid (텍스트로 출력) -->
    <div id ="{{pid}}"></div> <!-- {{pid}}-->
</template>

 

 

4. 불리언 속성 (Boolean Attributes)

boolean 속성을 사용할 때 단순히 true인 경우 v-bind는 조금 다르게 작동.

바인딩된 값이 `null` 또는 `undefined`이면 엘리먼트의 속성이 제거된 상태로 렌더링.

<script setup>
    const isButtonDisabled = true;
</script>

<template>
    <h2>불리언 바인딩</h2>
    <button disabled="true">버튼</button> <!--변경 불가-->

    <button :disabled="isButtonDisabled">버튼</button> <!--비활성-->
    <button :disabled="!isButtonDisabled">버튼</button> <!--활성-->
</template>

 

 

5. 여러 속성 동적으로 바인딩 (Dynamically Binding Multiple Attributes)

아래와 같이 여러 속성을 보유한 객체가 있는 경우,

인자 없이 `v-bind`를 사용하여 단일 엘리먼트에에 바인딩 가능.

<script setup>
  const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}
</script>

<template>
    <h2>여러 속성 바인딩</h2>
    <div v-bind="objectOfAttrs"></div>
</template>

 

 

6. JavaScript 표현식 사용 (JavaScript Expressions)

Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식을 지원.

(각 바인딩에는 하나의 표현식만 가능 → 리액트의 JSX 문법과 동일 (삼항연산자))

<script setup>
    const number = 20;
    const ok = false;
    const message = '안녕하세요';
    const id = 30;
</script>

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

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

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

 

 

# 디렉티브 (Directives)

디렉티브는 v- 접두사가 있는 특수 속성으로, 디렉티브 속성 값은 단일 JavaScript 표현식. 

디렉티브의 역할은 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용하는 것.

https://v3-docs.vuejs-korea.org/api/built-in-directives.html#v-html

빌트인 디렉티브 | Vue.js

디렉티브 문법 시각화 이미지

 

1. 인자 (Arguments)

일부 디렉티브는 콜론으로 표시되는 “전달인자”를 사용할 수 있음.

(인자 앞의 v-bind:는 :로 줄여 쓰기 가능)

<script setup>
    const url = "http://google.com";
</script>

<template>
    <h2>디렉티브 - 인자</h2>
    <a v-bind:href="url"> Link </a>
    <!-- 단축 문법 -->
    <a :href="url"> Link </a>
</template>

 

 

2. 동적인 인자 (Dynamic Arguments)

디렉티브의 인자를 대괄호로 감싸서 JavaScript 표현식으로 사용할 수도 있음.

<script setup>
    const attributeName = 'href';
</script>

<template>
    <h2>디렉티브 - 동적인 인자</h2>
    <a v-bind:[attributeName]="url"> Link </a>
    <!--  컴포넌트 인스턴스 attributeName 속성값이 "href"인 경우, 
          이 바인딩은 v-bind:href와 같음. -->
</template>

동적 이벤트 핸들러를 바인딩 할 떼, 동적 전달인자를 활용 가능

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

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

<!-- 단축 문법 -->
<a @[eventName]="doSomething">

<script setup>
    const sayHello = (msg)=>{
      alert(msg);
    }
</script>

<template>
    <h2>v-on 동적인 인자</h2>
    <button type="button" v-on:click="sayHello('클릭이벤트')">click</button>
    <button type="button" @click="sayHello('클릭이벤트')">click</button>
</template>

 

 

3. 수식어 (Modifiers)

수식어는 점으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냄.

예를 들어 .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on 디렉티브에 지시.

<script setup>
    const onSubmit = ()=>{
      alert('제출완료');
    }
</script>

<template>
    <h2>수식어</h2>
    <form action="" @submit.prevent="onSubmit">
 	   <button>제출</button>
    </form>
</template>