Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

In a previous article, we combed through and compared the lifecycle (hook) functions in Vue2.0 and 3.0, and found that there are still big changes in 3.0. In this article, we will take a look at how custom directives are implemented and defined in Vue2.0. I will continue to review the implementation of custom directives in version 3.0 and a comparison with version 2.0.

Vue2.0 custom instruction

We know that VUE provides us with a powerful set of built-in core instructions, such as V-for, V-Model, etc., so in addition to these core built-in instructions, sometimes according to the business still need to carry out low-level operations on ordinary DOM elements, then need to use some custom instructions, Especially da also thought of this point. Directive (name, options); var. Directive (name, options); var. A custom instruction can be realized, which name is instruction (without v -), the options can be understood as configuration items, some of the more important is the inside of the hook function, because the custom order all have to deal with the logic should be written in the corresponding hook function, a custom contains the complete hook function command syntax should be as follows:

Vue.directive('focus', {bind:function(el,binding,vnode,oldVnode),
	inserted:function(el,binding,vnode,oldVnode),
	update:function(el,binding,vnode,oldVnode),
	componentUpdate:function(el,binding,vnode,oldVnode),
	unbind:function(el,binding,vnode,oldVnode)})Copy the code

Hook functions and arguments

As shown above, a complete custom directive should contain five hook functions, each of which takes the same four parameters, but each is optional, meaning that if one or more functions are not needed, they can be omitted. Let’s examine the role and purpose of each hook function

  • Bind: Called only once, the first time a directive is bound to an element. This is where you can do some one-time initialization.
  • Inserted: Called when the bound element is inserted into a fujied parent (the parent is guaranteed to exist, but not necessarily inserted into the document). For example, if we want to implement a text box autofocus directive, we should use this hook
  • Update: called when the component’s VNode is updated, but may occur before its child VNodes are updated. That is, it is possible that the hook will fire before the child component has been updated.
  • ComponentUpdated: Invoked when the vNode of the component where the directive resides and its child VNodes are all updated. Therefore, we usually use this hook function instead of the above update function when dealing with component updates
  • Unbind: Like bind, the directive is called only once when unbinding an element.

See the above analysis, the implementation of a custom instruction is not a thief, we just need to remember her syntax and hook function, and then in the corresponding function to do the corresponding logic processing.

What are the four parameters of the hook function

  • El: The element bound by the directive that can be used to manipulate the DOM directly.
  • Binding: An object containing the following attributes:
    • Name: indicates the command name, excluding the V – prefix.
    • Value: specifies the binding value of the directive. For example, v-my-directive=”1 + 1″, the binding value is 2.
    • OldValue: The previous value of the directive binding, available only in the UPDATE and componentUpdated hooks. Available regardless of whether the value changes.
    • Expression: command expression in the form of a string. For example, if v-my-directive=”1 + 1″, the expression is “1 + 1”.
    • Arg: Optional parameter passed to the instruction. For example, v-my-directive:foo, the parameter is “foo”.
    • Modifiers: An object that contains modifiers. For example, in v-my-directive.foo.bar, the modifier object is {foo: true, bar: true}.
  • Vnode: virtual node generated by Vue compilation. Usually not
  • OldVnode: Last virtual node, available only in update and componentUpdated hooks. Not usually.

Example of custom instructions

Here, we just need to get the focus automatically after the text box has been rendered, no more complicated logic, so we just need to use the Inserted hook function

// Register a global custom directive 'V-focus'
Vue.directive('focus', {
	Emitted when the bound element is inserted into the DOM
	inserted:function(el){
		el.focus();// Focus elements}})Copy the code

conclusion

In this paper, we sort out and explain the syntax of custom instruction, hook function and four parameters in hook function in VUe2.0. Finally, we also realized a simple case of focusing text box that could not be simpler. We will continue to explore how Vue3.0 custom instructions are implemented, 3.0 compared to the 2.0 version and what changes have taken place, please look forward to ~ if you like the small friends welcome to like the message add attention oh.