[Vue] Vue 디렉티브

nhchoi·2021년 10월 26일
0

Vue

목록 보기
6/6
post-thumbnail

디렉티브(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)
profile
👩‍💻

0개의 댓글