1. 조건부 렌더링: v-if, v-else, v-else-if

• v-if="조건": 조건이 참일 때만 요소 렌더링
• v-else: v-if 또는 v-else-if 다음에 반드시 올 수 있으며, 조건이 거짓일 때 렌더링
• v-else-if: 중간 조건 처리, 반드시 v-if 바로 뒤에 와야 함

<div id="app">
  <div class="box" v-if="status === 'A'"></div>
  <div class="box2" v-else-if="status === 'B'"></div>
  <div class="box3" v-else></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    status: 'B'
  }
});
</script>

예: status가 'A'면 빨간 박스, 'B'면 노란 박스, 그 외엔 초록 박스 표시.

2. 요소 표시/숨김: v-show

• v-if: 조건에 따라 요소를 렌더링하거나 제거 (초기 렌더링 비용 감소)
• v-show: CSS display 속성 변경 (렌더링은 유지, 성능 최적화 용도)

<div id="app">
  <div v-show="isVisible">안녕하세요, Vue!</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});
</script>

3. 반복 렌더링: v-for

• v-for="item in list": 항목 값만 사용
• v-for="(item, index) in list": 값과 인덱스 사용
• v-for="(value, key, index) in obj": 객체의 키, 값, 인덱스 모두 접근 가능

<div id="app">
  <ul>
    <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
  </ul>
  <ol>
    <li v-for="(user, idx) in users" :key="idx">{{ user.name }}</li>
  </ol>
  <div v-for="(val, key, i) in info" :key="i">{{ key }}: {{ val }}</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    fruits: ['사과', '오렌지', '바나나'],
    users: [
      { name: 'Alice' },
      { name: 'Bob' },
      { name: 'Charlie' }
    ],
    info: {
      id: 1,
      name: '민수',
      age: 25,
      city: '서울'
    }
  }
});
</script>

4. 텍스트 및 HTML 삽입: v-text, v-html

• v-text: innerText와 동일, 안전한 텍스트 출력
• v-html: innerHTML와 동일, 태그 포함 렌더링 (보안 주의)

<div id="app">
  <p>{{ message }}</p>
  <p v-text="message"></p>
  <p v-html="htmlContent"></p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '반갑습니다!',
    htmlContent: '<strong>강조된 텍스트</strong>'
  }
});
</script>

5. 이벤트 처리: v-on (@)

• @click, @input, @keyup.enter 등 사용 가능
• 메서드는 methods 객체 내 정의

<div id="app">
  <button @click="increment">증가</button>
  <button @click="decrement">감소</button>
  <ul>
    <li v-for="n in numbers" :key="n">{{ n }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    numbers: [1, 2, 3]
  },
  methods: {
    increment() {
      this.numbers.unshift(this.numbers.length + 1);
    },
    decrement() {
      if (this.numbers.length > 0) {
        this.numbers.shift();
      }
    }
  }
});
</script>

이벤트 수정자

• .stop: 이벤트 전파 방지 (stopPropagation())
• .prevent: 기본 동작 차단 (preventDefault())
• .self: 직접 타겟 요소에서만 발생 시 실행

<div id="app">
  <div @click="handleParent">
    <button @click.stop.prevent="handleChild">클릭하기</button>
  </div>
</div>

6. 속성 바인딩: v-bind (:)

• :class, :style, :src, :href 등 사용 가능
• 객체 형태로 클래스 조건 제어

<div id="app">
  <div :class="activeClass">클래스 바인딩</div>
  <div :class="{ active: isActive }">조건부 클래스</div>
  <div :class="[classA, classB]">배열 클래스</div>
  <div :class="isActive ? 'active' : 'inactive'">삼항 연산자</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'highlight',
    isActive: true,
    classA: 'text-red',
    classB: 'font-bold'
  }
});
</script>

7. 양방향 바인딩: v-model

• 텍스트 입력, 체크박스, 라디오, 선택 상자 등에 적용 가능
• 체크박스 배열에 바인딩 시, 선택된 값들이 자동 수집

<div id="app">
  <input type="checkbox" value="빨강" v-model="colors"> 빨강
  <input type="checkbox" value="파랑" v-model="colors"> 파랑
  <input type="checkbox" value="노랑" v-model="colors"> 노랑
  <p>선택된 색상: {{ colors }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    colors: []
  }
});
</script>

선택된 도시: {{ selectedCity }}

8. 단일 렌더링: v-once

<span v-once>{{ message }}</span>
<div v-once>
  <h1>고정 제목</h1>
  <p>이 내용은 변경되지 않음.</p>
</div>

9. 컴파일 건너뛰기: v-pre

<div id="app">
  <span v-pre>{{ message }}</span>
  <span>{{ message }}</span>
</div>

10. 초기 로딩 보호: v-cloak

<div id="app" v-cloak>
  <div>{{ greeting }}</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    greeting: '안녕하세요!'
  }
});
</script>