Vue.js 기반 데이터 바인딩과 디렉티브 활용

Vue.js 시작하기: 기본 설정과 데이터 렌더링

Vue를 사용하기 위해선 먼저 DOM 컨테이너를 준비하고, Vue 라이브러리를 로드한 후 인스턴스를 생성해야 합니다. 아래는 Vue 2 기준의 간단한 예제입니다.

<div id="app">
  <p>이름: {{username}}</p>
  <p>친구: {{friend.gender}}, {{friend.name}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      username: '지훈',
      friend: {
        gender: '남성',
        name: '철수'
      }
    }
  });
</script>

여기서 {{ }}는 보간 표현식(interpolation)이라 하며, 데이터 속성을 실시간으로 텍스트로 삽입할 수 있습니다.

v-html 디렉티브: HTML 내용 동적 삽입

v-html은 문자열 내의 HTML 태그를 해석하여 요소에 렌더링합니다. 일반 텍스트가 아닌 마크업을 출력할 때 유용합니다.

<div id="app">
  <p>{{rawText}}</p>
  <p v-html="rawText">대체됨</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      rawText: '이것은 <strong>중요한</strong> 메시지입니다.'
    }
  });
</script>

첫 번째 <p>는 순수 텍스트로 출력되지만, 두 번째는 태그가 해석되어 굵은 글씨로 표시됩니다.

v-if와 v-show: 조건부 렌더링

Vue는 조건에 따라 요소를 표시하거나 숨기는 두 가지 방식을 제공합니다.

v-if: 조건이 참일 때만 요소를 생성하고 DOM에 삽입합니다. 조건이 자주 변경되지 않을 때 적합합니다.
v-show: 항상 요소를 생성하지만 CSS display 속성을 이용해 보이거나 숨깁니다. 빈번한 전환이 필요할 때 더 효율적입니다.

<div id="app">
  <p v-if="gender === 'M'">성별: 남자</p>
  <p v-else>성별: 여자</p>

  <p v-show="score >= 80">등급: A 또는 B</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      gender: 'M',
      score: 85
    }
  });
</script>

v-on: 이벤트 리스너 등록

v-on:이벤트 또는 약식 @이벤트를 사용해 요소에 이벤트 핸들러를 연결할 수 있습니다. 모든 메서드 내에서 this는 Vue 인스턴스를 가리킵니다.

<div id="app">
  <button @click="increment">+1</button>
  <span>{{count}}</span>
  <button @click="add(5)">+5 추가</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: { count: 0 },
    methods: {
      increment() {
        this.count++;
      },
      add(num) {
        this.count += num;
      }
    }
  });
</script>

이벤트 객체 전달

이벤트 핸들러에서 네이티브 이벤트 객체를 사용해야 할 경우, $event 키워드를 통해 전달할 수 있습니다.

<input type="text" @input="updateValue($event)" />
<p>입력값: {{inputText}}</p>

<script>
  new Vue({
    data: { inputText: '' },
    methods: {
      updateValue(e) {
        this.inputText = e.target.value;
      }
    }
  });
</script>

v-bind: 속성 동적 바인딩

v-bind: 또는 줄여서 :를 사용하면 HTML 속성에 데이터를 바인딩할 수 있습니다. 예: src, href, title.

<img :src="imageUrl" :alt="description" />
<a :href="link" :title="tooltip">링크</a>

클래스와 스타일 바인딩 강화

Vue는 :class와 :style을 통해 조건부 스타일링을 쉽게 처리할 수 있도록 지원합니다.

<!-- 객체 문법 -->
<p :class="{ active: isActive, 'text-bold': isBold }">동적 클래스</p>

<!-- 배열 문법 -->
<p :class="[baseClass, isHighlighted ? 'highlight' : '']">스타일 적용</p>

<!-- 인라인 스타일 -->
<div :style="{ color: textColor, fontSize: size + 'px' }">스타일 테스트</div>

v-for: 리스트 렌더링

배열이나 객체의 데이터를 기반으로 반복적인 요소를 생성할 때 사용합니다. 각 항목에는 고유한 key 속성을 부여하는 것이 중요합니다.

<ul>
  <li v-for="user in users" :key="user.id">
    {{ user.name }} - {{ user.age }}
  </li>
</ul>

<script>
  new Vue({
    data: {
      users: [
        { id: 1, name: '김모씨', age: 25 },
        { id: 2, name: '이모씨', age: 30 }
      ]
    }
  });
</script>

key는 Vue의 가상 DOM 비교 알고리즘에서 정확한 재사용과 정렬을 보장합니다. 가능하면 인덱스 대신 고유 ID를 사용하세요.

v-model: 양방향 데이터 바인딩

폼 요소(input, select, textarea)와 데이터를 실시간으로 동기화합니다.

<input v-model="message" placeholder="입력하세요" />
<p>현재 값: {{message}}</p>

수정자(Modifiers)

v-model은 다음과 같은 수정자를 통해 동작을 제어할 수 있습니다.

.number: 입력 값을 숫자로 자동 변환합니다.
.lazy: 입력 중에는 업데이트하지 않고, 포커스 아웃 시에만 데이터를 반영합니다.
.trim: 입력 앞뒤 공백을 자동 제거합니다.

<input v-model.number="age" />
<input v-model.lazy="searchQuery" />

이벤트 수정자

이벤트 버블링이나 기본 동작을 제어할 수 있습니다.

.stop: 이벤트 버블링 중단
.prevent: 기본 동작 차단 (예: 폼 제출 방지)
.once: 한 번만 실행

<form @submit.prevent="handleSubmit">
  <button @click.stop="handleClick">버튼</button>
</form>

태그: Vue.js 데이터바인딩 디렉티브 v-model v-for

7월 22일 02:10에 게시됨

괴물 클럽