VUE DAY3 自定义指令

vue除了提供一些核心指令，还允许使用者自定义属性。
一般使用vue时不建议直接对DOM进行操作，但有的时候仍然需要对普通DOM元素进行底层操作，这时候就要用到自定义属性了。
（在需要操作DOM的时候，考虑是否需要使用指令来实现）

Vue.directive('指令名称', {
  //配置参数

  //只会调用一次，当指令绑定到当前元素上时使用
  bind([el, binding]){}, 

  //当元素被插入到父节点的时候使用（渲染时）
  inserted([el, binding]){},

  //当指令对应的数据发生改变时
  update([el, binding]),

  //在所有DOM都更新之后
  componentUpdated([el, binding]){},

  //指令与元素解绑的时候
  unbind([el, binding]){}
}

自定义指令中的bind, inserted, update, unbind都是钩子函数，只写需要使用的就可以了。
钩子函数的参数
el: 当前元素
binding：一个对象，包含以下属性：
     name(binding.name)：指令名，不包括 v- 前缀。
     value(binding.value)：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
     oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
     expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
     arg(binding.arg)：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
     modifiers(binding.modifiers)：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

举个栗子：

//name: myon
//arg: click
//expression: clickFn
//value: f
<button v-myon:click="clickFn">button</button>