Vue Template Syntax

---

🧾 Vue Template Syntax란?

정의

Vue Template Syntax는 템플릿에서 데이터를 화면에 출력하고 속성에 연결하는 문법이다.

Vue에서는 템플릿 안에서 반응형 데이터를 간단하게 표현할 수 있다.

📝 Text Interpolation

• 이중 중괄호를 사용해 텍스트를 출력한다.
• 콧수염 문법이라고도 한다.
• 주로 문자열이나 계산 결과를 보여줄 때 사용한다.

<p></p>

<h1></h1>

✍️ HTML 출력

• ``는 텍스트로 출력한다.
• 실제 HTML로 렌더링하려면 v-html을 사용한다.

<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

🔗 속성 바인딩

Boolean 속성

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

Object Binding

const classObject = reactive({ active: true, "text-danger": false });

<div :class="classObject"></div>

const isActive = ref(true);
const error = ref(null);

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  "text-danger": error.value && error.value.type === "fatal",
}));

<div :class="classObject"></div>

Array Binding

const activeClass = ref("active");
const errorClass = ref("text-danger");

<div :class="[activeClass, errorClass]"></div>

🧠 JavaScript 표현식

• 템플릿 안에서는 JavaScript 표현식을 사용할 수 있다.
• 함수 호출, 삼항 연산자, 문자열 조합 등이 가능하다.
• 단, 하나의 표현식이어야 한다.

<div :id="`list-${id}`"></div>

⚠️ 주의점

• 템플릿 안에 너무 복잡한 로직을 넣지 않는다.
• v-html은 외부 입력을 그대로 넣지 않도록 주의한다.
• :class, :style는 객체나 배열로 유연하게 사용할 수 있다.

📌 정리

• Vue Template Syntax는 화면에 값을 출력하고 속성을 연결하는 문법이다.
• ``, :class, :id, v-html을 먼저 익히면 된다.
• Vue-Directive, Vue-Component, Vue-SFC와 함께 보면 이해가 쉽다.

---

연결문서

• Vue-Directive
• Vue-Component
• Vue-SFC
• Vuejs