SOURCE

new Vue({
  el: '#app',
  data: {
    banana: '香蕉'
  },
  directives: {
    demo: {
      bind (el, binding, vnode, oldVnode) {
        // 指令所绑定的元素，可以用来直接操作 DOM，即 div
        console.log('001 ==>', el)
        
        // 指令名，但不包括 v- 前缀，即 demo
        console.log('002 ==>', binding.name)
        
        // 指令绑定的值，即“香蕉”
        console.log('003 ==>', binding.value)
        
        // 字符串形式的指令表达式，即 banana
        console.log('004 ==>', binding.expression)
        
        // 传给指令的参数，即 food
        console.log('005 ==>', binding.arg)
        
        // 指令绑定的前一个值，即 undefined
        console.log('006 ==>', binding.oldValue)
        
        // 一个包含修饰符的对象，即 {fruits: true, apple: true}
        console.log('007 ==>', binding.modifiers)
        
        // Vue 编译生成的虚拟节点
        console.log('008 ==>', vnode)
        
        // 上一个虚拟节点
        console.log('009 ==>', oldVnode)
      }
    }
  }
})

<div id="app">
  <div v-demo:food.fruits.apple="banana">
  </div>
</div>