Vue:directives

lastmod 2022-04-04created 2022-04-044 edits

Examples

• JavaScript:ResizeObserver#Vue directive - How to implement a Vue directive for ResizeObserver

Hook functions

A directive definition object can provide several hook functions (all optional).

bind

Called only once, when the directive is first bound to the element. This is where you can do one-time setup work.

inserted

Called when the bound element has been inserted into its parent node. (This only guarantees parent node presence, not necessarily in-document.)

update

Called after the containing component has updated, but possibly before its children have updated. The directive's value may or may not have changed, but you can skip unnecessary updates by comparing the binding's current and old values. (See the hook arguments below.)

componentUpdated

Called after the containing component and its children have updated.

unbind

Called only once, when the directive is unbound from the element.

Directive hook arguments

Directive hooks are passed the following arguments.

el

The element the directive is bound to. This can be used to directly manipulate the DOM.

binding

An object containing the following properties.

• name: The name of the directive, without the v- prefix.
• value: The value passed to the directive. For example, in v-my-directive="1 + 1", the value would be 2.
• oldValue: The previous value. Only available in update and componentUpdated. It lets you check whether the value has changed.
• expression: The expression as a string. For example, in v-my-directive="1 + 1", the expression would be "1 + 1".
• arg: The argument passed to the directive, present only if one is given. For example, in v-my-directive:foo, it would be "foo".
• modifiers: An object containing modifiers, present only if any are given. For example, in v-my-directive.foo.bar, the modifiers object would be { foo: true, bar: true }.

vnode

The virtual node produced by Vue's compiler. See the VNode API for full details.

oldVnode

The previous virtual node. Only available in update and componentUpdated.

Resize Directive

The v-resize directive implementation used in vuetify. See the ${vuetify_root}/packages/vuetify/src/directives/resize/index.ts file.

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

• Custom Directives — Vue.js