Vue前端面试题总结(三十三)Vue自定义指令如何使用? 详解
什么自定义指令?指令的注册方式和过滤器,组件是一样的都是分为全局注册和局部注册1.全局注册Vue.directive('name',{})2.局部注册directive:{name:''}然后在模块中直接使用即可Vue也提供了几种自定义指令的钩子函数bind:指令第一次绑定到元素时调用,只执行一次。inserted:被绑定的元素,插入到父节点的 DOM 中时调用。update:组件更新时调用。co
·
什么自定义指令?
指令的注册方式和过滤器,组件是一样的
都是分为全局注册和局部注册
1.全局注册
Vue.directive('name',{})
2.局部注册
directive:{
name:''
}
然后在模块中直接使用即可
Vue也提供了几种自定义指令的钩子函数
bind:指令第一次绑定到元素时调用,只执行一次。 inserted:被绑定的元素,插入到父节点的 DOM 中时调用。
update:组件更新时调用。
componentUpdated:组件与子组件更新时调用。
unbind:指令与元素解绑时调用,只执行一次。
除update 与 componentUpdated 钩子函数之外,每个钩子函数都含有 el、binding、vnode 这三个参数。
oldVnode 只有在 update 与 componentUpdated 钩子中生效。
参数el 就是指令绑定的 DOM 元素,而binding是一个对象,它包含一下属性:name、value、oldValue、expression、arg、modifiers。
另外值得注意的一点是,除了 el 之外,binding、vnode 属性都是只读的。
注:Vue自定义指令也可以写修饰符和传参
更多推荐
已为社区贡献6条内容
所有评论(0)