🔍 디렉티브
📍 소개
HTML 요소에 추가적인 동작을 수행하도록 지시하는 Vue 템플릿의 특별한 속성
-v 접두사로 시작함
데이터 바인딩, 조건부 렌더링, 리스트 렌더링 등을 구현할 수 있음
사용자 정의 디렉티브를 만들어 기능을 확장할 수도 있음
📍 v-text
엘리먼트의 텍스트 컨텐츠를 업데이트함
엘리먼트 내부의 기존 컨텐츠를 덮어쓰며, 일부를 업데이트해야 하는 경우, 이중 중괄호 사용
<span v-text="msg"></span>
<!-- 아래와 같음 -->
<span>{{msg}}</span>📍 v-html
엘리먼트의 innerHTML를 업데이트함
v-html의 내용은 일반 HTML로 삽입됨 (Vue 템플릿 문법을 처리하지 않음)
임의의 HTML을 동적으로 렌더링하는 것은 XSS 공격으로 쉽게 이어질 수 있음 = 매우 위험함
=> 가급적 사용하지 말자
📍 v-show
true / false 값을 기반으로 엘리먼트가 보여지는 여부를 지정할 수 있음
style의 display 속성
📍 v-if, v-else, v-else-if
true / false 값을 기반으로 엘리먼트 또는 템플릿 일부를 조건부로 렌더링함
참고) 우선순위: v-if > v-for
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
A/B/C 가 아니야!
</div>📍 v-for
엘리먼트 또는 템플릿 블록을 여러 번 렌더링함
alias in expression (표현식 내 별칭)을 사용함
고유한 'key'속성을 설정하면, Vue가 효율적으로 리스트를 업데이트할 수 있음
<div v-for="item in items">
{{ item.text }}
</div>
<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>📍 v-on
엘리먼트에 이벤트 리스너를 연결함
단축 문법: @
수식어: .stop, .prevent, .capture ...
고유한 'key'속성을 설정하면, Vue가 효율적으로 리스트를 업데이트할 수 있음
<div v-for="item in items">
{{ item.text }}
</div>
<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>📍 v-bind
하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩
단축 문법: : or .(.prop 수식어 사용할 때)
수식어: .camel, .prop, .attr
<!-- 속성 바인딩 -->
<img v-bind:src="imageSrc" />
<!-- 동적인 속성명 -->
<button v-bind:[key]="value"></button>
<!-- 단축 문법 -->
<img :src="imageSrc" />
<!-- 단축 문법과 동적 속성명 -->
<button :[key]="value"></button>
<!-- 인라인으로 문자열 결합 -->
<img :src="'/path/to/images/' + fileName" />
<!-- class 바인딩 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 바인딩 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 속성을 객체로 바인딩 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- prop 바인딩. "prop"은 자식 컴포넌트에서 선언되어 있어야 함 -->
<MyComponent :prop="someThing" />
<!-- 자식 컴포넌트와 공유될 부모 props를 전달 -->
<MyComponent v-bind="$props" />
// .prop 수식어의 전용 단축 문법 '.'
<div :someProperty.prop="someObject"></div>
<!-- 위 코드는 아래와 같이 단축할 수 있음 -->
<div .someProperty="someObject"></div>📍 v-model
사용자 입력을 받는 form 엘리멘트 또는 컴포넌트에 양방향 바인딩을 만듦
다음으로 제한됨: <input>, <select>, <textarea>, 컴포넌트
수식어: .lazy, .number, .trim
📍 그 외
v-slot, v-pre, v-once, v-memo, v-cloak