디렉티브(directive)에 대해서 알아봅시다.
디렉티브란?
HTML 태그 안에 들어가는 하나의 속성으로 엘리먼트에게 동작을 지시하는 지시문이다.
v-로 시작한다.
1. v-text
innerText와 동일한 기능을 수행하며 태그 내부의 값이 Vue 엘리먼트의 변수로 설정되게 함
<span v-text="msg"></span>
<!-- 위와 같은 방법 -->
<!-- 문자열의 일부를 변경하려면 보간법을 이용함 -->
<span>{{msg}}</span>2. v-html
innerHTML과 동일한 기능을 수행하며 태그 내부에 html을 렌더링하여 화면에 구현함
XSS 공격이나 불필요한 악성 태그가 렌더링 될 수도 있으므로 가급적 사용하지 않는 것이 좋음
<span v-html="name"></span>3. v-show
해당 엘리먼트가 보여지는 여부를 true / false 값으로 지정할 수 있음
<span v-show="visible" v-html="name"></span>4. v-if, v-else, v-else-if
if 조건문을 사용
<span v-if="value > 5">value가 5보다 크군요</span>
<span v-else-if="value === 5">값이 5네요</span>
<span v-else>value가 5보다 작아요</span>5. v-pre
특정 엘리먼트를 무시하는 데 사용. Vue는 해달 엘리먼트 내부의 자식 엘리먼트를 신경쓰지 않고 건너뜀. 태그 같은 것을 그대로 표시할 수 있음.
<span v-pre>{{ 머스태쉬가 보일 것이다. }}</span>6. v-cloak
Vue.js가 복잡할 경우 컴파일되지 않은 값이 순간적으로 나오는 경우가 있는데, Vue 인스턴스가 제대로 준비되기 전까지 템플릿을 위한 HTML 코드를 숨기고 싶을때 사용함.
값 설정이 필요하지 않음
<!-- HTML 태그 -->
<div v-cloak>
{{ message }}
</div>/* CSS 속성 */
[v-cloak] {
display: none;
}태그 안에만 정의해선 안되고, 꼭 CSS 규칙과 같이 사용해야함.
7. v-once
컴포넌트를 딱 한 번만 렌더링해줌 (값이 변경되어도 초기값만 보여줌)
→ 주로 변동이 없는 정적인 부분을 보여줄 때 사용
<span v-once>This will never change: {{msg}}</span>8. v-bind
HTML 태그의 속성 값을 동적으로 변경할 때 사용 (태그 사이의 값 X)
<!-- 속성 바인딩 -->
<img v-bind:src="imageSrc" />
<!-- 동적 전달인자 -->
<img v-bind:[key]="value"/>
<!-- CSS 클래스 바인딩 -->
<div v-bind:class="{ red: isRed }"></div>
<!-- CSS 스타일 바인딩 -->
<div v-bind:style="{ fontSize: size+'px' }"></div>9. v-for
for 반복문을 구현하기 위하여 사용
alias in expression을 사용함
<div v-for:"item in items">
{{ item.text }}
</div>
<!-- index 값을 얻을 수도 있음, index 대신 i로 대체 가능 -->
<div v-for:"(item, index) in items">
{{ index }}
</div>10. v-on
엘리먼트에 이벤트 리스너를 연결함
<!-- 메서드 핸들러 -->
<button v-on:click="doThis"></button>
<!-- 동적 이벤트 -->
<button v-on:[event]="doThis"></button>
<!-- 인라인 구문 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 오브젝트 구문 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>11. v-model
데이터의 양방향 바인딩
데이터→뷰의 형태에서 뷰 ⇄ 데이터 형태로 바인딩
(데이터에 있는 값이 뷰에 나타나고, 뷰의 값이 바뀌면 데이터의 값도 바뀜)
<input type="text" v-model="name"/>폼에 관련된 태그( <input>, <select>, <textarea> )에만 사용할 수 있음
참고 링크
[https://v3.ko.vuejs.org/api/directives.html#v-once](https://v3.ko.vuejs.org/api/directives.html#v-once)
[https://ux.stories.pe.kr/112](https://ux.stories.pe.kr/112)
[https://velopert.com/3044](https://velopert.com/3044)