指令

1、自定义全局指令

作用域：可以在不同的组件实例中使用, 也就是说在全局任意位置都可以使用

语法： Vue.directive(指令名, 对象)

对象中定义了 该指令的所有生命周期函数（也叫钩子函数）方法

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

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

2、自定义局部指令

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

语法：directives: {指令名:对象}

​ directives: {指令名(){}}

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: 当标签解除自定义指令的时候触发