[Vue.js] 템플릿 문법

cowmin·2025년 7월 3일

1. 보간법

{{ }} 를 사용하여 템플릿 내 텍스트 노드에 데이터를 삽입한다.
데이터가 변경되면 해당 요소의 내용이 자동으로 업데이트된다.

<script setup>
const message = '메시지입니다.'
</script>
<template>
  {{ message }}
</template>
<style></style>

2. 단방향 데이터 바인딩

단방향 데이터 바인딩이란? JS 변수의 값이 변경되면 화면도 자동으로 변경되는 것

2.1 v-text : 요소 안의 텍스트 내용을 바인딩

<script setup>
const message = '메시지입니다.'
</script>
<template>
  <p v-text="message"></p>
  <!-- 위 코드는 아래와 동일 -->
  <p>{{ message }}</p>
</template>
<style></style>

2.2 v-html : 요소 안에 HTML 태그를 직접 삽입

<script setup>
const rawHtml = '<span style="color: red;">경고 메시지</span>'
</script>
<template>
  <p v-html="rawHtml"></p>
</template>
<style></style>

2.3 v-bind: HTML 속성에 JavaScript 값을 바인딩

<script setup>
const imageUrl =
  'https://velog.velcdn.com/images/cowmin/profile/6dbde1ce-7f02-464b-8680-4aac6dd8286e/social_profile.png'
const altText = '샘플 이미지'
</script>
<template>
  <img v-bind:src="imageUrl" v-bind:alt="altText" />
</template>
<style></style>

3. 양방향 데이터 바인딩

양방향 데이터 바인딩이란? 화면에서 바꾼 값이 JS 데이터에도 반영되는 것

3.1 v-model: 양방향 데이터 바인딩 (form 요소에서 많이 사용)

<script setup>
import { ref } from 'vue'
const userInput = ref('') 
</script>
<template>
  <input v-model="userInput" placeholder="입력하세요" />
  <p>입력한 값: {{ userInput }}</p>
</template>
<style></style>

import { ref } from 'vue' : Vue가 값의 변화를 추적하기 위한 함수
const userInput = ref('') : 변수에 ref() 함수 적용
userInput.value='반가워' : 변수 값 변경

4. 조건 렌더링 디렉티브

조건에 따라 DOM 요소를 생성하거나 제거함

4.1 v-if / v-else-if / v-else

<script setup>
import { ref } from 'vue'
const status = ref('loading')
</script>
<template>
  <div v-if="status === 'success'">성공했습니다!</div>
  <div v-else-if="status === 'error'">에러가 발생했습니다!</div>
  <div v-else>로딩 중입니다...</div>
</template>
<style></style>

4.2 v-show

import { ref } from 'vue'
const isVisible = ref(true)
</script>
<template>
  <button @click="isVisible = !isVisible">Toggle</button>
  <p v-show="isVisible">이 문장은 보였다 안 보였다 합니다</p>
</template>
<style></style>

ref(true) : true 값을 Vue가 추적할 수 있게 감쌈
isVisible : 반응형 변수
@click : 이 버튼을 클릭했을 때 실행할 코드를 지정

5. 반복 렌더링 디렉티브

5.1 v-for

<script setup>
const fruits = ['사과', '바나나', '딸기']
</script>
<template>
  <ul>
    <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
  </ul>
</template>
<style></style>

v-for="fruit in fruits" : fruits 배열을 반복해서 fruit이라는 이름으로 하나씩 꺼냄
:key="fruit" : 각 항목에 고유한 key 값을 부여

6. 이벤트 핸들링

Vue에서 이벤트를 감지해서 실행할 동작을 지정할 때 사용하는 디렉티브

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>
<template>
  <button @click="increment">클릭!</button>
  <p>현재 카운트: {{ count }}</p>
</template>
<style></style>