vue自定义指令

vue除了提供了v-model、v-show、v-if等默认指令,还允许注册了自定义指令。比如在需要对DOM元素进行底层操作的时候,就会用到自定义指令。

自定义指令用法

可以在全局中定义自定义指令:

Vue.directive('demo', {
  bind (el, binding, vnode) {
    //操作
  },
  unbind(el) {
    //操作
  }
})

也可以在组件中自定义局部指令:

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
},

在模板中任何元素上使用新的 v-focus 属性,如下

<input v-focus>

自定义指令语法:

钩子函数

  • bind : 只调用一次,指令第一次绑定到元素时调用。可用于一次性初始化;
  • inserted: 被绑定元素插入父节点时调用(仅保证父节点存在,不保证插入都文档中)
  • update:所在组件的Vnode更新是调用,可能发生在子VNode更新之前。
  • componentUpdated : 指令所在组件的Vnode及其子VNode全部更新后调用。
  • unbind:只调用一次,指令与元素解绑时调用。

钩子函数参数

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

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

- value: 指令的绑定值,例如: v-my-directive="1+1"中,绑定值为2

- expression: 字符串形式的指令表达式。例如v-my-directive = "1+1",表达式为"1+1"。

- name: 指令名,不包括v-前缀

- oldValue: 指令绑定的前一个值,仅在updata和componentUpdated 钩子中可用。无论值是否改变都可用。

- arg : 传给指令的参数,可选。例如 v-my-directive:foo 中,参数为"foo"。

- modifiers : 一个包含修饰符的对象。例如:v-my-directive:foo.bar中,修饰符对象为{foo : true,bar : true}

  • vnode : Vue编译生成的虚拟节点。
  • oldVnode : 上一个虚拟节点,仅在update 和 componentUpdated 钩子中可用。

例子:

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

函数简写

很多时候,你可能想bind和update时触发相同行为,而不关心其他钩子。

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

对象字面量

如果指令需要多个值,可以传入一个 JavaScript 对象字面量。记住,指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

原文发布于微信公众号 - 女程序员的日常(gh_df41d619fb70)

原文发表时间:2019-03-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券