Directive ('focus', {// When a bound element is inserted into the DOM... Inserted: function (EL) {// Focus element el.focus()}}) directives: {focus: {// Definition of the directive function (el) { el.focus() } } }Copy the code** An instruction definition object can provide the following hook functions (all optional) : **
Bind: Called only once, the first time a directive is bound to an element. This is where you can perform one-time initialization Settings.
Inserted: Called when the bound element is inserted into a parent (the parent is guaranteed to exist, but not necessarily inserted into the document).
Update: called when the component’s VNode is updated, but may occur before its child VNodes are updated. The value of the instruction may or may not have changed. However, you can ignore unnecessary template updates by comparing the values before and after the update (see below for detailed hook function parameters).
We will cover VNodes in more detail when we discuss rendering functions later.
ComponentUpdated: Invoked when the VNode of the component where the directive resides and its child VNodes are all updated.
Unbind: Called only once, when an instruction is unbound from an element.
Here is a custom hook example that uses these properties:
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div> 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(', ') } }) new Vue({ el: '#hook-arguments-example', data: { message: 'hello! '}})Copy the code