一、一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
Vue.directive('hasPermi',{
bind(el, binding, vnode, oldVnode) {
// 指令第一次绑定到元素时调用，只调用一次
console.log('bind')
},
inserted(el, binding, vnode, oldVnode) {
// 当元素插入到父元素上时触发
console.log('inserted')
},
updated(el, binding, vnode, oldVnode) {
// 所在组件的`VNode`更新时调用.
console.log('updated triggerd')
},
componentUpdated(el, binding, vnode, oldVnode) {
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
console.log('componentUpdated')
},
unbind(el, binding, vnode, oldVnode) {
// 只调用一次，指令与元素解绑时调用.
console.log('unbind')
}
})
二、指令钩子函数会被传入以下参数：
1、el：指令所绑定的元素，可以用来直接操作 DOM。
2、binding：一个对象，包含以下 property：
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 }。
3、vnode：Vue 编译生成的虚拟节点。
4、oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
三、实例：
将el-date根据输入的值进行格式日期
Vue.directive('DateFormat', {
inserted: function (el, binding, vnode) {
const { value: _obj } = binding
const { context: that, data } = vnode
const { expression: key } = data.model
if(that && that._isVue) {
const $this = $($(el).children('input')[0])
$this.on('change', function() {
let value = $this.val()
// 中文日期
if (!value.match(/\d{1,}/g)) {
const chinaNum = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九']
const wList = [...value].map(w => {
const idx = chinaNum.findIndex(p => p == w)
return idx == -1 ? w : idx
})
value = wList.join('')
}
value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 格式化输入格式
const time = value && value.constructor == String ? new Date(value) : value // 转换时间格式
let keys = key.split('.')
// 在 v-date-format=“{keys:['ruleForm','birthday']}”指令中加入自定义的参数 ，走自定义赋值
// 自定义赋值
if (_obj) {
const { keys: keyList } = _obj
keys = keyList
}
if (keys && keys.length >= 2) {
const [key1, key2, key3, key4] = keys
if (key4) {
that[key1][key2][key3][key4] = time
} else if (key3) {
that[key1][key2][key3] = time
} else {
that[key1][key2] = time
}
} else {
that[key] = time
}
})
}
}
})
// 不传参，使用v-model中传递的参数赋值
<el-date-picker
v-date-format
v-model="ruleForm.birthday"
type="date"
value-format="yyyy-MM-dd" format="yyyy-MM-dd" // 保存的日期格式
placeholder="出生日期" />
// 传参，使用v-date-format中传递的参数赋值
// 参数将在inserted接收的binding参数的value中获得：const { value: _obj } = binding
<el-date-picker
v-date-format=“{keys:['ruleForm','birthday']}” // 输入格式自定义
v-model="ruleForm.birthday"
type="date"
value-format="yyyy-MM-dd" format="yyyy-MM-dd" // 保存的日期格式
placeholder="出生日期" />
