Рубрика: Vue кастомная директива

Кастомная Директива
представляет обычный объект, которая строится особым образом и имеют жизненный цикл.
Происходит вынесение функции в отдельную директиву для того, чтобы переиспользовать в шаблоне любого компонента, где понадобится выполнение этой функции.

Помимо встроенных директив
(таких как v-model и v-show),
Vue.js позволяет использовать ваши собственные.
При этом важно понимать, что основным механизмом создания повторно используемого кода во Vue 2.0 всё-таки являются компоненты. Тем не менее, для выполнения низкоуровневых операций с DOM пользовательские директивы могут очень пригодиться.

собственная директива во Vue.js
Vue.js

Рубрики
Vue директива Vue кастомная директива Vue.js

Собственная Директива

  • Файл директивы
    directives\VMyDirective.js
export default{
 name:MyDirective,
 //el - текущий элемент к которому привязана директива
 //хук - например Mounted
 Хук(el, binding){
 //binding.value значение передаваемое от директивы
 }
}
  • Хранилище собственных директив
    Удобнее содержать список собственных директив в одном файле как библиотеку.
    directives\index.js
import VMyDirective from './directives/VMyDirective';
export defualt[
 VMyDirective,
]
  • Регистрация цикла собственных директив
import App from './App';
//import VMyDirective from './directives/VMyDirective';
import directive from './directives';

const app = createApp(App);
//add.directive('mydirective',VMyDirective);
directives.forEach(directive=>{
 app.directive(directive.name,directive);
})
add.mount('#app');
  • Собственная директива
    используется каким-то компонентом
<template>
//binding- функция,объект и т.д.
<el v-mydirective="binding"></el>
</template>