Пользовательские директивы Vue3

В дополнение к основным директивам, заданным по умолчанию (v-model и v-show), Vue также позволяет регистрировать пользовательские директивы.

Ниже мы регистрируем глобальную директиву v-focus. Эта директива предназначена для того, чтобы элемент получал фокус при загрузке страницы:

Пример

<div id="app"> <p>Когда страница загружается, элемент input автоматически получает фокус:</p> <input v-focus> </div> <script>``` const app = Vue.createApp({}) // Регистрируем глобальную пользовательскую директиву `v-focus` app.directive('focus', { // Когда привязанный элемент загружается в DOM…… mounted(el) { // Фокусируем элемент el.focus() } }) app.mount('#app') ```</script>

Попробуйте »

Мы также можем использовать опцию directives в экземпляре для регистрации локальных директив, чтобы директиву можно было использовать только в этом экземпляре:

Пример

<div id="app"> <p>Когда страница загружается, элемент input автоматически получает фокус:</p> <input v-focus> </div> <script>``` const app = { data() { return { } }, directives: { focus: { // Определение директивы mounted(el) { el.focus() } } } } Vue.createApp(app).mount('#app') ```

Попробуйте »

Хуки

Функции-хуки

Функция определения директивы предоставляет несколько функций-хуков (необязательно):

  • created : Вызывается перед применением атрибутов или обработчиков событий связанного элемента.

  • beforeMount : Вызывается, когда директива впервые привязывается к элементу и до монтирования родительского компонента.

  • mounted : Вызывается после монтирования родительского компонента привязанного элемента.

  • beforeUpdate: Вызывается перед обновлением VNode содержащего компонента.

  • updated: Вызывается после обновления VNode содержащего компонента и VNodes его дочерних компонентов.

  • beforeUnmount: Вызывается один раз перед размонтированием родительского компонента привязанного элемента.

  • unmounted: Вызывается один раз, когда директива отвязана от элемента, а родительский компонент был размонтирован.

Пример

import { createApp } from 'vue' const app = createApp({}) //Регистрация app.directive('my-directive', { //У директив есть набор хуков жизненного цикла: //Вызывается до применения атрибутов или слушателей событий привязанного элемента created() {}, //Вызывается до монтирования родительского компонента привязанного элемента beforeMount() {}, //Вызывается, когда родительский компонент привязанного элемента смонтирован mounted() {}, //Вызывается перед обновлением VNode содержащего компонента beforeUpdate() {}, //Вызывается после обновления VNode содержащего компонента и VNodes его дочерних компонентов updated() {}, //Вызывается перед размонтированием родительского компонента привязанного элемента beforeUnmount() {}, //Вызывается при размонтировании родительского компонента привязанного элемента unmounted() {} }) //Регистрация (функциональные директивы) app.directive('my-directive', () => { //Это будет вызываться как `mounted` и `updated` }) //геттер; возвращает определение директивы, если она зарегистрирована const myDirective = app.directive('my-directive')

Параметры функции-хука

Параметры функций-хуков:

el

elЭлемент, к которому привязана директива. Это можно использовать для прямого управления DOM.

binding

binding — это объект, содержащий следующие свойства:

  • instance: Экземпляр компонента, использующего директиву.
  • value: Значение, переданное директиве. Например, вv-my-directive="1 + 1": Предыдущее значение, только в2。
  • oldValue: в, значение —beforeUpdateиupdated: Доступно независимо от того, изменилось ли значение.
  • arg: Параметр, переданный директиве (если есть). Например, вv-my-directive:foo: в, arg —"foo"。
  • modifiers: Объект, содержащий модификаторы (если есть). Например, вv-my-directive.foo.bar: в, объект modifiers —{foo: true，bar: true}。
  • dir: Объект, передаваемый в качестве аргумента при регистрации директивы. Например, в следующей директиве:
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

dir будет следующим объектом:

{
  mounted(el) {
    el.focus()
  }
}

vnode

Схема реального DOM-элемента, полученного в качестве параметра el.

prevNode

Предыдущий виртуальный узел, доступен только в хуках beforeUpdate и updated.

В следующем примере показано использование этих параметров:

Пример

<div id="app"> <div v-example="{ name: 'Example', url: 'www.example.com' }"></div> </div> ​ <script>``` const app = Vue.createApp({}) app.directive('example', (el, binding, vnode) => { console.log(binding.value.name) // => "Example" console.log(binding.value.url) // => "www.example.com" var s = JSON.stringify el.innerHTML = s(binding.value) }) app.mount('#app') ```</script>

Попробуйте »

Иногда нам не нужны другие функции-хуки, поэтому мы можем написать сокращённую функцию следующим образом:

Vue.directive('example', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

Функция директивы принимает любое допустимое JavaScript-выражение. В следующем примере передаётся объект JavaScript:

Пример

<div id="app"> <div v-example="{ color: 'green', text: 'Example!' }"></div> </div> <script>``` Vue.directive('example', function (el, binding) { // AbbreviationMethodSettingsTextandBackground color el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' }) ```</script>

Попробуйте »
Другие расширения