레슨 1 / 9·15분

Vue 기본과 템플릿

Vue.js란?

Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 JavaScript 프레임워크입니다. "프로그레시브"란 필요한 만큼 점진적으로 도입할 수 있다는 의미입니다. 간단한 페이지에는 CDN으로 가볍게, 대규모 애플리케이션에는 빌드 도구와 함께 본격적으로 사용할 수 있습니다.

Vue 앱 생성하기

typescript

import { createApp, ref } from 'vue';

// Vue 앱 인스턴스 생성
const app = createApp({
  setup() {
    const message = ref('안녕하세요, Vue!');
    const count = ref(0);

    return { message, count };
  },
});

// #app 요소에 마운트
app.mount('#app');

템플릿 문법

Vue는 HTML 기반 템플릿 문법을 사용합니다. 이중 중괄호 {{ }}(Mustache 문법)로 데이터를 바인딩하고, 디렉티브(v- 접두사)로 DOM에 반응적 동작을 부여합니다.

html

<template>
  <div>
    <!-- 텍스트 보간 -->
    <h1>{{ message }}</h1>
    <p>카운트: {{ count }}</p>

    <!-- v-bind: 속성 바인딩 (축약 :) -->
    <img :src="imageUrl" :alt="imageDesc" />
    <a :href="linkUrl" :class="{ active: isActive }">링크</a>

    <!-- v-on: 이벤트 바인딩 (축약 @) -->
    <button @click="count++">+1</button>
    <button @click="handleReset">초기화</button>

    <!-- v-if: 조건부 렌더링 -->
    <p v-if="count > 10">10을 넘었습니다!</p>
    <p v-else-if="count > 5">5를 넘었습니다.</p>
    <p v-else>아직 5 이하입니다.</p>

    <!-- v-for: 리스트 렌더링 -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

•{{ }} - 텍스트 보간, JavaScript 표현식 사용 가능
•v-bind (:) - HTML 속성에 데이터 바인딩
•v-on (@) - DOM 이벤트 리스너 등록
•v-if / v-else-if / v-else - 조건부 렌더링
•v-for - 배열이나 객체를 순회하며 렌더링

💡

v-if는 조건이 거짓일 때 DOM에서 요소를 완전히 제거합니다. 자주 토글되는 요소에는 CSS의 display만 전환하는 v-show가 더 효율적입니다. v-for와 v-if를 같은 요소에 함께 쓰는 것은 피해야 합니다. 필요하다면