Vue:指令(directive)简介

By
写代码

Vue里v-modelv-show等都属于核心指令,除此之外,也可以自己写一些自定义指令。虽然和组件(components)比起来,这些属于锦上添花的小技巧,不过对于大面积的使用,抽取出一些公共方法,放到指令里,有时候能起到事半功倍的效果。

指令可以通过全局注册,也可以局部注册,这一点和组件类似。

指令提供了几个钩子函数,主要是bind(绑定到元素时调用)、unbind(解绑时调用)、inserted(被绑定元素插入到父节点时调用)、update(被绑定元素所在的模版更新时调用)、componentUpdate(被绑定元素所在模版完成一次更新周期时调用)。这几个钩子函数的参数:el(指令绑定的元素)、bindingvnodeoldVnode,其中binding是个很有意思的参数。

官方给的说明

binding: 一个对象,包含以下属性:
name: 指令名,不包括 v- 前缀。
value: 指令的绑定值, 例如: v-my-directive=”1 + 1″, value 的值是 2。
oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive=”1 + 1″ , expression 的值是 “1 + 1″。
arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 “foo”。
modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

这个binding,可以说是打通整个指令数据‘通路’的关键部分。用binding.value取到指令传入的参数(或函数名),并可以用binding.expression取到字面量。

到这里,指令的任务就可以猜到了。比如直接在bind里,实现el这个DOM元素的操作,比如获取焦点,收缩/展开,执行个特定的动画什么的。

或者更进一步,对binding里的东西操作一下。比如通过value传入一个函数,通过arg传入具体参数,用modifiers设置一些标志位。这样,既可以实现执行函数的目的,又有一定的灵活度。

举个栗子

html

这个示例用于实现“点击父元素展开子栏目,点击屏幕任意地方收起子栏目”的效果。放到了github:地址,可以直接copy到工程里或者clone下来看看效果。

bind里,添加click事件监听器。
当判断click事件的target不是绑定元素的子元素,即点击到了其他地方,此时通过binding.value(e)来调用methods里声明的clickedOutside函数,使show = false,达到隐藏的目的。

在unbind里,移除监听器。

总结

相比较于组件,指令看起来简单很多。并且通常不涉及到数据的传递,只是会通过arg传入参数。所以对于指令间的数据传递,官方给出的方式是通过attribute来传递。所以,指令可能真的如字面意义,就是“指令”,绑定或执行一下就可以了。

9

Comments: 5

  1. 最近做的是用 weex,但基本也就是 vue 了,现在学什么都容易头疼了,只是负责桥下 weex 模板,后端和vue是另外一后端负责…

    05月23日
    • @zwwooooo 没办法,头疼也得学习,选择的这一行就是靠学习+积累的。
      weex还没用过,有时间看看去。另外web统一多平台也是个趋势,挺好玩的

      @venmax 05月24日
    • @zwwooooo 还是很佩服你们,学有所成是必须的,我看着都头疼,学起来如果没有需求的话,估计一开始学就会打盹。

      05月24日
  2. 这种文章,只看能看总结部分了,哈哈 :mrgreen:

    05月24日
  3. 看天书一样。 :eek:

    06月14日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: