Vue学习笔记-自定义指令生命周期函数

自定义指令生命周期钩子函数   

每个钩子函数都可以获取两个参数（除了el外，其他参数都是只读的）
1.el: 作用该指令的DOM对象；
2.binding：一个对象，可以获取作用指令的DOM元素

/*钩子函数开始*/
bind()         //首次加载调用一次，在这个函数内获取不到当前元素的父元素。（如果要写聚焦指令，请在inserted中写）
例：
Vue.directive('demo',{
  bind（el , binding）{
    console.log(el.parentNode)    //null,拿不到父亲元素
  }
})

inserted()    //在bind后调用，也只会调用一次，可以在这个函数内获取当前元素父元素
例：
Vue.directive('demo',{
  bind（el , binding）{
    console.log(el.parentNode)    //可以拿到el父亲元素
  }
})

update（）     // update获取到的值时更新之前的值, update和componentUpdated可以用oldValue参数代表更新之前的值.
例：
Vue.directive('demo',{
  update（el , binding）{
    console.log(binding.value)    //获取到的值时更新之前的值
  }

})

componentUpdated（）  // update和componentUpdate只有在指令绑定的值发生变化调用，比如v-if的值改变，componentUpdated拿到时更新之后的值。
例：
Vue.directive('demo',{
  componentUpdated（el , binding）{
    console.log(binding.value)    //获取到的值时更新之后的值
  }

})

unbind（）  // 可以做一些收尾工作，比如销毁定时器。

bind和inserted想触发相同的行为,可以着这么写
例：
Vue.directive('demo',function（el , binding）{
    //行为代码

})