Vue 디렉티브 기본 요소

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Vue.js 초보 개발자 및 중급 개발자

난이도: 기초~중급 (HTML/CSS/JavaScript 기초 지식 필요)

핵심 요약

• v-bind (:) : HTML 속성에 데이터 바인딩, 예시:
• v-model : 폼 요소와 데이터의 양방향 바인딩 (예: )
• v-for : 반복 구조 생성 시 필수 :key 속성 사용 (예:
)
• v-if vs v-show : v-if는 DOM 제거 vs v-show는 CSS display: none 적용

섹션별 세부 요약

1. `v-bind` (속성 바인딩)

• HTML 속성에 반응형 데이터를 연결
• 예: :src, :class 등 다양한 속성에 적용 가능
• 코드 예시: const imageUrl = 'https://example.com/image.jpg'

2. `v-model` (양방향 데이터 바인딩)

• , , 등 폼 요소와 데이터 동기화
• 입력값 변경 시 데이터 자동 업데이트 및 반대로 데이터 변경 시 입력값 반영
• 코드 예시: const userName = ref('')

3. `v-on` (이벤트 처리)

• DOM 이벤트(클릭, 입력 등) 감지 후 JavaScript 메서드 실행
• 쉬러기: @click
• 코드 예시: const handleClick = () => { alert('버튼 클릭!') }

4. `v-if` (조건부 렌더링)

• true 시 DOM에 포함, false 시 완전히 제거
• showMessage 상태에 따라 요소 표시/비활성화
• 코드 예시: const showMessage = ref(true)

5. `v-show` (CSS 기반 조건부 표시)

• true 시 display: block, false 시 display: none 적용
• v-if보다 빈번한 토글 시 성능 향상
• v-if보다 사용 빈도가 낮음

6. `v-for` (리스트 반복)

• 배열 데이터 기반으로 요소 반복 생성
• 반드시 :key 속성 사용 (데이터 ID 등 고유 값)
• 코드 예시: const items = ref(['사과', '바나나', '귤'])

결론

• Vue 디렉티브는 데이터와 UI 동기화의 핵심 도구임
• v-for 사용 시 :key 속성 필수 (리스트 동기화 효율성 향상)
• v-if와 v-show의 차이를 이해하여 성능 최적화 적용해야 함