Vue.js 기초 3/3

교육내용을 정리하며 Vue.js 기본 개념에 대해 익히자

📒 2일차

✏️ Custom Directive

1. 프로젝트를 필요에 맞게 제작하는 방법
2. 컴포넌트 옵션이 추상화 및 코드 재사용에 유용하지만 사용자 지정 지시문이 DOM 요소를 직접 조작하는 가장 좋은 방법

✏️ Vue 2 directive 훅

1. bind : directive가 엘리먼트에 바인딩될 때 한번 호출
2. insert : 바인딩 된 요소가 부모 노드에 삽입될 때
3. update : 요소가 업데이트 될 때, 하지만 자식은 업데이트 되지 않은 경우
4. componentUpdated : 자식도 업데이트 된 경우
5. unbind : 지시문이 요소에서 바인딩 해제될 때 한번 호출

✏️ Vue 3 directive 훅

1. created : 요소의 props 혹은 이벤트 리스너가 적용되기 전에 정적으로 호출
2. beforeMount : vue2 bind 훅과 동일, 엘리먼트에 바인딩될 때 한번 호출
3. mounted : vue2 inserted 훅과 동일, 바인딩된 요소가 부모 노드에 삽입될 때 호출
4. beforeUpdate : 요소 자체가 업데이트 되기 전에 호출
5. updated : vue2 componentUpadted 훅과 동일, 자식도 업데이트 된 후 호출
6. beforeUnmount : 요소가 마운트 해제되기 전에 호출
7. unmounted : 이전 언바운드 훅과 동일

✏️ 훅 구현 시 허용되는 인수

1. el : directive는 el 요소에 바인딩, 수정할 수 있는 액세스 권한 제공
2. binding : 많은 속성이 포함된 객체
3. vnode : 가상 노드
4. prevVnode : 이전 가상 노드 (업데이트 훅에서만 사용 가능)

✏️ The Binding Object

바인딩 객체는 실제로 훅에 기능을 추가하는데 도움이 되는 속성 포함

1. name : directive 이름 (v-접두사 없음)
2. value : directive에 전달된 값
3. oldvalue : directive의 이전 값
4. expression : 문자열에 바인딩된 표현식
5. arg : 문자열에 전달된 모든 인수
6. modifiers : 객체로 전달된 모든 수정자