vue自定义指令

除了内置的指令外，Vue 也允许注册自定义指令。

vue用Vue.directive(id,definition)方法注册一个全局自定义指令，它接受两个参数，指令ID和定义对象。也可以用directives注册一个局部自定义指令。

// 注册一个全局自定义指令 `v-my-directive`
Vue.directive('my-directive', {
  // 钩子函数    当指令第一次绑定到 DOM 中时……
  bind: function (el) {

  }
})
// 注册一个局部自定义指令
directives: {
  my-directive: {
    bind: function (el) {
      
    }
  }
}

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

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数的参数:

el：指令所绑定的元素，可以用来直接操作 DOM 。

vm : 拥有该指令的上下文。

binding：一个对象，包含以下属性：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。点击VNode API 了解更多。
oldVnode：上一个虚拟节点，在 update 和 componentUpdated 钩子中可用

<div id="demo" v-demo-directive="LightSlateGray : msg"></div>

    Vue.directive('demoDirective', {
        bind: function () {
            this.el.style.color = '#fff'
            this.el.style.backgroundColor = this.arg
        },
        update: function (value) {
            this.el.innerHTML =
                    'name - '       + this.name + '<br>' +
                    'raw - '        + this.raw + '<br>' +
                    'expression - ' + this.expression + '<br>' +
                    'argument - '   + this.arg + '<br>' +
                    'value - '      + value
        }
    });
    var demo = new Vue({
        el: '#demo',
        data: {
            msg: 'hello!'
        }
    })

如果指令需要多个值，可以传入一个 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!"
})

高级选项

deep
如果你希望在一个对象上使用自定义指令，并且当对象内部嵌套的属性发生变化时也能够触发指令的 update 函数，那么你就要在指令的定义中传入 deep: true。

   <div id="demo" v-my-directive="obj"></div>
    Vue.directive('my-directive', {
      deep: true,
      update: function (obj) {
        // 当 obj 内部嵌套的属性变化时也会调用此函数
      }
    })
let demoVM = new Vue({
     el:"#demo",
     data:{
        a:{b:{c:2}}
     }
})

twoway
如果你的指令想向 Vue 实例写回数据，你需要传入 twoWay: true 。该选项允许在指令中使用 this.set(value)。

Vue.directive('example', {
  twoWay: true,
  bind: function () {
    this.handler = function () {
      // 把数据写回 vm
      // 如果指令这样绑定 v-example="a.b.c",
      // 这里将会给 `vm.a.b.c` 赋值
      this.set(this.el.value)
    }.bind(this)
    this.el.addEventListener('input', this.handler)
  },
  unbind: function () {
    this.el.removeEventListener('input', this.handler)
  }
})
let demo = new Vue({
     el:"#demo",
     data:{
        a:{b:{c:2}}
     }
})

最后编辑于：2018.07.04 22:08:14