开局一张图，看懂Vue自定义指令

Bertha 。 2023-02-24 03:44 40阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

### 自定义指令 ###

自定义指令也可再局部或者全局进行自定义。

#### 全局注册 ####

Vue.directive('focus',{ 
    //指令选项
    });

#### 局部注册 ####

var app=new Vue({ 
    el:'#app',
    directive:{ 
    focus:{ 
    //指令选项
    }
    }
    })

### 自定义指令的选项： ###

#### 钩子函数 ####

*  bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
 *  inserted：被绑定元素插入父节点时调用(父节点存在即可调用，不必存在于document中)
 *  update：被绑定元素所在的模板更新时调用
 *  componentUpdated:被绑定元素所在模板完成一次更新周期时调用
 *  unbind:只调用一次，指令与元素解绑时调用

#### 钩子函数 的参数 ####

el:指令所绑定的元素，可以用来直接操作DOM  
binding:一个对象，包含以下属性：

> name 指令名，不包括v-前缀  
> value 指令的绑定值  
> oldValue指令绑定的前一个值，在update，componentUpdated钩子中可用，无论值是否改变都可用。 > expression绑定值的字符串形式  
> arg 传给指令的参数  
> modifiers 一个包含修饰符的对象

vnode：Vue编译生成的虚拟节点  
oldVnode：上一个虚拟节点，在update，componentUpdated钩子中可用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20230209/4192bb44d3824d6791c5585f42cb07a0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，40人围观）

还没有评论，来说两句吧...

相关阅读

相关一张图看懂微服务架构路线

今天这篇文章分享一下微服务架构路线，希望对大家有所帮助~

朴灿烈づ我的快乐病毒、/ 2024年05月23日 22:16/ 0 赞/ 174 阅读

相关一张图看懂JVM之类装载系统

JVM类装载一直是Java程序员无法忽视的一块知识点,这是我微信关注推荐一篇文章,下面这张图好评，包括的知识点比较详细的包括(类加载过程、虚拟机内存结构以及垃圾回收算法等)

快来打我*/ 2024年02月19日 17:26/ 0 赞/ 118 阅读

相关一张图带你看懂final关键字

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAY3JhenlLLg_size_20_color_FFFFFF_t

川长思鸟来/ 2023年10月01日 21:14/ 0 赞/ 118 阅读

相关一张图看懂React 生命周期

React 生命周期 react生命周期如图所示。左边是组件第一次加载的流程，右边是自组件被父组件更新的流程。 ![在这里插入图片描述][watermark_t

- 日理万妓/ 2023年06月16日 02:00/ 0 赞/ 178 阅读

相关 HBase架构一张图看懂

> 以下是华为工程师很早之前总结的HBase架构图解，非常经典。虽然现在架构有所完善，但总体思想没有改 ![一张图看懂HBase][HBase] [HBase]: /im

小咪咪/ 2023年06月09日 10:16/ 0 赞/ 169 阅读

相关开局一张图，看懂Vue自定义指令

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Bertha 。/ 2023年02月24日 03:44/ 0 赞/ 41 阅读

相关一张图看懂开源协议

最流行的六种开源协议：GPL、BSD、MIT、Mozilla、Apache和LGPL。乌克兰程序员Paul Bagwell，画了一张分析图，说明应该怎么选择。这是我见过的最

╰半夏微凉°/ 2022年08月01日 00:20/ 0 赞/ 425 阅读

相关一张小图看懂hibernate

一张小图看懂hibernate ![Center][] ![Center 1][] [Center]: /im

骑猪看日落/ 2022年06月09日 00:06/ 0 赞/ 391 阅读

相关一张图看懂JVM

一张图看懂JVM（本文以1.7版本为例，1.8永久代更改为元空间自行总结） JVM结构示意图 ![640_wx_fmt_png_tp_webp_wxfrom_

墨蓝/ 2022年05月11日 03:20/ 0 赞/ 439 阅读

相关一张图看懂开源许可协议

一个执着于技术的公众号 ![金属质感分割线][format_png] 世界上的开源许可证，大概有上百种。很少有人搞得清楚它们的区别。即使在最流行的六种----

比眉伴天荒/ 2021年07月26日 23:48/ 0 赞/ 662 阅读