vue learning eight custom command

There are two ways vue instruction register

1 global registration 

 Vue.directive in use in main.js

Vue.directive('alert_w', {
    inserted(el,bin,vn) {
        console.log(el,bin,vn)
    },
// ... Some hook function 
})

 

2. Local registration

 Directives in the field to add a component note that more than one letter s global registration method 

 export default {
        name: "app",
        directives(){
            // ... Some hook function 
        }
}

Global and local registration instructions registered hook function has the following options

Vue.directive('alert_w', {
    inserted The () { // called when the binding element into the parent node (only ensure that there is a parent node, but does not necessarily have to be inserted in the document). 
    },
    the bind () { // called only once, the first instruction elements bound to the call. Here you can set a one-time initialization 
    },
    Update () { // when VNode update where the assembly calls, but may occur before their children VNode update. The value of the instruction may be changed, or may not. But you can ignore unnecessary template update by comparing the values before and after the update (hook function parameters detailed below). 
    },
    componentUpdated ({) // instruction that is located and the sub-assembly VNode total update call VNode

    },
    the unbind () { // called only once, when the call instruction tie element solution.

    }

})

Each hook function will have the following parameters

• el: Elements bound instruction can be used to directly operate DOM.
• binding: An object that contains the following properties:
  • name: Command name, not the  v- prefix.
  • value: Binding command value, for example: v-my-directive="1 + 1" , the binding value  2.
  • oldValue: Previous value of command binding, only in  update and  componentUpdated available hooks. Regardless of whether the value change are available.
  • expression: Instruction string expression. For example  v-my-directive="1 + 1" , the expression is  "1 + 1".
  • arg: Pass the command parameters, optional. For example  v-my-directive:foo , the parameters  "foo".
  • modifiers: An object that contains modifier. For example: v-my-directive.foo.bar , the modifier object  { foo: true, bar: true }.
• vnode: Vue compiler-generated virtual node. Venue  VNode API  for more details.
• oldVnode: A virtual node, only in  update and  componentUpdated hook available

which is

Vue.directive('alert_w', {
    inserted The (EL, the Binding, the vnode, oldVnode) { // called when the binding element into the parent node (to ensure that only the presence of the parent node, but does not necessarily have to be inserted in the document). 
        the console.log ( 'inserted The' , EL, Binding, the vnode, oldVnode)
    },
    the bind (EL, Binding, the vnode, oldVnode) { // called only once, the first instruction elements bound to the call. Here you can set a one-time initialization of 
        the console.log ( 'the bind' , EL, Binding, the vnode, oldVnode)
    },
    Update (EL, the Binding, the vnode, oldVnode) { // when VNode update where the assembly calls, but may occur before their children VNode update. The value of the instruction may be changed, or may not. But you can ignore unnecessary template update by comparing the values before and after the update (hook function parameters detailed below). 
        the console.log ( 'Update' , EL, Binding, the vnode, oldVnode)
    },
    componentUpdated (EL, Binding, the vnode, oldVnode) { // vnode vnode where its sub-assembly instructions are all updated call 
        the console.log ( 'componentUpdated' , EL, Binding, the vnode, oldVnode)
    },
    the unbind (EL, Binding, the vnode, oldVnode) { // called only once, when the call instruction tie element solution. 
        the console.log ( 'the unbind' , EL, Binding, the vnode, oldVnode)
    }

})