vue指令

Fri, 04 Oct 2024 00:00:00 +0800

1.1 钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind 只调用一次，指令与元素解绑时调用。

Vue.directive('gqs',{
 bind() {
 // 当指令绑定到 HTML 元素上时触发.**只调用一次**
 console.log('bind triggerd')
 },
 inserted() {
 // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.**
 console.log('inserted triggerd')
 },
 updated() {
 // 所在组件的`VNode`更新时调用.
 console.log('updated triggerd')
 },
 componentUpdated() {
 // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
 console.log('componentUpdated triggerd')

 },
 unbind() {
 // 只调用一次，指令与元素解绑时调用.
 console.log('unbind triggerd')
 }
 })

1.2 钩子函数参数

指令钩子函数会被传入以下参数：

Vue指令 on Last Stand

vue指令

1.1 钩子函数

1.2 钩子函数参数