Custom directives trong Vue 3?

Custom directive cho phép reuse DOM manipulation logic.

Trong <script setup>:

javascript

// vFocus — auto-focus element khi mount
const vFocus = {
  mounted: (el) => el.focus()
}

// vTooltip với value
const vTooltip = {
  mounted(el, binding) {
    el.title = binding.value
    el.style.cursor = 'help'
  },
  updated(el, binding) {
    el.title = binding.value
  }
}

vue

<input v-focus />
<span v-tooltip="'Hover me'">?</span>

Directive hooks: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted.

Xem toàn bộ Vue.js cùng filter theo level & chủ đề con.

Mở danh sách Vue.js