[Vue] - Vue 디렉티브

1. Vue 디렉티브란?

Vue 디렉티브는 DOM 요소에 바인딩되어 특정 동작을 수행하는 특별한 속성입니다. Vue에서 제공하는 기본 디렉티브 외에도, 사용자는 자신만의 커스텀 디렉티브를 정의하여 더 복잡한 로직을 구현할 수 있습니다.

기본 디렉티브

Vue에서 자주 사용되는 기본 디렉티브들은 다음과 같습니다:

1. v-bind: HTML 속성에 데이터 바인딩
2. v-model: 양방향 데이터 바인딩
3. v-if: 조건부 렌더링
4. v-for: 리스트 렌더링
5. v-show: 조건부 요소 표시
6. v-on: 이벤트 바인딩

디렉티브	설명	사용 예시
v-bind	HTML 속성에 Vue 데이터나 계산된 값 등을 바인딩할 때 사용. :로 축약 가능.	vue<br><img v-bind:src="imageSrc" alt="이미지" /> <br><img :src="imageSrc" alt="이미지" />
v-model	양방향 데이터 바인딩을 통해 사용자 입력을 Vue 인스턴스 데이터와 자동으로 동기화.	vue<br><input v-model="message" placeholder="메시지를 입력하세요" /><br><p>{{ message }}</p>
v-if	조건에 따라 DOM 요소를 렌더링하거나 제거. 요소가 조건이 참일 때만 추가됨.	vue<br><p v-if="isLoggedIn">로그인되었습니다!</p><br><p v-else>로그인이 필요합니다.</p>
v-for	배열이나 객체의 아이템을 반복하여 렌더링. :key 속성을 사용하여 효율적인 렌더링.	vue<br><ul><li v-for="(item, index) in items" :key="index">{{ item }}</li></ul>
v-show	조건에 따라 요소를 보이거나 숨기지만, DOM에서 제거하지 않고 display 속성만 변경.	vue<br><p v-show="isVisible">이 문장은 보일까요?</p>
v-on	사용자 이벤트(클릭, 입력 등)를 감지하고 처리. @로 축약 가능.	vue<br><button v-on:click="handleClick">클릭하세요</button><br><button @click="handleClick">클릭하세요</button>

디렉티브 설명 요약:

1. v-bind: HTML 속성에 데이터 바인딩. :src와 같이 축약형으로도 사용 가능.
2. v-model: 양방향 데이터 바인딩으로 사용자 입력을 Vue 데이터와 동기화.
3. v-if: 조건부 렌더링. 조건이 참일 때만 DOM에 추가, 거짓일 때는 제거.
4. v-for: 리스트 렌더링. 배열이나 객체의 항목을 반복하여 렌더링.
5. v-show: 조건부 요소 표시. 조건에 따라 요소를 숨기거나 표시하지만, DOM에서 제거하지 않음.
6. v-on: 이벤트 바인딩. 사용자 상호작용을 감지하고 처리.