SOURCE

Vue.directive('test', {
    bind: function (el, binding, vnode) {
        console.log(binding);
        console.log("绑定到元素是调用");
    },
    update: function (el, binding) {
        console.log("组件更新时调用");

    },
    unbind: function () {
        console.log("组件销毁时调用");

    }
})
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(', ')
  }
})
var app = new Vue({
    el: '#app',
    data: {
        message: 'hello world',
        num: 10,
        color: "green",
        foo: "right"
    },
    methods: {
        add: function () {
            this.num++
        }
    }
})

<div id="app" >
    <div v-demo:[foo].num.b="message"></div>
    <br>
    <hr>
    <div v-test="num"></div>
    <button @click="add">add</button>
</div>