Vue3:自定义指令directive

一、vue2自定义指令生命周期

  • bind: function () {},
  • inserted: function () {},
  • update: function () {},
  • componentUpdated: function () {},
  • unbind: function () {}

二、vue3自定义指令生命周期

  • created:在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时,这很有用。

  • beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用。

  • mounted:在绑定元素的父组件被挂载后调用。

  • beforeUpdate:在更新包含组件的 VNode 之前调用。

  • updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用。

  • beforeUnmount:在卸载绑定元素的父组件之前调用

  • unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次。

三、使用




Vue3:自定义指令directive_第1张图片

 四、实例




Vue3:自定义指令directive_第2张图片

 

你可能感兴趣的