뷰 디렉티브 (Vue Directive)

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다.

Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다.

 

---

뷰 디렉티브 (Vue Directive)

HTML 태그 안에 'v-'를 접두사로 가지는 모든 속성을 의미합니다.

뷰 디렉티브는 화면 요소를 더 쉽게 조작하기 위해 사용하는 기능으로 동적인 웹을 구현할 수 있습니다.

 

---

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

목적

지정한 뷰 데이터의 값(참, 거짓)에 따라 해당 HTML 태그를 화면에 표시하거나 하지 않도록 지정합니다.

해당 태그를 완전히 삭제해서 화면 상에 노출하지 않습니다.

 

형식

<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

목적

지정한 뷰 데이터의 갯수만큼 해당 HTML 태그를 반복 출력합니다.

 

형식

<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>

---

v-show

목적

'v-if'와 유사하게 사용하는 디렉티브로 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않도록 지정합니다. 

해당 태그를 삭제하지 않고 css 효과를 'display:none;'으로 설정하여 화면 상에 노출하지 않습니다.

 

형식

<h1 v-show="flag">뷰 디렉티브 예시(Vue Directive Example)</h1>

---

v-bind

목적

HTML 태그의 기본 속성과 뷰 데이터 속성을 연결합니다.

 

형식

<!-- bind an attribute -->
<img v-bind:src="imageSrc" />

<!-- dynamic attribute name -->
<button v-bind:[key]="value"></button>

<!-- shorthand -->
<img :src="imageSrc" />

<!-- shorthand dynamic attribute name -->
<button :[key]="value"></button>

<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName" />

<!-- class binding -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style binding -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop binding. "prop" must be declared in the child component. -->
<MyComponent :prop="someThing" />

<!-- pass down parent props in common with a child component -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

---

v-on

목적

화면 요소의 이벤트를 감지하여 처리합니다.

 

형식

<!-- method handler -->
<button v-on:click="doThis"></button>

<!-- dynamic event -->
<button v-on:[event]="doThis"></button>

<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- shorthand -->
<button @click="doThis"></button>

<!-- shorthand dynamic event -->
<button @[event]="doThis"></button>

<!-- stop propagation -->
<button @click.stop="doThis"></button>

<!-- prevent default -->
<button @click.prevent="doThis"></button>

<!-- prevent default without expression -->
<form @submit.prevent></form>

<!-- chain modifiers -->
<button @click.stop.prevent="doThis"></button>

<!-- key modifier using keyAlias -->
<input @keyup.enter="onEnter" />

<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

<!-- object syntax -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

---

v-model

목적

폼(form)에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화할 때 사용하는 디렉티브

 

형식

<input v-model="searchText" />

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

---

그 외

위에서 언급한 6개의 디렉티브는 주로 사용하는 디렉티브로 더 많은 디렉티브가 있습니다.

자세한 사항은 아래 Vue3 공식 사이트를 참고해주세요.

• https://vuejs.org/api/built-in-directives.html

 

 

---

References

• Do it! Vue.js 입문: https://search.shopping.naver.com/book/catalog/32489500759?cat_id=50010881&frm=PBOKPRO&query=do+it%21+vue&NaPm=ct%3Dlaapzz40%7Cci%3D7954ed9cc7559ee7393564e5030b0438bd5c1fcd%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3Df6d2ac807b583005130cba7e92538e147334e7bd

Do it! Vue.js 입문 : 네이버 도서

• Vue3.js 공식 사이트: https://vuejs.org/api/built-in-directives.html

Built-in Directives | Vue.js