Skip to content

Vue:directives

Examples

훅 함수

디렉티브 정의 객체는 여러가지 훅 함수를 제공할 수 있습니다. (모두 선택사항입니다.)

bind
디렉티브가 처음 엘리먼트에 바인딩 될 때 한번만 호출 됩니다. 이곳에서 일회성 설정을 할 수 있습니다.
inserted
바인딩 된 엘리먼트가 부모 노드에 삽입 되었을 때 호출 됩니다. (이것은 부모 노드 존재를 보장하며 반드시 document 내에 있는 것은 아닙니다.)
update
포함하는 컴포넌트가 업데이트 된 후 호출됩니다. 그러나 자식이 업데이트 되기 전일 가능성이 있습니다 디렉티브의 값은 변경되었거나 변경되지 않았을 수 있지만 바인딩의 현재 값과 이전 값을 비교하여 불필요한 업데이트를 건너 뛸 수 있습니다. (아래의 훅 전달인자를 참조하세요)
componentUpdated
포함하고 있는 컴포넌트와 그 자식들 이 업데이트 된 후에 호출됩니다.
unbind
디렉티브가 엘리먼트로부터 언바인딩된 경우에만 한번 호출됩니다.

디렉티브 훅 전달인자

디렉티브 훅은 다음을 전달인자로 사용할 수 있습니다.

el
디렉티브가 바인딩된 엘리먼트. 이 것을 사용하면 DOM 조작을 할 수 있습니다.
binding
아래의 속성을 가진 객체입니다.
  • name: 디렉티브 이름, v- 프리픽스가 없습니다.
  • value: 디렉티브에서 전달받은 값. 예를 들어 v-my-directive="1 + 1"인 경우 value는 2 입니다.
  • oldValue: 이전 값. update와 componentUpdated에서만 사용할 수 있습니다. 이를 통해 값이 변경되었는지 확인할 수 있습니다.
  • expression: 표현식 문자열. 예를 들어 v-my-directive="1 + 1"이면, 표현식은 "1 + 1" 입니다.
  • arg: 디렉티브의 전달인자, 있는 경우에만 존재합니다. 예를 들어 v-my-directive:foo 이면 "foo" 입니다.
  • modifiers: 포함된 수식어 객체, 있는 경우에만 존재합니다. 예를 들어 v-my-directive.foo.bar이면, 수식어 객체는 { foo: true, bar: true }입니다.
vnode
Vue 컴파일러가 만든 버추얼 노드. VNode API에 전체 설명이 있습니다.
oldVnode
이전의 버추얼 노드. update와 componentUpdated에서만 사용할 수 있습니다.

WARNING

el 뿐만아니라 모든 전달인자는 읽기 전용으로 사용하여야 합니다. 절대 변경하면 안됩니다. 훅을 통해 이 정보들을 전달하는 경우, 엘리먼트의 dataset을 이용하면 됩니다.

Resize Directive

vuetify에서 사용하는 v-resize directive 구현체 이다. ${vuetify_root}/packages/vuetify/src/directives/resize/index.ts 파일을 보면 된다. 

import { VNodeDirective } from 'vue/types/vnode'

interface ResizeVNodeDirective extends VNodeDirective {
  value?: () => void
  options?: boolean | AddEventListenerOptions
}

function inserted (el: HTMLElement, binding: ResizeVNodeDirective) {
  const callback = binding.value!
  const options = binding.options || { passive: true }

  window.addEventListener('resize', callback, options)
  el._onResize = {
    callback,
    options,
  }

  if (!binding.modifiers || !binding.modifiers.quiet) {
    callback()
  }
}

function unbind (el: HTMLElement) {
  if (!el._onResize) return

  const { callback, options } = el._onResize
  window.removeEventListener('resize', callback, options)
  delete el._onResize
}

export const Resize = {
  inserted,
  unbind,
}

export default Resize

Favorite site