[Vue.js] 디렉티브(Directive) - (1)

◽ 디렉티브란?

v-를 prefix로 갖는다.

 

◽ 디렉티브의 종류

v-text

요구값: string

엘리먼트의 textContent를 업데이트한다.

<span v-text=“msg”></span>
<!-- 같은 방법 -->
<span>{{ msg }}</span>

 

 

v-html

요구값: string
일반 html을 삽입하며, vue 템플릿으로 컴파일되지 않는다.

해당 디렉티브를 사용하여 작성하려는 경우 컴포넌트를 사용하는 해결법으로 다시 생각해보라고 한다.

사용자가 제공한 컨텐츠에서는 절대로 사용하지 말아야 한다.

<div v-html=“html”></div>

 

 

v-show

요구값: any
true, false 여부로 엘리먼트의 display 속성을 전환한다.

<div v-show=“true”></div>

 

 

v-if / v-else-if / v-else

요구값: any
표현식 값의 true, false에 따라 엘리먼트를 조건부로 렌더링한다.
단, v-else의 경우 표현식이 필요없다.

<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>
  Not A/B/C
</div>

 

 

v-for

요구값: array, object, number, string, Iteralble
원본 데이터를 기준으로 엘리먼트나 템플릿 block을 여러번 렌더링한다.
디렉티브의 값은 엘리먼트에 별칭을 제공하기위해 ‘alias in expression’ 문법을 사용해야한다.

<!-- 'alias in expression' 문법 -->
<div v-for=“item in items” :key=“item.id”>
{{ item.text }}
</div>

 

그리고 vue에서는 각 노드의 id를 추적하여 유일한 값을 주는 key 속성을 사용하여 정렬힌트를 제공해야한다고 한다.
반복되는 DOM 내용이 단순하거나 성능 향상을 위하여 기본 동작에 의존하지 않는 경우를 제외하고는 언제나 key를 추가하는 것이 좋다.

<!--
data의 형태가 { title: ‘hello’, author: ‘tester’ } 인 경우,
‘name’에 해당하는 값은 title, author
‘value’에 해당 하는 값은 hello, tester
-->
<div v-for=“(item, index) in items”></div>
<div v-for=“(value, key) in items”></div>
<div v-for=“(value, name, index) in items”></div>

v-on

요구값: funtion, inline-statement, object
약칭으로 @를 사용하며, 전달인자는 event이다.

<!— 메서드 핸들러 —>
v-on:click=“이벤트이름”
<!— 동적 이벤트 —>
v-on:[event]=“이벤트이름”

v-bind

약칭으로 :를 사용한다.

<!-- 약칭 적용 전 -->
<img v-bind:src=“imageSrc” />

<!-- 약칭 적용 후 -->
<img :src=“imageSrc”>

<!-- CSS 속성 부여하기 -->
<div :class=“{ red: isRed }“>
<div :class=“[classA, { classB: isB }, class C]”>

<!-- .camel의 사용
문자열 템플릿을 사용하거나 vue-loader 또는 vuetify로 컴파일하는 경우 불필요하다. -->
<svg :view-box.camel=“viewBox”></svg>

v-model

input, textarea, select 요소들에 양방향 바인딩을 생성한다.
v-model은 엘리먼트의 초기값, checked 속성, selected 속성 모두를 무시하며 Vue 인스턴스 데이터를 원본 소스로 취급한다.
따라서 기본값이 필요한 경우에는 스크립트 영역의 data 옵션에서 초기값을 선언해주어야한다.

v-model의 수식어

• .lazy: input 대신 change 이벤트를 수신)
• .number: 유효한 입력 문자열을 숫자로 캐스팅)
• .trim: 입력값에 공백제어)

 

textarea에서 텍스트 보간은 작동하지 않는다.

<!-- 작동하지 않으므로 v-model을 사용해야한다. -->
<textarea>{{ text }}</textarea>

 

---

 

출처

디렉티브(Directives) | Vue.js

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.