vue中自定义指令Vue.directive(指令名, 对象)

最新推荐文章于 2024-09-25 23:06:37 发布

前端小灰机

最新推荐文章于 2024-09-25 23:06:37 发布

阅读量796

点赞数

文章标签： javascript 前端开发语言 vue.js

本文链接：https://blog.csdn.net/qq_59474517/article/details/125626870

版权

1、自定义全局指令

    可以在不同的组件实例中使用, 也就是说在全局任意位置都可以使用
    Vue.directive(指令名, 对象); // 对象中定义了 该指令的所有生命周期函数方法,也叫钩子函数

Vue.directive('red',{
     bind(el,binding){
           console.log(this);
           el.style.background = 'red';
  }
})


全局自定义注册指令简写：
Vue.directive('red',(el,binding)=>{el.style.background = 'red';})

2、自定义局部指令

只能在当前定义的组件中使用

    const vm = new Vue({
        el: '#app',
        data: {
       
   
        },
        methods: {

        },
        directives: {
            yellow: {
                bind(el, binding) {
                  // console.log('bind');
                    el.style.background = 'yellow'
               }
            },


            // 自定义局部简写方式
            // yellow(el, binding) {

            // }

        }
    })

3、自定义参数el,binding

el:代表当前绑定指令的元素
binding：表示当前指令的参数对象，值为binding.value

4、指令生命周期

     bind: 当指令绑定在标签上时就触发的函数,特点: 无法获取到父元素(该时间段当前的标签还没有挂载到父元素上)
   inserted: 当绑定指令的元素 插入到父节点时候触发 特点: 可以获取到父元素,操作父元素了
     update:  表示当前绑定指令的元素上的数据更新的时候触发 (注意: 表示数据更新的时候触发)
    componentUpdated: 表示组件(标签)更新的时候触发
    unbind: 当标签解除自定义指令的时候触发