Vue native commands and custom command instances

Vue native commands and custom command instances

1. Indigenous instructions

When I started learning Vue, I saw the word "Instruction" on the official website. I stopped, what? What is a command? Later, I continued to look at what "v-for" "v-show" and "v-if" are called commands. Later, when Vue started to play, it was found that there were just a few common commands, such as"v-if”“v-show”“v-model”“v-for”“v-bind”“v-on”.

You can think of it as a syntactic sugar or a command. The general usage of these commands is as follows:

1. v-text: string usage: update the textContent of an element. to update the textContent, use the {Mustache} interpolation.

2. v-show: any usage: switches the display css attribute of an element based on the expression's false value.

3. v-if: any usage: Specifies the true and false condition rendering element of the expression. When switching, the element and its data binding/component are destroyed and rebuilt. If it is <template>, and its content is proposed as a condition block. When the conditions change, change the command to set the transition effect.

4. v-for: Array | Object | number | string usage: the element or template block syntax is alias in expression.

5. v-on: Function | Inline Statement parameter $ event (required) modifier.

6. v-bind: any type: any (with argument) | Object (without argument) parameter: attrOrProp (optional); modifier :. prop --- used to bind DOM attributes ;. camel --- transform the kebab-case attribute name into camelCase. (supported since 2.1.0) usage: other types of values are supported when the class and style features are bound. Such as objects and arrays. When binding prop, the child component must declare prop.

7. v-model: Limits <input> <select> components.

2. Custom commands

However, it is sometimes not enough to rely on the above. For example, in a project recently developed by our company, the UI makes a page. Then when I talk to the UI about the requirement, I 'd better add an effect to the input box. When the input box is displayed, the focus is displayed, showing a beating cursor. In this way, you can see clearly where the input is.

After reaching a consensus, I suddenly found that WTF? I use Vue, data-driven view, but I cannotdocument.getElementById(inputid).focus()Right.

As a result, I went to the document and suddenly found a word direve VE. I checked the meaning of this word:

After reading the document, the general meaning is that, although this v-model and v-show are already very useful, they will not be able to stop the cool operations of the front-end staff, in some cases, you need to perform underlying operations on common DOM elements. In this case, you will use custom commands. Of course, the official example is what I need. Now I get a new wave of knowledge.

Like the html I wrote at will, there is a v-focus in it, which I have never seen before. What is this? Don't worry, continue to look down:

Yes, this v-focus command is defined by myself. Of course, you can also name it with words other than keywords, which is convenient and free.

Let's take a look at this custom command. I believe everyone understands this part below. It's nothing more than if the value is equal to true, then el will focus on getting the focus.

What does the previous update mean? Update indicates the update function. This is a hook function, that is, when the focusState is updated, the function is called. When the function is called, The focusState is determined. If it is true, the focus is obtained. If it is false, while cool. Similarly, when viewing official documents, we will find that the same hook functions include:

• Bind: it is called only once. It is called when the command is bound to an element for the first time. You can perform one-time initialization settings here.

• Inserted: it is called when the bound element is inserted into the parent node (only ensure that the parent node exists, but not necessarily already inserted into the document ).

• Update: it is called when the VNode of the component is updated, but may occur before the VNode of the component is updated. The command value may have changed or not. However, you can ignore unnecessary template updates by comparing the values before and after updates.

• ComponentUpdated: The VNode of the component where the command is located and its sub-vnodes are all updated and called.

• Unbind: called only once. It is called when the command is unbound from the element.

With these operations, we can complete many cool routines. For example, when loading a large image, we can use a solid color placeholder and render it directly after the image is loaded. For example:

In this example, the hook function we call is inserted, which is triggered after the parent node is inserted. When the image is not loaded, use a random color instead. After the image is loaded, remove the background color and replace it with the image.

Here, the input parameter el ---- the current dom node and binding ----- is an object that contains the following attributes:

• Def: hook function.

• RawName: command name.

• Value: the value passed into the command.

Similarly, we can encapsulate a variety of created wheels for custom commands. After all, we stand on the shoulders of giants to see farther and farther.